更新

src/views/dataJq/dataV.vue

@@ -15,7 +15,7 @@
           <div style="margin-top: 20px">
             <dogAte></dogAte>
           </div>
-          <!-- 一级工作犬犬种排行 -->
+          <!-- 技术人员序列统计 -->
           <div style="margin-top: 20px">
             <dogPh></dogPh>
           </div>
@@ -51,7 +51,7 @@ import headerCon from "./header.vue";
 import dogCount from "./dogCount.vue";
 // 工作犬年龄
 import dogAte from "./dogAte.vue";
-// 一级工作犬犬种排行
+// 技术人员序列统计
 import dogPh from "./dogPh.vue";
 // 全国总数排行
 import qgPhTop from "./qgPhTop.vue";
@@ -60,8 +60,8 @@ import dogMajor from "./dogMajor.vue";
 // 中间内容
 import mapCount from "./mapCount.vue";
 // 地图
-import mapBox from './mapBox.vue'
-import { postRequest } from '@/api/dogView.js'
+import mapBox from "./mapBox.vue";
+import { postRequest } from "@/api/dogView.js";
 export default {
   components: {
     headerCon,
@@ -71,12 +71,12 @@ export default {
     qgPhTop,
     dogMajor,
     mapCount,
-    mapBox
+    mapBox,
   },
   data() {
     return {
       // 犬种数量统计
-      qzCount: {}
+      qzCount: {},
     };
   },
   mounted() {
@@ -85,54 +85,54 @@ export default {
     window.addEventListener("resize", function () {
       zoom("jqBox");
     });
-    this.getQzCount()
+    this.getQzCount();
   },
   methods: {
     // 犬种数量统计
     getQzCount() {
-      postRequest('/policeDogScreen/qzCount').then(res => {
-        console.log(res)
+      postRequest("/policeDogScreen/qzCount").then((res) => {
+        // console.log(res);
         if (res.code == 200) {
-          console.log(res.data)
-          this.qzCount = res.data
-          this.qzCount.workDog = []
-          this.qzCount.Grade = []
+          // console.log(res.data);
+          this.qzCount = res.data;
+          this.qzCount.workDog = [];
+          this.qzCount.Grade = [];
           for (let item in res.data.workDogClass) {
             this.qzCount.workDog.push({
               name: item,
-              count: res.data.workDogClass[item]
-            })
+              count: res.data.workDogClass[item],
+            });
 
             // 等级
-            if (item == '一级工作犬') {
+            if (item == "一级工作犬") {
               this.qzCount.Grade[0] = {
                 name: item,
-                value: res.data.workDogClass[item]
-              }
+                value: res.data.workDogClass[item],
+              };
             }
-            if (item == '二工作犬') {
+            if (item == "二工作犬") {
               this.qzCount.Grade[1] = {
-                name: '二级工作犬',
-                value: res.data.workDogClass[item]
-              }
+                name: "二级工作犬",
+                value: res.data.workDogClass[item],
+              };
             }
-            if (item == '三级工作犬') {
+            if (item == "三级工作犬") {
               this.qzCount.Grade[2] = {
                 name: item,
-                value: res.data.workDogClass[item]
-              }
+                value: res.data.workDogClass[item],
+              };
             }
-            if (item == '其他工作犬') {
+            if (item == "其他工作犬") {
               this.qzCount.Grade[3] = {
                 name: item,
-                value: res.data.workDogClass[item]
-              }
+                value: res.data.workDogClass[item],
+              };
             }
           }
         }
-      })
-    }
-  }
+      });
+    },
+  },
 };
 </script>
 

src/views/dataJq/dogCount.vue

 <template>
   <div class="dog">
     <div class="dog_title">
-      <span>犬种数量统计</span>
+      <span>警用警犬数量统计</span>
     </div>
     <div class="dog_co">
       <div class="dog_co_left">
-        <div style="width: 200px; height: 200px" id="dogCount"></div>
+        <div
+          style="width: 200px; height: 200px"
+          id="dogCount"
+        ></div>
       </div>
       <div class="dog_co_right">
         <div class="dog_co_right_one">
           <div><span class="dog_co_right_one_left"></span>工作犬</div>
           <div>{{qzCount.workingDog}}<span class="dog_co_right_one_nao">头</span></div>
         </div>
-        <div class="dog_co_right_one" style="margin-top: 20px">
+        <div
+          class="dog_co_right_one"
+          style="margin-top: 20px"
+        >
           <div>
             <span
               class="dog_co_right_one_left"
               style="background: #fa654f"
-            ></span
-            >退役犬
+            ></span>退役犬
           </div>
           <div>0<span class="dog_co_right_one_nao">头</span></div>
         </div>
-        <div class="dog_co_right_one" style="margin-top: 20px">
+        <div
+          class="dog_co_right_one"
+          style="margin-top: 20px"
+        >
           <div>
             <span
               class="dog_co_right_one_left"
               style="background: #ffc64e"
-            ></span
-            >种犬
+            ></span>种犬
           </div>
           <div>0<span class="dog_co_right_one_nao">头</span></div>
         </div>
@@ -42,8 +49,8 @@ export default {
   props: {
     qzCount: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data() {
     return {};
@@ -146,7 +153,7 @@ export default {
             //   },
             // },
             itemStyle: {
-              borderRadius: '50%',
+              borderRadius: "50%",
               // normal: {
               //   //饼状图上的文本显示
               //   label: {

src/views/dataJq/dogMajor.vue

@@ -4,26 +4,29 @@
       <span>工作犬专业方向top5统计</span>
     </div>
     <div class="dogMajor_co">
-      <div style="width: 420px; height: 320px" id="dogMajors"></div>
+      <div
+        style="width: 420px; height: 320px"
+        id="dogMajors"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
-import echarts from 'echarts'
+import echarts from "echarts";
 export default {
   props: {
     qzCount: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data() {
     return {};
   },
   methods: {
     xyrzyRender(_name, _value) {
-      console.log('_name, _value',_name)
+      // console.log('_name, _value',_name)
       //案件性质发案分析
       // debugger;
       // 基于准备好的dom，初始化echarts实例
@@ -42,7 +45,7 @@ export default {
             show: true,
             interval: 0,
             // rotate: '-60px',
-            margin: 6
+            margin: 6,
           },
           axisLine: {
             lineStyle: {
@@ -77,22 +80,27 @@ export default {
               normal: {
                 //柱体的颜色
                 //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: '#4EBBFF',
-                      },
-                      {
-                        offset: 0.5,
-                        color: '#3a749b',
-                      },
-                      {
-                        offset: 1,
-                        color: '#0c2b47',
-                      },
-                    ],
-                    false
-                  ),
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#4EBBFF",
+                    },
+                    {
+                      offset: 0.5,
+                      color: "#3a749b",
+                    },
+                    {
+                      offset: 1,
+                      color: "#0c2b47",
+                    },
+                  ],
+                  false
+                ),
                 label: {
                   formatter: "{c}",
                   show: true,
@@ -100,8 +108,8 @@ export default {
                   textStyle: {
                     fontWeight: "bolder",
                     fontSize: "12",
-                    color: "#fff"
-                  }
+                    color: "#fff",
+                  },
                 },
               },
             },
@@ -120,13 +128,13 @@ export default {
   mounted() {
     setTimeout(() => {
       let _name = [],
-      _value = []
+        _value = [];
       for (let item in this.qzCount.major) {
-        _name.push(item)
-        _value.push(this.qzCount.major[item])
+        _name.push(item);
+        _value.push(this.qzCount.major[item]);
       }
       this.xyrzyRender(_name, _value);
-    },1000)
+    }, 1000);
   },
 };
 </script>

src/views/dataJq/dogPh.vue

 <template>
   <div class="dogPh">
     <div class="dogPh_title">
-      <span>一级工作犬犬种排行</span>
+      <span>技术人员序列统计</span>
     </div>
     <div class="dogPh_co">
       <div class="dogPh_co_ov">
@@ -12,8 +12,7 @@
         >
           <div class="dogPh_co_ov_for_name">{{ item.name }}</div>
           <div class="dogPh_co_ov_for_value">
-            <span class="dogPh_co_ov_for_value_count">{{ item.count }}</span
-            ><span class="dogPh_co_ov_for_value_tou">头</span>
+            <span class="dogPh_co_ov_for_value_count">{{ item.count }}</span><span class="dogPh_co_ov_for_value_tou">头</span>
           </div>
         </div>
       </div>
@@ -22,7 +21,7 @@
 </template>
 
 <script>
-import { postRequest } from '@/api/dogView.js'
+import { postRequest } from "@/api/dogView.js";
 export default {
   data() {
     return {
@@ -31,17 +30,17 @@ export default {
   },
   methods: {},
   mounted() {
-    postRequest('/policeDogScreen/oneworkDogqz').then(res => {
+    postRequest("/policeDogScreen/oneworkDogqz").then((res) => {
       if (res.data) {
         for (let item in res.data.一级工作犬犬种排行) {
           this.dogRankingList.push({
             name: item,
-            count: res.data.一级工作犬犬种排行[item]
-          })
+            count: res.data.一级工作犬犬种排行[item],
+          });
         }
-        console.log(this.dogRankingList,'this.dogRankingList')
+        // console.log(this.dogRankingList, "this.dogRankingList");
       }
-    })
+    });
   },
 };
 </script>

src/views/dataJq/header.vue

 <template>
   <div class="hearder">
-    <img class="hearder_one" src="./img/title.png" alt="" />
+    <img
+      class="hearder_one"
+      src="./img/title.png"
+      alt=""
+    />
     <div class="hearder_two">
       <div class="hearder_two_input">
-        <el-input v-model="input" placeholder="综合检索、输入查询条件"></el-input>
+        <el-input
+          v-model="input"
+          placeholder="综合检索、输入查询条件"
+        ></el-input>
       </div>
       <div class="hearder_two_button">检索</div>
     </div>
     <div class="hearder_three">
-      <span class="hearder_three_left" @click="getSy">系统首页</span>
+      <span
+        class="hearder_three_left"
+        @click="getSy"
+      >系统首页</span>
       <span class="hearder_three_right">
-        <img src="../../assets/img/tb1.png" alt="">
+        <img
+          src="../../assets/img/tb1.png"
+          alt=""
+        >
       </span>
     </div>
   </div>

src/views/dataJq/mapCount.vue

@@ -66,8 +66,7 @@
                   ? '#31FFA2'
                   : '#31AEFF',
             }"
-            >{{ item.value }}</span
-          ><span class="mapCount_bottom_div_right_tou">头</span>
+          >{{ item.value }}</span><span class="mapCount_bottom_div_right_tou">头</span>
         </div>
       </div>
     </div>
@@ -79,16 +78,16 @@ export default {
   props: {
     qzCount: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data() {
     return {
-      dogList: []
+      dogList: [],
     };
   },
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
 

src/views/dataJq/qgPhTop.vue

@@ -26,13 +26,15 @@
                   : '#31AEFF',
             }"
             class="yuan"
-          ></span
-          ><span>{{ item.label }}</span>
+          ></span><span>{{ item.label }}</span>
         </el-option>
       </el-select>
     </div>
     <div class="qgPhTop_title">
-      <span>全国总数排行<img src="./img/top10.png" alt="" /></span>
+      <span>全国总数排行<img
+          src="./img/top10.png"
+          alt=""
+        /></span>
     </div>
     <div class="qgPhTop_co">
       <div class="qgPhTop_co_on">
@@ -45,13 +47,11 @@
             <span v-if="index <= 8">0</span>{{ index + 1 }}
           </div>
           <div class="qgPhTop_co_on_for_name">{{ item.name }}</div>
-          <div
-            :class="
+          <div :class="
               index == 0 || index == 1 || index == 2
                 ? 'qgPhTop_co_on_for_xians'
                 : 'qgPhTop_co_on_for_xian'
-            "
-          >
+            ">
             <el-slider
               :max="10000"
               v-model="value3"
@@ -66,8 +66,7 @@
             }"
             class="qgPhTop_co_on_for_count"
           >
-            <span>{{ item.count }}</span
-            ><span class="qgPhTop_co_on_for_count_tou">头</span>
+            <span>{{ item.count }}</span><span class="qgPhTop_co_on_for_count_tou">头</span>
           </div>
         </div>
       </div>
@@ -78,7 +77,7 @@
 <script>
 // import axios from 'axios';
 // export let baseUrl = '/api'
-import { jsonRequest } from '@/api/dogView.js'
+import { jsonRequest } from "@/api/dogView.js";
 export default {
   data() {
     return {
@@ -148,25 +147,25 @@ export default {
   },
   methods: {
     rankTen(e) {
-      jsonRequest('/homePage/getQgDogtop10',{
-        trainingLevelId: e
-      }).then(res => {
+      jsonRequest("/homePage/getQgDogtop10", {
+        trainingLevelId: e,
+      }).then((res) => {
         if (res.code == 200) {
-          this.qgLsit = res.data.rows.map(item => {
+          this.qgLsit = res.data.rows.map((item) => {
             return {
               name: item.dwName,
-              count: item.dognum
-            }
-          })
+              count: item.dognum,
+            };
+          });
         }
-      })
+      });
     },
     onSelect(e) {
-      this.rankTen(e)
-    }
+      this.rankTen(e);
+    },
   },
   mounted() {
-    this.rankTen()
+    this.rankTen();
   },
 };
 </script>
@@ -426,18 +425,18 @@ export default {
 // }
 </style>
 <style lang="scss">
-.qgPhTop_co_on_for_name{
+.qgPhTop_co_on_for_name {
   white-space: nowrap;
 }
-.qgPhTopSelect{
-  border: 1px solid #456296!important;
-  background: none!important;
+.qgPhTopSelect {
+  border: 1px solid #456296 !important;
+  background: none !important;
 }
-.qgPhTopSelect .popper__arrow{
-  border-bottom-color: transparent!important
+.qgPhTopSelect .popper__arrow {
+  border-bottom-color: transparent !important;
 }
 .qgPhTopSelect .popper__arrow::after {
-  content: '';
+  content: "";
   border-width: 0px !important;
 }
 .qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view {
@@ -448,14 +447,22 @@ export default {
   color: #dbdbdb !important;
   line-height: 19px;
   border-radius: 4px;
-  border: 0!important;
+  border: 0 !important;
   top: 107px !important;
 }
-.qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item.hover{
-  color: #8B9FC2;
-  background: #31589C;
+.qgPhTopSelect
+  .el-scrollbar
+  .el-select-dropdown__wrap
+  .el-scrollbar__view
+  .el-select-dropdown__item.hover {
+  color: #8b9fc2;
+  background: #31589c;
 }
-.qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item{
-  color: #8B9FC2
+.qgPhTopSelect
+  .el-scrollbar
+  .el-select-dropdown__wrap
+  .el-scrollbar__view
+  .el-select-dropdown__item {
+  color: #8b9fc2;
 }
 </style>
\ No newline at end of file