From c5cb633f82d450ec859ee8a0fb7186cdd0a5be4f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 05 Aug 2021 15:17:32 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_regulatory

---
 src/views/home/index.vue                              |  253 ++++++++++++---------------
 src/views/home/indexEchart.js                         |  107 +++++------
 src/views/securityUnitOperation/operationAnalysis.vue |  147 ++++++++++-----
 3 files changed, 258 insertions(+), 249 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d7a420c..2e9ef9c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -12,35 +12,35 @@
             <img src="../../../public/img/bajgxt/icon1.png" />
             <span>各辖区单位统计情况</span>
           </div>
-          <div id="left1Echart"></div>
+          <div id="left1Echart" v-loading="left1loading"></div>
         </div>
         <div class="left2">
           <div class="title-pane2">
             <img src="../../../public/img/bajgxt/icon1.png" />
             <span>保安员持证情况</span>
           </div>
-          <div id="left2Echart"></div>
+          <div id="left2Echart" v-loading="left2loading"></div>
         </div>
       </div>
-      <div class="middle">
+      <div class="middle" v-loading="middleloading">
         <div class="mapimg">
           <!-- <div></div> -->
           <div class="mapBtn" @click="setMapData(2)">
-            <img src="../../../public/img/bajgxt/car.png" alt="" />
+            <img src="../../../public/img/bajgxt/car.png" alt />
             <div class="text">
               <span>押运车辆</span>
               <span>{{ carNum }}</span>
             </div>
           </div>
           <div class="mapBtn" @click="setMapData(1)">
-            <img src="../../../public/img/bajgxt/peo.png" alt="" />
+            <img src="../../../public/img/bajgxt/peo.png" alt />
             <div class="text">
               <span>保安员</span>
               <span>{{ peoNum }}</span>
             </div>
           </div>
           <div class="mapBtn" @click="setMapData(3)">
-            <img src="../../../public/img/bajgxt/gun.png" alt="" />
+            <img src="../../../public/img/bajgxt/gun.png" alt />
             <div class="text">
               <span>枪支</span>
               <span>{{ gunNum }}</span>
@@ -56,128 +56,71 @@
           <div class="rightbottom"></div>
           <el-table :data="tableData" stripe ref="indexTable">
             <template v-if="curTableType === 2">
-              <el-table-column
-                :key="curTableType"
-                type="index"
-                label="序号"
-                width="50"
-              >
-              </el-table-column>
-              <el-table-column
-                :key="curTableType"
-                prop="carNum"
-                label="押运车辆车牌号"
-                width="180"
-              >
-              </el-table-column>
+              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
+              <el-table-column :key="curTableType" prop="carNum" label="押运车辆车牌号" width="180"></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="location"
                 label="实时位置"
-              >
-              </el-table-column>
+              ></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="company"
                 label="所属公司"
-              >
-              </el-table-column>
-              <el-table-column
-                :key="curTableType"
-                show-overflow-tooltip
-                prop="linkman"
-                label="联系人"
-              >
-              </el-table-column>
-              <el-table-column
-                :key="curTableType"
-                show-overflow-tooltip
-                prop="tel"
-                label="联系电话"
-              >
-              </el-table-column>
+              ></el-table-column>
+              <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="联系人"></el-table-column>
+              <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
             </template>
             <template v-if="curTableType === 1">
-              <el-table-column
-                :key="curTableType"
-                type="index"
-                label="序号"
-                width="50"
-              >
-              </el-table-column>
+              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="name"
                 label="押运人员名称"
                 width="180"
-              >
-              </el-table-column>
+              ></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="location"
                 label="实时位置"
-              >
-              </el-table-column>
+              ></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="company"
                 label="所属公司"
-              >
-              </el-table-column>
-              <el-table-column
-                :key="curTableType"
-                show-overflow-tooltip
-                prop="tel"
-                label="联系电话"
-              >
-              </el-table-column>
+              ></el-table-column>
+              <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
               <!-- <el-table-column :key="curTableType" prop="bz" label="备注">
-              </el-table-column> -->
+              </el-table-column>-->
             </template>
             <template v-if="curTableType === 3">
-              <el-table-column
-                :key="curTableType"
-                type="index"
-                label="序号"
-                width="50"
-              >
-              </el-table-column>
+              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="number"
                 label="枪支编号"
                 width="180"
-              >
-              </el-table-column>
+              ></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="location"
                 label="实时位置"
-              >
-              </el-table-column>
+              ></el-table-column>
               <el-table-column
                 :key="curTableType"
                 show-overflow-tooltip
                 prop="company"
                 label="所属公司"
-              >
-              </el-table-column>
-              <el-table-column
-                :key="curTableType"
-                show-overflow-tooltip
-                prop="linkman"
-                label="负责人"
-              >
-              </el-table-column>
-              <el-table-column :key="curTableType" prop="tel" label="联系电话">
-              </el-table-column>
+              ></el-table-column>
+              <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="负责人"></el-table-column>
+              <el-table-column :key="curTableType" prop="tel" label="联系电话"></el-table-column>
             </template>
           </el-table>
         </div>
@@ -193,11 +136,10 @@
                 :key="item.id"
                 :label="item.title"
                 :value="item.value"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
           </div>
-          <div class="right-content">
+          <div class="right-content" v-loading="right1loading">
             <div class="card-list">
               <img src="../../../public/img/bajgxt/u4.png" />
               <img src="../../../public/img/bajgxt/u256.png" />
@@ -215,7 +157,7 @@
           </div>
           <!-- <div class="card-text"> -->
           <!-- <span>现实表现差</span><span>902,432</span><span>起</span
-            ><span>审查情况</span><span>22222</span><span>起</span> -->
+          ><span>审查情况</span><span>22222</span><span>起</span>-->
           <!-- </div> -->
           <!-- <div id="right1Echart"></div> -->
         </div>
@@ -223,21 +165,16 @@
           <div class="title-pane1">
             <img src="../../../public/img/bajgxt/icon2.png" />
             <span>保安公司预警统计</span>
-            <el-select
-              v-model="value2"
-              placeholder="请选择"
-              @change="peoWarning"
-            >
+            <el-select v-model="value2" placeholder="请选择" @change="peoWarning">
               <el-option
                 v-for="item in options2"
                 :key="item.id"
                 :label="item.title"
                 :value="item.value"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
           </div>
-          <div class="right-content">
+          <div class="right-content" v-loading="right2loading">
             <div class="card-list">
               <img src="../../../public/img/bajgxt/u4.png" />
               <img src="../../../public/img/bajgxt/u235.png" />
@@ -255,7 +192,7 @@
           </div>
           <!-- <div class="card-text"> -->
           <!-- <span>未缴纳社保情况</span><span>902,432</span><span>起</span
-            ><span>未持证情况</span><span>22222</span><span>起</span> -->
+          ><span>未持证情况</span><span>22222</span><span>起</span>-->
           <!-- </div> -->
           <!-- <div id="right2Echart"></div> -->
         </div>
@@ -264,7 +201,7 @@
             <img src="../../../public/img/bajgxt/icon3.png" />
             <span>分局预警占比情况</span>
           </div>
-          <div id="right3Echart"></div>
+          <div id="right3Echart" v-loading="right3loading"></div>
         </div>
       </div>
     </div>
@@ -298,7 +235,7 @@
   noSocialSecurity,
   selectFj,
   selectBx,
-  selectExtype,
+  selectExtype
 } from "../../api/index/index";
 
 import car from "@/assets/img/car.png";
@@ -323,39 +260,57 @@
         poorPerformance: 0,
         qualification: 0,
         socialSecurity: 0,
-        noholder: 0,
+        noholder: 0
       },
       carNum: 0,
       peoNum: 0,
       gunNum: 0,
       mapData: null,
+      echarts: {
+        left1Echart: null,
+        left2Echart: null,
+        mapEchart: null,
+        right3Echart: null
+      },
+      left1loading: true,
+      left2loading: true,
+      middleloading: true,
+      right1loading: true,
+      right2loading: true,
+      right3loading: true
     };
   },
   methods: {
     // 左侧两个表的接口返回数据
     initEchart() {
-      securityTotal().then((res) => {
+      securityTotal().then(res => {
         if (res.data.code == 200) {
           let securityData = res.data.data;
-          let left1Echart = echarts.init(
-            document.getElementById("left1Echart")
-          );
-          left1Echart.setOption(optionJs.left1Data(securityData));
+          if (!this.echarts.left1Echart) {
+            this.echarts.left1Echart = echarts.init(
+              document.getElementById("left1Echart")
+            );
+          }
+          this.echarts.left1Echart.setOption(optionJs.left1Data(securityData));
         } else {
           this.$message.error(res.msg);
         }
+        this.left1loading = false;
       });
 
-      holderNum().then((res) => {
+      holderNum().then(res => {
         if (res.data.code === 200) {
           let data = res.data.data;
-          let left2Echart = echarts.init(
-            document.getElementById("left2Echart")
-          );
-          left2Echart.setOption(optionJs.left2Data(data));
+          if (!this.echarts.left2Echart) {
+            this.echarts.left2Echart = echarts.init(
+              document.getElementById("left2Echart")
+            );
+          }
+          this.echarts.left2Echart.setOption(optionJs.left2Data(data));
         } else {
           this.$message.error(res.msg);
         }
+        this.left2loading = false;
       });
       // securityPer().then(res => {
       //   if (res.data.code === 200) {
@@ -367,25 +322,32 @@
 
       //   let right2Echart = echarts.init(document.getElementById("right2Echart"));
       //   right2Echart.setOption(optionJs.right2Data(data));
-      selectFj().then((res) => {
+      selectFj().then(res => {
         if (res.data.code === 200) {
-          let right3Echart = echarts.init(
-            document.getElementById("right3Echart")
-          );
-          right3Echart.setOption(optionJs.right3Data(res.data.data));
+          if (!this.echarts.right3Echart) {
+            this.echarts.right3Echart = echarts.init(
+              document.getElementById("right3Echart")
+            );
+          }
+          this.echarts.right3Echart.setOption(optionJs.right3Data(res.data.data));
         } else {
           this.$message.error(res.msg);
         }
+        this.right3loading = false;
       });
     },
     initMapEchart(data, type) {
-      let mapEchart = echarts.init(document.getElementById("map"));
-      mapEchart.setOption(optionJs.middleData(data, type));
+      if (!this.echarts.mapEchart) {
+        this.echarts.mapEchart = echarts.init(document.getElementById("map"));
+      }
+      this.echarts.mapEchart.setOption(optionJs.middleData(data, type));
     },
     setMapData(type) {
+      this.middleloading = true;
+      this.curTableType = type;
       this.tableData = this.mapData[type]["table"];
       this.initMapEchart(this.mapData[type], type);
-      this.curTableType = type;
+      this.middleloading = false;
       // let curLayer = null;
       // let imgUrl = null;
       // this.carVectorLayer.getSource().clear();
@@ -433,21 +395,21 @@
       let middleData = {
         1: {
           table: [],
-          geoData: [],
+          geoData: []
         },
         2: {
           table: [],
-          geoData: [],
+          geoData: []
         },
         3: {
           table: [],
-          geoData: [],
-        },
+          geoData: []
+        }
       };
-      getLiveLocationVoList({ type: type }).then((res) => {
+      getLiveLocationVoList({ type: type }).then(res => {
         if (res.data.code === 200) {
           let allData = res.data.data;
-          allData.forEach((m) => {
+          allData.forEach(m => {
             let obj = {
               location: m.location,
               name: m.name,
@@ -455,7 +417,7 @@
               linkman: m.linkman,
               company: m.company,
               tel: m.tel,
-              carNum: m.carNum,
+              carNum: m.carNum
             };
 
             // let geoObj = {
@@ -464,7 +426,7 @@
             // };
             middleData[m.type]["geoData"].push([
               Number(m.longitude),
-              Number(m.latitude),
+              Number(m.latitude)
             ]);
             middleData[m.type]["table"].push(obj);
           });
@@ -490,36 +452,38 @@
             zIndex: 4,
             title: "影像",
             source: new XYZ({
-              url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
-            }),
+              url:
+                "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
+            })
           }),
           new Tile({
             zIndex: 5,
             title: "道路+中文注记",
             source: new XYZ({
-              url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
-            }),
-          }),
+              url:
+                "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
+            })
+          })
         ],
         view: new View({
           projection: "EPSG:4326",
           center: [115.892151, 28.676493],
-          zoom: 10,
-        }),
+          zoom: 10
+        })
       });
       this.carVectorLayer = new VectorLayer({
         zIndex: 99,
-        source: new VectorSource(),
+        source: new VectorSource()
       });
 
       this.peoVectorLayer = new VectorLayer({
         zIndex: 99,
-        source: new VectorSource(),
+        source: new VectorSource()
       });
 
       this.gunVectorLayer = new VectorLayer({
         zIndex: 99,
-        source: new VectorSource(),
+        source: new VectorSource()
       });
       this.map.addLayer(this.carVectorLayer);
       this.map.addLayer(this.peoVectorLayer);
@@ -529,7 +493,7 @@
     },
     // 获取辖区列表
     getOfficeData() {
-      lazyTreeJu().then((res) => {
+      lazyTreeJu().then(res => {
         if (res.data.code === 200) {
           this.options1 = res.data.data;
           this.options2 = res.data.data;
@@ -547,50 +511,56 @@
     },
     // 未持证
     getNoholderNum() {
-      noholderNum({ jurisdiction: this.value2 }).then((res) => {
+      noholderNum({ jurisdiction: this.value2 }).then(res => {
         if (res.data.code === 200) {
           this.rightData.noholder = res.data.data[0].Count;
         } else {
           this.$message.error(res.msg);
         }
+        this.right2loading = false;
       });
     },
     // 未缴纳社保
     getNoSocialSecurity() {
-      noSocialSecurity({ jurisdiction: this.value2 }).then((res) => {
+      noSocialSecurity({ jurisdiction: this.value2 }).then(res => {
         if (res.data.code === 200) {
           this.rightData.socialSecurity = res.data.data[0].Count;
         } else {
           this.$message.error(res.msg);
         }
+        this.right2loading = false;
       });
     },
     // 现实表现差
     getPoorPerformance() {
-      selectBx({ jurisdiction: this.value1 }).then((res) => {
+      selectBx({ jurisdiction: this.value1 }).then(res => {
         if (res.data.code === 200) {
           this.rightData.poorPerformance = res.data.data[0].count;
         } else {
           this.$message.error(res.msg);
         }
+        this.right1loading = false;
       });
     },
     // 资格审查异常
     getQualification() {
-      selectExtype({ jurisdiction: this.value1 }).then((res) => {
+      selectExtype({ jurisdiction: this.value1 }).then(res => {
         if (res.data.code === 200) {
           this.rightData.qualification = res.data.data[0].count;
         } else {
           this.$message.error(res.msg);
         }
+        this.right1loading = false;
       });
     },
     peoWarning() {
+      this.right2loading = true;
       this.getNoholderNum();
       this.getNoSocialSecurity();
     },
 
     companyWarning() {
+      this.right1loading = true;
       this.getPoorPerformance();
       this.getQualification();
     },
@@ -598,7 +568,7 @@
     goSystemHome() {
       // this.$router.push({ path: "/register/index" });
       this.$router.push({ path: "/securityGuardManagement/register" });
-    },
+    }
   },
   mounted() {
     this.initEchart();
@@ -607,7 +577,7 @@
     this.getTableData(0);
     // this.initMapEchart();
     this.getOfficeData();
-  },
+  }
 };
 </script>
 
@@ -621,4 +591,7 @@
 /deep/ .el-select-dropdown__item:hover {
   background-color: #03203e;
 }
+/deep/ .el-loading-mask {
+  background-color: transparent !important;
+}
 </style>
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 3d08623..c7b151f 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -421,9 +421,12 @@
       res.series.push({
         name: "分局预警占比",
         type: "pie",
-        clockWise: true,
+        clockwise: true,
         z: 2,
-        hoverAnimation: false,
+        emphasis: {
+          scale: false
+        },
+        // hoverAnimation: false,
         radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
         center: ["30%", "50%"],
         labelLine: {
@@ -450,7 +453,10 @@
             label: {
               show: false
             },
-            hoverAnimation: false
+            emphasis: {
+              scale: false
+            }
+            // hoverAnimation: false
           }
         ]
       });
@@ -520,10 +526,11 @@
         axisLabel: {
           interval: 0,
           inside: false,
-          textStyle: {
-            color: "#fff",
-            fontSize: 8
-          },
+          color: "#fff",
+          fontSize: 8,
+          // textStyle: {
+
+          // },
           show: true
         },
         data: optionData.yAxis
@@ -619,12 +626,8 @@
       zoom: 1.14,
       top: '10%',
       label: {
-        normal: {
-          show: false,
-          textStyle: {
-            color: '#fff'
-          }
-        },
+        show: false,
+        color: '#fff',
         emphasis: {
           textStyle: {
             color: '#fff'
@@ -634,16 +637,17 @@
 
       roam: true,
       itemStyle: {
-        normal: {
-          areaColor: 'rgba(0,255,255,.02)',
-          borderColor: '#00ffff',
-          borderWidth: 1.5,
-          shadowColor: '#00ffff',
-          shadowOffsetX: 0,
-          shadowOffsetY: 4,
-          shadowBlur: 10,
-        },
-        emphasis: {
+        areaColor: 'rgba(0,255,255,.02)',
+        borderColor: '#00ffff',
+        borderWidth: 1.5,
+        shadowColor: '#00ffff',
+        shadowOffsetX: 0,
+        shadowOffsetY: 4,
+        shadowBlur: 10,
+
+      },
+      emphasis: {
+        itemStyle: {
           color: 'transparent', //悬浮背景
           textStyle: {
             color: '#fff'
@@ -660,31 +664,28 @@
         // aspectScale: 0.75, //长宽比
         zoom: 1.14,
         label: {
-          normal: {
-            show: false,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          emphasis: {
-            textStyle: {
-              color: '#fff'
-            }
+          show: false,
+          color: '#fff'
+        },
+        emphasis: {
+          label: {
+            color: '#fff'
           }
         },
         top: '10%',
         roam: true,
         itemStyle: {
-          normal: {
-            areaColor: 'rgba(0,255,255,.02)',
-            borderColor: '#00ffff',
-            borderWidth: 1.5,
-            shadowColor: '#00ffff',
-            shadowOffsetX: 0,
-            shadowOffsetY: 4,
-            shadowBlur: 10,
-          },
-          emphasis: {
+          areaColor: 'rgba(0,255,255,.02)',
+          borderColor: '#00ffff',
+          borderWidth: 1.5,
+          shadowColor: '#00ffff',
+          shadowOffsetX: 0,
+          shadowOffsetY: 4,
+          shadowBlur: 10,
+
+        },
+        emphasis: {
+          itemStyle: {
             areaColor: 'transparent', //悬浮背景
             textStyle: {
               color: '#fff'
@@ -700,21 +701,12 @@
         symbol: 'image://' + symbolUrl,
         symbolSize: [30, 30],
         label: {
-          normal: {
-            show: false,
-            textStyle: {
-              color: '#fff',
-              fontSize: 9,
-            },
-            // formatter(value) {
-            //   return value.data.value[0]
-            // }
-          }
+          show: false,
+          color: '#fff',
+          fontSize: 9,
         },
         itemStyle: {
-          normal: {
-            color: '#FF0000', //标志颜色
-          }
+          color: '#FF0000', //标志颜色
         },
         data: geoData,
         showEffectOn: 'render',
@@ -722,6 +714,9 @@
           brushType: 'stroke'
         },
         hoverAnimation: true,
+        emphasis: {
+          scale: true
+        },
         zlevel: 1
       }
     ]
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index 927641f..4aa5080 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -13,36 +13,23 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
-            <el-select
-              class="select1"
-              v-model="value1"
-              placeholder="请选择"
-              @change="fenjuChange"
-            >
+            <el-select class="select1" v-model="value1" placeholder="请选择" @change="fenjuChange">
               <el-option
                 v-for="item in options1"
                 :key="item.id"
                 :label="item.title"
                 :value="item.id"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
-            <el-select
-              class="select2"
-              v-model="value2"
-              placeholder="请选择"
-              @change="changeCompanys"
-            >
+            <el-select class="select2" v-model="value2" placeholder="请选择" @change="changeCompanys">
               <el-option
                 v-for="item in options2"
                 :key="item.departmentid"
                 :label="item.enterpriseName"
                 :value="item.departmentid"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
             <el-button @click="toOperationTable">进入数据统计表</el-button>
           </div>
@@ -50,38 +37,38 @@
           <div class="col-content">
             <div class="box-card">
               <span>总保安数</span>
-              <span>23708</span>
-              <span>较上月增加123人</span>
+              <span>{{card.baoanTotal}}</span>
+              <span>较上月增加{{card.addbaoanTotal}}人</span>
             </div>
             <div class="box-card">
               <span>正常保安员</span>
-              <span>22176</span>
-              <span>较上月增加13人</span>
+              <span>{{card.zcBaoan}}</span>
+              <span>较上月增加{{card.addzcBaoan}}人</span>
             </div>
             <div class="box-card">
               <span>持证保安员</span>
-              <span>21003</span>
-              <span>较上月增加31人</span>
+              <span>{{card.czBaoan}}</span>
+              <span>较上月增加{{card.addczBaoan}}人</span>
             </div>
             <div class="box-card">
               <span>过考保安员</span>
-              <span>21003</span>
-              <span>较上月增加31人</span>
+              <span>{{card.gkBaoan}}</span>
+              <span>较上月增加{{card.addgkBaoan}}人</span>
             </div>
             <div class="box-card">
               <span>服务客户</span>
-              <span>56</span>
-              <span>较上月增加34家</span>
+              <span>{{card.kh}}</span>
+              <span>较上月增加{{card.addkh}}家</span>
             </div>
             <div class="box-card">
               <span>缴纳社保</span>
-              <span>23708</span>
-              <span>较上月增加3人</span>
+              <span>{{card.sheb}}</span>
+              <span>较上月增加{{card.addsheb}}人</span>
             </div>
             <div class="box-card">
               <span>保安派遣</span>
-              <span>12720</span>
-              <span>较上月增加31人</span>
+              <span>{{card.baoanPq}}</span>
+              <span>较上月增加{{card.addbaoanPq}}人</span>
             </div>
           </div>
         </div>
@@ -120,7 +107,7 @@
   queryCounts,
   getCompanys,
   queryYearKh,
-  queryYearG,
+  queryYearG
 } from "../../api/securityUnitOperation/securityUnitOperation";
 export default {
   data() {
@@ -128,34 +115,50 @@
       value1: "",
       value2: "",
       value0: "2012",
+      card: {
+        baoanTotal: 0,
+        addbaoanTotal: 0,
+        zcBaoan: 0,
+        addzcBaoan: 0,
+        czBaoan: 0,
+        addczBaoan: 0,
+        gkBaoan: 0,
+        addgkBaoan: 0,
+        kh: 0,
+        addkh: 0,
+        sheb: 0,
+        addsheb: 0,
+        baoanPq: 0,
+        addbaoanPq: 0
+      },
       options0: [
         {
           value: "2012",
-          label: "2012年",
+          label: "2012年"
         },
         {
           value: "2011",
-          label: "2011年",
+          label: "2011年"
         },
         {
           value: "2010",
-          label: "2010年",
+          label: "2010年"
         },
         {
           value: "2009",
-          label: "2009年",
+          label: "2009年"
         },
         {
           value: "2008",
-          label: "2008年",
+          label: "2008年"
         },
         {
           value: "2007",
-          label: "2007年",
-        },
+          label: "2007年"
+        }
       ],
       options1: [],
-      options2: [],
+      options2: []
     };
   },
   methods: {
@@ -168,7 +171,9 @@
       this.$router.push({ path: "/securityUnitOperation/operationTable" });
     },
     getFenju() {
-      lazyTreeJu().then((res) => {
+      this.options1 = [];
+      this.value1 = "";
+      lazyTreeJu().then(res => {
         if (res.data.code === 200) {
           this.options1 = res.data.data;
           this.value1 = this.options1[0] ? this.options1[0].id : "";
@@ -182,7 +187,7 @@
       this.getCompanys();
     },
     getCompanys() {
-      getCompanys({ jurisdiction: this.value1 }).then((res) => {
+      getCompanys({ jurisdiction: this.value1 }).then(res => {
         if (res.data.code === 200) {
           this.options2 = res.data.data;
           this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
@@ -193,20 +198,36 @@
     getQueryCounts() {
       let params = {
         jurisdiction: this.value1,
-        deptid: this.value2,
+        deptid: this.value2
       };
-      queryCounts(params).then((res) => {
+      queryCounts(params).then(res => {
         if (res.data.code === 200) {
-          debugger;
+          let data = res.data.data[0];
+          this.card = {
+            baoanTotal: data.baoan.thisnum,
+            addbaoanTotal: data.baoan.thisnum - data.baoan.lastnum,
+            zcBaoan: data.zcbaoan.thisnum,
+            addzcBaoan: data.zcbaoan.thisnum - data.zcbaoan.lastnum,
+            czBaoan: data.czbaoan.thisnum,
+            addczBaoan: data.czbaoan.thisnum - data.czbaoan.lastnum,
+            gkBaoan: 0,
+            addgkBaoan: 0,
+            kh: data.kh.thisnum,
+            addkh: data.kh.thisnum - data.kh.lastnum,
+            sheb: data.sheb.thisnum,
+            addsheb: data.sheb.thisnum - data.sheb.lastnum,
+            baoanPq: data.paiq.thisnum,
+            addbaoanPq: data.paiq.thisnum - data.paiq.lastnum
+          };
         }
       });
     },
     getQueryYearKh() {
       let params = {
         jurisdiction: this.value1,
-        deptid: this.value2,
+        deptid: this.value2
       };
-      queryYearKh(params).then((res) => {
+      queryYearKh(params).then(res => {
         if (res.data.code === 200) {
           let middleEchart2 = echarts.init(
             document.getElementById("middleEchart2")
@@ -218,9 +239,9 @@
     getQueryYearG() {
       let params = {
         jurisdiction: this.value1,
-        deptid: this.value2,
+        deptid: this.value2
       };
-      queryYearG().then((res) => {
+      queryYearG().then(res => {
         if (res.data.code === 200) {
           let middleEchart1 = echarts.init(
             document.getElementById("middleEchart1")
@@ -229,16 +250,36 @@
         }
       });
     },
+    // 清空之前的查询结果
+    clear() {
+      this.card = {
+        baoanTotal: 0,
+        addbaoanTotal: 0,
+        zcBaoan: 0,
+        addzcBaoan: 0,
+        czBaoan: 0,
+        addczBaoan: 0,
+        gkBaoan: 0,
+        addgkBaoan: 0,
+        kh: 0,
+        addkh: 0,
+        sheb: 0,
+        addsheb: 0,
+        baoanPq: 0,
+        addbaoanPq: 0
+      };
+    },
     changeCompanys() {
-      // this.getQueryCounts();
+      this.clear();
+      this.getQueryCounts();
       this.getQueryYearKh();
       this.getQueryYearG();
-    },
+    }
   },
   mounted() {
     this.setEchart();
     this.getFenju();
-  },
+  }
 };
 </script>
 <style lang="scss" scoped>

--
Gitblit v1.9.3