Merge branch 'dev' of http://122.51.230.86:3000/dianliang/lanan-system-vue into dev

src/views/drivingSchool/student/index.vue

@@ -28,7 +28,7 @@
       <el-form-item label="状态" prop="state">
         <el-select v-model="queryParams.state" placeholder="请选择状态" clearable>
           <el-option
-            v-for="dict in dict.type.jx_report_state"
+            v-for="dict in this.getDictDatas('jx_report_state')"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -38,7 +38,7 @@
       <el-form-item label="是否面签" prop="isSign">
         <el-select v-model="queryParams.isSign" placeholder="请选择状态" clearable>
           <el-option
-            v-for="dict in dict.type.sign_status"
+            v-for="dict in  this.getDictDatas('sign_status')"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -49,7 +49,7 @@
       <el-form-item label="是否退学" prop="isReturn">
         <el-select v-model="queryParams.isReturn" placeholder="请选择状态" clearable>
           <el-option
-            v-for="dict in dict.type.school_return"
+            v-for="dict in   this.getDictDatas('school_return')"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -161,12 +161,12 @@
 <!--      <el-table-column label="身份证" align="center" prop="identity" />-->
       <el-table-column label="状态" align="center" prop="state">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.jx_report_state" :value="scope.row.state"/>
+          <dict-tag :options=" this.getDictDatas('jx_report_state')" :value="scope.row.state"/>
         </template>
       </el-table-column>
       <el-table-column label="职业" align="center" prop="prof">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.profession" :value="scope.row.prof"/>
+          <dict-tag :options="this.getDictDatas('profession')" :value="scope.row.prof"/>
         </template>
       </el-table-column>
 <!--      <el-table-column label="是否面签" align="center" prop="isSign">-->
@@ -245,7 +245,7 @@
         <el-form-item label="职业" prop="prof">
           <el-radio-group v-model="form.prof">
             <el-radio
-              v-for="dict in dict.type.profession"
+              v-for="dict in  this.getDictDatas('profession')"
               :key="dict.value"
               :label="dict.value"
             >{{dict.label}}</el-radio>
@@ -254,7 +254,7 @@
         <el-form-item label="状态" prop="state">
           <el-radio-group v-model="form.state">
             <el-radio
-              v-for="dict in dict.type.jx_report_state"
+              v-for="dict in this.getDictDatas('jx_report_state')"
               :key="dict.value"
               :label="parseInt(dict.value)"
             >{{dict.label}}</el-radio>
@@ -263,7 +263,7 @@
         <el-form-item label="是否已面签" prop="isSign">
           <el-radio-group v-model="form.isSign">
             <el-radio
-              v-for="dict in dict.type.sign_status"
+              v-for="dict in this.getDictDatas('sign_status')"
               :key="dict.value"
               :label="parseInt(dict.value)"
             >{{dict.label}}</el-radio>
@@ -272,7 +272,7 @@
         <el-form-item label="是否退学" prop="isReturn">
           <el-radio-group v-model="form.isReturn">
             <el-radio
-              v-for="dict in dict.type.school_return"
+              v-for="dict in  this.getDictDatas('school_return')"
               :key="dict.value"
               :label="dict.value"
             >{{dict.label}}</el-radio>
@@ -377,7 +377,7 @@
 <script>
 // import { listPay, getPay, delPay, addPay, updatePay } from "@/api/system/pay";
 import { listPay, getPay, delPay, addPay, updatePay, findJlListAll, updatePayById } from "./api/DriveSchoolPay";
-import {getToken} from "@/utils/auth";
+import {getAccessToken} from "@/utils/auth";
 
 export default {
   name: "Pay",
@@ -396,7 +396,7 @@ export default {
         // 是否更新已经存在的用户数据
         updateSupport: 0,
         // 设置上传的请求头部
-        headers: {Authorization: "Bearer " + getToken()},
+        headers: {Authorization: "Bearer " + getAccessToken()},
         // 上传的地址
         url: process.env.VUE_APP_BASE_API + "/system/pay/importData"
       },
@@ -455,6 +455,7 @@ export default {
     };
   },
   created() {
+    console.log(this.queryParams,458)
     this.getList();
   },
   methods: {
@@ -476,7 +477,7 @@ export default {
     async okJlClick(name, id) {
       await updatePayById(this.bmId, name, id)
       this.isJl = false
-
+      console.log(479479)
       listPay(this.queryParams).then(response => {
         this.payList = response.data.records;
         this.total = response.data.total;
@@ -493,6 +494,7 @@ export default {
     /** 查询订单列表 */
     getList() {
       this.loading = true;
+      console.log(this.queryParams,496)
       listPay(this.queryParams).then(response => {
         this.payList = response.rows;
         this.total = response.total;

src/views/inspection/screen/api/jcBigScreen.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+// 客户来源分析饼图
+export function chartLineInspectionAmount() {
+  return request({
+    url: '/partnerOwn/partner/chartLineInspectionAmount',
+    method: 'get',
+  })
+}
+
+
+
+

src/views/inspection/screen/jcBigScreen.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="cont">
+    <div class="top_">
+      <div>车辆检测数据大屏</div>
+    </div>
+    <!--    -->
+    <div class="content_">
+      <div class="c_left">
+        <div class="six_box">
+          <div class="s_title">
+            成交金额（已收款）
+          </div>
+          <div class="echaets_box">
+<!--            <div id="khly" style="width: 400px; height: 267px;"></div>-->
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            已收款金额统计分析
+          </div>
+          <div class="echaets_box">
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            订单数量统计分析
+          </div>
+          <div class="echaets_box">
+          </div>
+        </div>
+      </div>
+      <div class="c_cont">
+        <div class="tab_">
+<!--          <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>-->
+<!--          <div @click="countOrAmount()" class="tab_buttom">金额</div>-->
+        </div>
+
+
+        <div class="tab_bt">
+          <div class="yb_">
+            <div class="yb_title">工单总金额（元）</div>
+            <div class="numlist">
+              <!--                <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                  {{index}}-->
+              <!--                </div>-->
+              <div class="num_box">
+<!--                {{ statistics.totalAmount }}-->
+              </div>
+            </div>
+          </div>
+          <div class="yb_">
+            <div class="yb_title">今日工单金额（元）</div>
+            <div class="numlist">
+              <!--              <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                {{index}}-->
+              <!--              </div>-->
+              <div class="num_box">
+<!--                {{ statistics.todayAmount }}-->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="five_box">
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/1.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+<!--              <div class="f_size">{{ statusTickets[3].name }}</div>-->
+<!--              <div class="f_num">{{ statusTickets[3].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/2.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+<!--              <div class="f_size">{{ statusTickets[4].name }}</div>-->
+<!--              <div class="f_num">{{ statusTickets[4].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/3.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+<!--              <div class="f_size">{{ statusTickets[0].name }}</div>-->
+<!--              <div class="f_num">{{ statusTickets[0].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/4.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+<!--              <div class="f_size">{{ statusTickets[1].name }}</div>-->
+<!--              <div class="f_num">{{ statusTickets[1].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/5.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+<!--              <div class="f_size">{{ statusTickets[5].name }}</div>-->
+<!--              <div class="f_num">{{ statusTickets[5].value }}</div>-->
+            </div>
+          </div>
+        </div>
+        <div class="co_title">
+          今日工单
+        </div>
+<!--        <div class="list_long">-->
+<!--          <div class="long_title">-->
+<!--            <div class="l_one">工单号</div>-->
+<!--            <div class="l_two">服务客户</div>-->
+<!--            <div class="l_three">服务顾问</div>-->
+<!--            <div class="l_four">创建时间</div>-->
+<!--          </div>-->
+<!--          <div class="ot_vox">-->
+<!--            <div class="long_box" v-for="(item,index) in todayTickets" :key="index">-->
+<!--              <div class="l_one">{{ item.ticketNo }}</div>-->
+<!--              <div class="l_two">{{ item.userName }}</div>-->
+<!--              <div class="l_three">{{ item.adviserName }}</div>-->
+<!--              <div class="l_four">{{ parseTime(item.createTime) }}</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+      </div>
+      <div class="c_right">
+        <div class="six_box">
+          <div class="s_title">
+            维修类型统计
+          </div>
+          <div class="echaets_box">
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            月工单金额走势
+          </div>
+          <div class="echaets_box">
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            维修工人排行
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
+
+export default {
+  name: 'Index',
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+
+    /**
+     * 客户来源分析饼图
+     */
+    async customerSource() {
+      const res = await RepairBigScreenApi.customerSource();
+        var chartDom = document.getElementById('khly');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          toolbox: {
+            show: true,
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          series: [
+            {
+              name: '客户来源分析',
+              type: 'pie',
+              radius: [20, 100],
+              center: ['50%', '50%'],
+              roseType: 'area',
+              itemStyle: {
+                borderRadius: 2
+              },
+              data: res.data,
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cont {
+  background: #020F32;
+  //background: url("./imgs/back.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100vh;
+}
+
+.top_ {
+  width: 100%;
+  height: 86px;
+  background: url("./imgs/top.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 50px;
+  color: #FFFFFF;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.content_ {
+  width: 100%;
+  display: flex;
+  //align-items: center;
+  justify-content: space-between;
+}
+
+.c_left {
+  width: 25%;
+}
+
+.c_cont {
+  width: 50%;
+}
+
+.tab_ {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.yb_title {
+  text-align: center;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.tab_bt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-bottom: 4px solid #0174F6;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+}
+
+.tab_buttom {
+  width: 120px;
+  height: 32px;
+
+  border: 1px solid #0174F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+yb_title {
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: center;
+  width: 100%;
+}
+
+.numlist {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.num_box {
+  width: 38px;
+  height: 50px;
+  border-radius: 0px 0px 0px 0px;
+  font-weight: 600;
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url("./imgs/numbcak.png") no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+  margin: 0px 10px;
+}
+
+.yb_ {
+  width: 50%;
+}
+
+.tab_acvit {
+  background: #0174F6 !important;
+}
+
+.five_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 30px auto;
+}
+
+.f_size {
+  font-size: 14px;
+  color: #FFFFFF;
+}
+
+.f_num {
+  font-weight: bold;
+  font-size: 24px;
+  color: #FFFFFF;
+}
+
+.img_left {
+  width: 60px;
+  height: 60px;
+  margin-right: 10px;
+}
+
+.f_box {
+  display: flex;
+  align-items: center;
+}
+
+.co_title {
+  width: 100%;
+  height: 32px;
+  background: url("./imgs/c_title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+}
+
+.s_title {
+  width: 90%;
+  height: 32px;
+  background: url("./imgs/title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+  margin: 0px auto;
+}
+
+.echaets_box {
+  width: 90%;
+  height: 267px;
+  margin: 0px auto;
+  border-bottom: 1px solid #0174F6;
+}
+
+.list_long {
+  width: 100%;
+  height: 563px;
+
+}
+
+.l_one {
+  width: 30%;
+  text-align: left;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-left: 35px;
+}
+
+.l_two {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_three {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_four {
+  width: 30%;
+  text-align: right;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-right: 35px;
+}
+
+.long_title {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  background: url("./imgs/c_list.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.ot_vox {
+  width: 100%;
+  height: 500px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.long_box {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.six_box {
+  margin-bottom: 15px;
+}
+
+.c_right {
+  width: 25%;
+}
+
+</style>

src/views/repair/screen/api/repairBigScreen.js

@@ -0,0 +1,75 @@
+import request from '@/utils/request'
+
+// 客户来源分析饼图
+export function customerSource() {
+  return request({
+    url: '/repair/statistics/customerSource',
+    method: 'get',
+  })
+}
+
+// 月工单数量走势
+export function ticketMainCount() {
+  return request({
+    url: '/repair/statistics/ticketMainCount',
+    method: 'get',
+  })
+}
+
+// 月工单金额走势
+export function ticketMainAmount() {
+  return request({
+    url: '/repair/statistics/ticketMainAmount',
+    method: 'get',
+  })
+}
+
+// 支付渠道统计
+export function ticketMainPayWay() {
+  return request({
+    url: '/repair/statistics/ticketMainPayWay',
+    method: 'get',
+  })
+}
+
+// 维修类型相关统计分析饼图
+export function repairTypeStatistics() {
+  return request({
+    url: '/repair/statistics/repairTypeStatistics',
+    method: 'get',
+  })
+}
+
+// 工单总数、今日工单、工单总金额、今日工单金额
+export function ticketStatistics() {
+  return request({
+    url: '/repair/statistics/ticketStatistics',
+    method: 'get',
+  })
+}
+
+//工单状态数量统计
+export function ticketStatusCount() {
+  return request({
+    url: '/repair/statistics/ticketStatusCount',
+    method: 'get',
+  })
+}
+
+//今日工单
+export function listTicketToday() {
+  return request({
+    url: '/repair/statistics/listTicketToday',
+    method: 'get',
+  })
+}
+
+//维修工人排行
+export function listWorks() {
+  return request({
+    url: '/repair/statistics/listWorks',
+    method: 'get',
+  })
+}
+
+

src/views/repair/screen/repairBigScreen.vue

@@ -1,13 +1,701 @@
 <template>
+  <div class="cont">
+    <div class="top_">
+      <div>车辆维修数据分析</div>
+    </div>
+    <!--    -->
+    <div class="content_">
+      <div class="c_left">
+        <div class="six_box">
+          <div class="s_title">
+            客户来源分析
+          </div>
+          <div class="echaets_box">
+            <div id="khly" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            月工单数量走势
+          </div>
+          <div class="echaets_box">
+            <div id="gdslzs" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            支付渠道统计
+          </div>
+          <div class="echaets_box">
+            <div id="zfqdtj" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="c_cont">
+        <div class="tab_">
+          <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>
+          <div @click="countOrAmount()" class="tab_buttom">金额</div>
+        </div>
+        <div v-if="isCount" class="tab_bt">
+          <div class="yb_">
+            <div class="yb_title">工单总数</div>
+            <div class="numlist">
+              <!--                <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                  {{index}}-->
+              <!--                </div>-->
+              <div class="num_box">
+                {{ statistics.totalCount }}
+              </div>
+            </div>
+          </div>
+          <div class="yb_">
+            <div class="yb_title">今日工单</div>
+            <div class="numlist">
+              <!--              <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                {{index}}-->
+              <!--              </div>-->
+              <div class="num_box">
+                {{ statistics.todayCount }}
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div v-else class="tab_bt">
+          <div class="yb_">
+            <div class="yb_title">工单总金额（元）</div>
+            <div class="numlist">
+              <!--                <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                  {{index}}-->
+              <!--                </div>-->
+              <div class="num_box">
+                {{ statistics.totalAmount }}
+              </div>
+            </div>
+          </div>
+          <div class="yb_">
+            <div class="yb_title">今日工单金额（元）</div>
+            <div class="numlist">
+              <!--              <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                {{index}}-->
+              <!--              </div>-->
+              <div class="num_box">
+                {{ statistics.todayAmount }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="five_box">
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/1.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+              <div class="f_size">{{ statusTickets[3].name }}</div>
+              <div class="f_num">{{ statusTickets[3].value }}</div>
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/2.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+              <div class="f_size">{{ statusTickets[4].name }}</div>
+              <div class="f_num">{{ statusTickets[4].value }}</div>
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/3.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+              <div class="f_size">{{ statusTickets[0].name }}</div>
+              <div class="f_num">{{ statusTickets[0].value }}</div>
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/4.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+              <div class="f_size">{{ statusTickets[1].name }}</div>
+              <div class="f_num">{{ statusTickets[1].value }}</div>
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <img src="./imgs/5.png" style="width: 60px;height: 60px">
+            </div>
+            <div>
+              <div class="f_size">{{ statusTickets[5].name }}</div>
+              <div class="f_num">{{ statusTickets[5].value }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="co_title">
+          今日工单
+        </div>
+        <div class="list_long">
+          <div class="long_title">
+            <div class="l_one">工单号</div>
+            <div class="l_two">服务客户</div>
+            <div class="l_three">服务顾问</div>
+            <div class="l_four">创建时间</div>
+          </div>
+          <div class="ot_vox">
+            <div class="long_box" v-for="(item,index) in todayTickets" :key="index">
+              <div class="l_one">{{ item.ticketNo }}</div>
+              <div class="l_two">{{ item.userName }}</div>
+              <div class="l_three">{{ item.adviserName }}</div>
+              <div class="l_four">{{ parseTime(item.createTime) }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="c_right">
+        <div class="six_box">
+          <div class="s_title">
+            维修类型统计
+          </div>
+          <div class="echaets_box">
+            <div id="wxlxtj" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            月工单金额走势
+          </div>
+          <div class="echaets_box">
+            <div id="gdjezs" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            维修工人排行
+          </div>
+          <div class="echaets_box">
+            <div class="list_long">
+              <div class="long_title">
+                <div class="l_one">姓名</div>
+                <div class="l_two">服务工单数</div>
+              </div>
+              <div class="ot_vox">
+                <div class="long_box" v-for="(item,index) in workers" :key="index">
+                  <div class="l_one">{{ item.name }}</div>
+                  <div class="l_two">{{ item.value }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import * as RepairBigScreenApi from '@/views/repair/screen/api/repairBigScreen';
+
 export default {
-  name: 'repairBigScreen'
+  name: 'Index',
+  components: {},
+  data() {
+    return {
+      //金额数量统计
+      statistics: {},
+      //工单各状态数量
+      statusTickets: [],
+      //金额数量切换
+      isCount: true,
+      //今日工单
+      todayTickets: [],
+      //维修工人排行
+      workers: []
+    }
+  },
+  created() {
+    //工单总数、今日工单、工单总金额、今日工单金额
+    this.ticketStatistics()
+    //工单状态数量统计
+    this.ticketStatusCount()
+    //今日工单
+    this.listTicketToday()
+    //维修工人排行
+    this.listWorks()
+  },
+  mounted() {
+    //客户来源分析饼图
+    this.customerSource();
+    //月工单数量走势
+    this.ticketMainCount()
+    //月工单金额走势
+    this.ticketMainAmount()
+    //支付渠道统计
+    this.ticketMainPayWay()
+    //维修类型相关统计分析饼图
+    this.repairTypeStatistics()
+  },
+  methods: {
+    countOrAmount() {
+      this.isCount = !this.isCount
+    },
+
+    /**
+     * 客户来源分析饼图
+     */
+    async customerSource() {
+      const res = await RepairBigScreenApi.customerSource();
+        var chartDom = document.getElementById('khly');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          toolbox: {
+            show: true,
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          series: [
+            {
+              name: '客户来源分析',
+              type: 'pie',
+              radius: [20, 100],
+              center: ['50%', '50%'],
+              roseType: 'area',
+              itemStyle: {
+                borderRadius: 2
+              },
+              data: res.data,
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+    },
+
+    /**
+     * 月工单数量走势
+     */
+    async ticketMainCount() {
+      const res = await RepairBigScreenApi.ticketMainCount();
+      var chartDom = document.getElementById('gdslzs');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'line',
+            smooth: true
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+
+    /**
+     * 月工单金额走势
+     */
+    async ticketMainAmount() {
+      const res = await RepairBigScreenApi.ticketMainAmount();
+      var chartDom = document.getElementById('gdjezs');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'line',
+            smooth: true
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 支付渠道统计
+     */
+    async ticketMainPayWay() {
+      const res = await RepairBigScreenApi.ticketMainPayWay();
+      var chartDom = document.getElementById('zfqdtj');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'bar'
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 维修类型相关统计分析饼图
+     */
+    async repairTypeStatistics() {
+      const res = await RepairBigScreenApi.repairTypeStatistics();
+      var chartDom = document.getElementById('wxlxtj');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '维修类型统计',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: res.data
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 单总数、今日工单、工单总金额、今日工单金额
+     */
+    async ticketStatistics() {
+      const res = await RepairBigScreenApi.ticketStatistics();
+      this.statistics = res.data
+    },
+
+    /**
+     * 工单状态数量统计
+     */
+    async ticketStatusCount() {
+      const res = await RepairBigScreenApi.ticketStatusCount();
+      this.statusTickets = res.data
+    },
+
+    /**
+     * 今日工单
+     */
+    async listTicketToday() {
+      const res = await RepairBigScreenApi.listTicketToday();
+      this.todayTickets = res.data
+    },
+
+    /**
+     * 维修工人排行
+     */
+    async listWorks() {
+      const res = await RepairBigScreenApi.listWorks();
+      this.workers = res.data
+    }
+
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.cont {
+  background: #020F32;
+  //background: url("./imgs/back.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100vh;
+}
+
+.top_ {
+  width: 100%;
+  height: 86px;
+  background: url("./imgs/top.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 50px;
+  color: #FFFFFF;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.content_ {
+  width: 100%;
+  display: flex;
+  //align-items: center;
+  justify-content: space-between;
+}
+
+.c_left {
+  width: 25%;
+}
+
+.c_cont {
+  width: 50%;
+}
+
+.tab_ {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.yb_title {
+  text-align: center;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.tab_bt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-bottom: 4px solid #0174F6;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+}
+
+.tab_buttom {
+  width: 120px;
+  height: 32px;
+
+  border: 1px solid #0174F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+yb_title {
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: center;
+  width: 100%;
+}
+
+.numlist {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.num_box {
+  width: 38px;
+  height: 50px;
+  border-radius: 0px 0px 0px 0px;
+  font-weight: 600;
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url("./imgs/numbcak.png") no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+  margin: 0px 10px;
+}
+
+.yb_ {
+  width: 50%;
+}
+
+.tab_acvit {
+  background: #0174F6 !important;
+}
+
+.five_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 30px auto;
+}
+
+.f_size {
+  font-size: 14px;
+  color: #FFFFFF;
+}
+
+.f_num {
+  font-weight: bold;
+  font-size: 24px;
+  color: #FFFFFF;
+}
+
+.img_left {
+  width: 60px;
+  height: 60px;
+  margin-right: 10px;
+}
+
+.f_box {
+  display: flex;
+  align-items: center;
+}
+
+.co_title {
+  width: 100%;
+  height: 32px;
+  background: url("./imgs/c_title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+}
+
+.s_title {
+  width: 90%;
+  height: 32px;
+  background: url("./imgs/title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+  margin: 0px auto;
+}
+
+.echaets_box {
+  width: 90%;
+  height: 267px;
+  margin: 0px auto;
+  border-bottom: 1px solid #0174F6;
+}
+
+.list_long {
+  width: 100%;
+  height: 563px;
+
+}
+
+.l_one {
+  width: 30%;
+  text-align: left;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-left: 35px;
+}
+
+.l_two {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_three {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_four {
+  width: 30%;
+  text-align: right;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-right: 35px;
+}
+
+.long_title {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  background: url("./imgs/c_list.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.ot_vox {
+  width: 100%;
+  height: 500px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.long_box {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.six_box {
+  margin-bottom: 15px;
+}
+
+.c_right {
+  width: 25%;
+}
 
 </style>