报警记录清空，人员配比调接口

danger-manage-web/.env.development

@@ -9,3 +9,4 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 #安全平台后台地址
 VUE_APP_TARGET = 'http://36.138.181.113:8091/dangerManage'
+

danger-manage-web/src/api/indexChars/chars.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2022-10-07 09:05:29
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2022-10-07 10:16:10
+ * @FilePath: /danger-manage-web/src/api/indexChars/chars.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import request from "@/utils/request";
+
+// 人员配比图标
+
+export function getRypbData(query) {
+  return request({
+    url: "system/dept/classification",
+    method: "get",
+    params: query,
+  });
+}

danger-manage-web/src/views/indexComponents/Right.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-09-06 10:42:53
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-09-13 10:00:52
+ * @LastEditTime: 2022-10-06 16:41:33
  * @FilePath: /danger-manage-web/src/views/indexComponents/Left.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->

danger-manage-web/src/views/indexComponents/leftComponents/DeviceNum.vue

@@ -142,7 +142,7 @@ export default {
               position: "right",
               color: "#ffffff",
               valueAnimation: true,
-              formatter: "{c} 次",
+              formatter: "{c} 个",
             },
           },
         ],

danger-manage-web/src/views/indexComponents/rightComponents/Bjjl.vue

@@ -2,14 +2,13 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-09-06 13:42:45
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-09-09 17:05:24
+ * @LastEditTime: 2022-10-06 16:46:44
  * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="first-wrapper flex">
     <Title text="报警记录" />
-
     <div class="two">
       <Right/>
     </div>

danger-manage-web/src/views/indexComponents/rightComponents/Right.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 15:07:47
- * @LastEditTime: 2022-09-09 17:11:02
+ * @LastEditTime: 2022-10-06 16:45:49
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
@@ -15,7 +15,7 @@
         <div>工单状态</div>
       </div>
       <div class="scroll-wrapper">
-        <Scroll :dataList="arr">
+        <Scroll :dataList="arr1" v-if="arr1.length>0">
           <template v-slot="{ dataList }">
             <ScroItem
               v-for="(item, index) in dataList"
@@ -25,6 +25,11 @@
             />
           </template>
         </Scroll>
+        <div class="noDevice flex">
+          <div>
+            暂无报警记录
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -40,6 +45,7 @@ export default {
   },
   data() {
     return {
+      arr1:[],
       arr: [
         {
           companyName: "北区气压",
@@ -151,5 +157,12 @@ export default {
     // overflow: hidden;
     // position:relative;
   }
+  .noDevice{
+    height: 100%;
+    color:#cccccc;
+    justify-content: center;
+    align-items: center;
+
+  }
 }
 </style>

danger-manage-web/src/views/indexComponents/rightComponents/Rypb.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-09-06 13:42:45
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-09-09 17:55:24
+ * @LastEditTime: 2022-10-07 14:16:36
  * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -12,24 +12,50 @@
     <div class="two">
       <Chars :options="options" />
       <div class="allNum flex">
-        <div class="num">137</div>
+        <div class="num">{{ peopleNum }}</div>
         <div class="text">人数</div>
       </div>
     </div>
   </div>
 </template>
 
+
 <script>
 let arr = [
-  { value: 1048, name: "管理人员" },
-  { value: 735, name: "值班人员" },
-  { value: 580, name: "巡检人员" },
-  { value: 484, name: "维修人员" },
-  { value: 300, name: "包养人员" },
-  { value: 300, name: "应急抢救人员" },
+  {
+    value: 1,
+    name: "财务科",
+  },
+  {
+    value: 1,
+    name: "生产技术办公室",
+  },
+  {
+    value: 1,
+    name: "综合管理办公室",
+  },
+  {
+    value: 1,
+    name: "经营管理办公室",
+  },
+  {
+    value: 1,
+    name: "安全科",
+  },
+  {
+    value: 1,
+    name: "环保科",
+  },
+  {
+    value: 0,
+    name: "保卫科",
+  },
 ];
+
 import Title from "@/views/indexComponents/allComponents/Title";
 import Chars from "@/components/allCharsCom/Chars";
+
+import { getRypbData } from "@/api/indexChars/chars";
 export default {
   name: "",
   components: {
@@ -56,12 +82,16 @@ export default {
           formatter: (name) => {
             // 第一个空格
             let kg1 = "";
-            if (name.length == 6) {
-              for (let i = 0; i < 8; i++) {
+            if (name.length == this.maxNameLength) {
+              for (let i = 0; i < 7; i++) {
                 kg1 += " ";
               }
             } else {
-              for (let i = 0; i < 14; i++) {
+              for (
+                let i = 0;
+                i < 3 * (this.maxNameLength - name.length) + 7;
+                i++
+              ) {
                 kg1 += " ";
               }
             }
@@ -73,19 +103,18 @@ export default {
               return a + b.value;
             }, 0);
             //第二个空格
+            const length = (obj.value + "").length;
             let kg2 = "";
-            for (let i = 0; i < 15; i++) {
+            for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
               kg2 += " ";
             }
-            const length = (obj.value + "").length;
-            kg2 = kg2.slice(length);
-            console.log();
+
             return (
               name +
               kg1 +
               obj.value +
               kg2 +
-              Math.round((obj.value / total) * 100) +
+              Math.floor((obj.value / total) * 100) / 100 +
               "%"
             );
           },
@@ -121,9 +150,145 @@ export default {
           },
         ],
       },
+      arr: [],
+      peopleNum: 0,
+      // 最长用户名
+      maxNameLength: 0,
+      // 最长数字
+      maxValueLength: 0,
     };
   },
-  methods: {},
+  created() {
+    // getRypbData().then((res) => {
+    //   console.log("res",res)
+    // });
+    this.getRypbData();
+  },
+  methods: {
+    getRypbData() {
+      getRypbData().then((res) => {
+        const data = res.data;
+        this.arr = data.map((item) => {
+          return {
+            value: item.num,
+            name: this.trimSpecial(item.deptName),
+          };
+        });
+        console.log(this.arr);
+        this.peopleNum = data.reduce((pre, current) => {
+          return pre + current.num;
+        }, 0);
+        // 最长用户名
+        this.maxNameLength = Math.max.apply(
+          null,
+          this.arr.map((item) => item.name.length)
+        );
+        this.maxValueLength = Math.max.apply(
+          null,
+          this.arr.map((item) => (item.value + "").length)
+        );
+        this.charsChange(this.arr);
+        console.log("res", res);
+      });
+    },
+    charsChange(arr) {
+      this.options = {
+        // tooltip: {
+        //   trigger: 'item'
+        // },
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          right: "2%",
+          top: 0,
+          bottom: 0,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 11,
+          },
+          icon: "diamond",
+          formatter: (name) => {
+            // 第一个空格
+            let kg1 = "";
+            if (name.length == this.maxNameLength) {
+              for (let i = 0; i < 7; i++) {
+                kg1 += " ";
+              }
+            } else {
+              for (
+                let i = 0;
+                i < 3 * (this.maxNameLength - name.length) + 7;
+                i++
+              ) {
+                kg1 += " ";
+              }
+            }
+            let obj = arr.filter((item) => {
+              return name == item.name;
+            })[0];
+            var total = arr.reduce((a, b) => {
+              const value1 = b.value;
+              return a + b.value;
+            }, 0);
+            //第二个空格
+            const length = (obj.value + "").length;
+            let kg2 = "";
+            for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
+              kg2 += " ";
+            }
+
+            return (
+              name +
+              kg1 +
+              obj.value +
+              kg2 +
+              Math.floor((obj.value / total) * 1000)/10 +
+              "%"
+            );
+          },
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            radius: ["65%", "75%"],
+            center: ["20%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+              emphasis: {
+                formatter: "{b}\n{c}\n({d}%)",
+                show: false,
+                textStyle: {
+                  fontSize: "16",
+                  fontWeight: "bold",
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              borderWidth: 0,
+              borderRadius: 20,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: arr,
+          },
+        ],
+      };
+    },
+    trimSpecial(string) {
+      //替换字符串中的所有特殊字符（包含空格）
+      if (string != "") {
+        const pattern =
+          /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
+        string = string.replace(pattern, "");
+      }
+      return string;
+    },
+  },
 };
 </script>
 

danger-manage-web/vue.config.js

@@ -34,7 +34,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: process.env.VUE_APP_TARGET,
+        // target: process.env.VUE_APP_TARGET,
+        target: `http://192.168.2.16:8908/dangerManage`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''