实现驾驶舱

src/api/board/cockpit.js

@@ -42,14 +42,37 @@ export function drill(query) {
   });
 }
 // GA38统计
-export function orgGA38(orgId) {
+export function orgGA38(query) {
   return request({
     url: "/core/cockpit/orgga38",
     method: "get",
-    params: { orgId },
+    params: query,
+  });
+}
+// GA38统计
+export function orgInfo(orgId) {
+  return request({
+    url: "/core/cockpit/orginfo",
+    method: "get",
+    params: {orgId},
+  });
+}
+// 本月来访
+export function currentMonthVisitInfo(orgId) {
+  return request({
+    url: "/core/cockpit/currentmonthvisitinfo",
+    method: "get",
+    params: {orgId},
+  });
+}
+// 安保情况
+export function orgSecurityInfo(orgId) {
+  return request({
+    url: "/core/cockpit/orgsecurityinfo",
+    method: "get",
+    params: {orgId},
   });
 }
-
 // 隐患统计
 export function question(query) {
     return request({

src/store/getters.js

@@ -13,7 +13,6 @@ const getters = {
   orgId: state => state.user.orgId,
   orgType: state => state.user.orgType,
   orgName: state => state.user.orgName,
-  orgPath: state => state.user.orgPath,
   orgShortName: state => state.user.orgShortName,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,

src/views/board/charts/comprehesive/report.vue

@@ -0,0 +1,316 @@
+<!--  -->
+<template>
+  <div class="static_info">
+    <div ref="orgchart"></div>
+    <div class="chart-template static_info">
+      <!-- <div class="line"></div> -->
+      <div>
+        <p>
+          <span> 其它(本月) </span>
+        </p>
+        <div ref="otherchart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "./../../board.scss";
+import {
+  orgInfo,
+  currentMonthVisitInfo,
+  orgSecurityInfo,
+} from "@/api/board/cockpit.js";
+export default {
+  props: {
+    orgId: {
+      type: String,
+      isRequired: true,
+    },
+  },
+  data() {
+    return {
+      data: {
+        org: [],
+        visit: [],
+        orgSecurity: [],
+      },
+    };
+  },
+  components: {},
+  computed: {},
+  watch: {
+    orgId: {
+      deep: true,
+      handler(val) {
+        this.getOrgData();
+        this.getOtherData();
+      },
+    },
+  },
+
+  created() {
+    // this.types = types;
+    // this.maxDisplay = 16;
+    // this.refreshTime = 1 * 10 * 1000;
+    // this.isMouseOver = false;
+  },
+
+  async mounted() {
+    window.addEventListener("resize", this.windowResize);
+  },
+  beforeDestroy() {
+    // this.timer && clearInterval(this.timer);
+    // this.timer = null;
+
+    window.removeEventListener("resize", this.windowResize);
+  },
+
+  methods: {
+    // handleClick() {
+    //   this.getData();
+    // },
+    handleMouseEnter() {
+      this.isMouseOver = true;
+    },
+    handleMouseLeave() {
+      this.isMouseOver = false;
+    },
+    async getOrgData() {
+      let columnCount = 4;
+      let r = (await orgInfo(this.orgId)).data;
+      let data = [];
+
+      for (let i in r) {
+        let columnIndex = i % columnCount;
+        if (!data[columnIndex]) {
+          data[columnIndex] = [];
+        }
+
+        let orgName = r[i].orgName;
+        r[i].orgName = parseInt(i) + 1 + "." + orgName;
+        r[i].reachRate = (r[i].reachRate * 100).toFixed(2) + "%";
+        data[columnIndex].push(r[i]);
+      }
+
+      this.data = data;
+
+      this.initOrgMap();
+    },
+
+    async getOtherData() {
+      this.visit= (await currentMonthVisitInfo(this.orgId)).data
+      this.orgSecurity=(await orgSecurityInfo(this.orgId)).data;
+
+      this.initOtherMap();
+    },
+    initOtherMap() {
+      this.myChart && this.myChart.dispose();
+      let c = this.$refs["otherchart"];
+
+      // 基于准备好的dom，初始化echarts实例
+      this.myChart = echarts.init(
+        c
+        // document.getElementById("commAlarmEvent_Chart")
+      );
+
+      let t = this;
+      // 指定图表的配置项和数据
+      var option = {
+        //  color: ["#82D5AE"],
+        tooltip: {
+          trigger: "axis",
+          confine: true,
+          axisPointer: {
+            type: "shadow",
+          },
+
+          // formatter: "完成率：{c}%",
+        },
+        legend: {
+          show: true,
+          textStyle: {
+            color: "rgb(245, 245, 245)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "2%",
+          top: "20px",
+          containLabel: true,
+        },
+        series: [         
+        {
+            name: "来访",
+            type: "pie",
+            center: ["33%", "50%"],
+            data: [
+              {
+                name: "纸质",
+                value: this.visit.paperCount,
+              },
+              {
+                name: "紧急来访",
+                value: this.visit.urgencyCount,
+              },
+              {
+                name: "电子",
+                value: this.visit.electronicCount,
+              },
+            ],
+          },
+          {
+            name: "安保",
+            type: "pie",
+            center: ["66%", "50%"],
+            data: [
+              {
+                name: "未配置保安",
+                value: this.orgSecurity.unequippedCount,
+              },
+              {
+                name: "配置保安",
+                value: this.orgSecurity.equippedCount,
+              }
+            ],
+          },
+        ],
+      };
+      if (option && typeof option === "object") {
+        this.myChart.setOption(option);
+      }
+    },
+    initOrgMap() {
+      this.myChart && this.myChart.dispose();
+      let c = this.$refs["orgchart"];
+
+      // 基于准备好的dom，初始化echarts实例
+      this.myChart = echarts.init(
+        c
+        // document.getElementById("commAlarmEvent_Chart")
+      );
+
+      let t = this;
+      // 指定图表的配置项和数据
+      var option = {
+        //  color: ["#82D5AE"],
+        tooltip: {
+          trigger: "axis",
+          confine: true,
+          axisPointer: {
+            type: "shadow",
+          },
+
+          // formatter: "完成率：{c}%",
+        },
+        legend: {
+          show: false,
+          textStyle: {
+            color: "rgb(245, 245, 245)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "2%",
+          top: "20px",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "行社",
+            type: "pie",
+            radius: ["70%", "110%"],
+            center: ["33%", "33%"],
+            data: [
+              {
+                name: "行社",
+                value: this.org.hangsheCount,
+              },
+            ],
+          },
+          {
+            name: "营业网点",
+            type: "pie",
+            radius: ["70%", "110%"],
+            center: ["66%", "33%"],
+            data: [
+              {
+                name: "营业网点",
+                value: this.org.bankingCount,
+              },
+            ],
+          },
+          {
+            name: "网点业务库",
+            type: "pie",
+            radius: ["70%", "110%"],
+            center: ["66%", "33%"],
+            data: [
+              {
+                name: "网点业务库",
+                value: this.org.offlineCount,
+              },
+            ],
+          },
+          {
+            name: "离行式自助银行",
+            type: "pie",
+            radius: ["70%", "110%"],
+            center: ["66%", "66%"],
+            data: [
+              {
+                name: "离行式自助银行",
+                value: this.org.bankingStoreCount,
+              },
+            ],
+          },
+        ],
+      };
+      if (option && typeof option === "object") {
+        this.myChart.setOption(option);
+      }
+    },
+    windowResize() {
+      this.myChart && this.myChart.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.report {
+  background-image: linear-gradient(
+    to right,
+    rgba(27, 33, 57, 0.8) 0%,
+    rgba(32, 49, 99, 0.6) 50%,
+    rgba(27, 33, 57, 0.8) 100%
+  );
+  margin-top: 15px;
+  width: calc(100% - 0px);
+  margin-left: 1px;
+  border-top: 3px solid;
+  border-image: linear-gradient(
+      to right,
+      rgba(27, 33, 57, 0.8) 20%,
+      rgba(101, 219, 229, 1) 50%,
+      rgba(27, 33, 57, 0.8) 80%
+    )
+    3;
+}
+
+.static_info {
+  height: calc(100%);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 5px;
+
+  & > div:first {
+    width: 40%;
+  }
+  & > div:first {
+    width: 60%;
+  }
+}
+</style>

src/views/board/charts/ga38/report.vue

@@ -0,0 +1,305 @@
+<!--  -->
+<template>
+  <div class="chart-template chart-template-withperiod">
+    <p>
+      <span>  安防设施建设达标率 </span>
+    </p>
+    <div>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane
+          v-for="t in types"
+          :key="t.value"
+          :label="t.text"
+          :name="t.value"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <div ref="chart"></div>
+  </div>
+</template>
+
+<script>
+import "./../../board.scss";
+import * as echarts from "echarts";
+import {
+  findMaxIndex,
+  getChartDOMSize,
+  getNextPeriod,
+  getPeriodText,
+} from "../../utils.js";
+import { orgGA38 } from "@/api/board/cockpit.js";
+const types = [
+  {
+    text: "今天",
+    value: "1",
+  },
+  {
+    text: "近7天",
+    value: "2",
+  },
+  {
+    text: "近30天",
+    value: "3",
+  },
+  {
+    text: "近90天",
+    value: "4",
+  },
+  {
+    text: "本年",
+    value: "5",
+  },
+];
+export default {
+  props: {
+    orgId:{
+      type: String,
+      isRequired: true,
+    },
+    orgName:{
+      type: String,
+      isRequired: true,
+    },
+    // title: {
+    //   type: String,
+    //   isRequired: true,
+    // },
+  },
+  data() {
+    return {
+      data: {
+        all: [],
+        completed: [],
+        name: [],
+      },
+      activeName: types[0].value,
+    };
+  },
+
+  components: {},
+
+  computed: {},
+
+  watch: {
+    orgId: {
+      deep: true,
+      handler(val) {
+        this.resetTimer();
+        this.getData();
+      },
+    },
+    data: {
+      deep: true,
+      handler() {
+        this.initMap();
+      },
+    },
+  },
+
+  created() {
+    this.types = types;
+    this.maxDisplay = 16;
+    this.refreshTime = 1 * 10 * 1000;
+    this.isMouseOver = false;
+  },
+
+  async mounted() {
+    window.addEventListener("resize", this.windowResize);
+  },
+  beforeDestroy() {
+    this.timer && clearInterval(this.timer);
+    this.timer = null;
+
+    window.removeEventListener("resize", this.windowResize);
+  },
+
+  methods: {
+    handleClick() {
+      this.resetTimer();
+      this.getData();
+    },
+    handleMouseEnter() {
+      this.isMouseOver = true;
+    },
+    handleMouseLeave() {
+      this.isMouseOver = false;
+    },
+    async getData() {
+      let r = (await orgGA38({ orgId: this.orgId, period: this.activeName }))
+        .data;
+      let data = {
+        ga2021: [],
+        ga2015: [],
+        rate: [],
+        name: [],
+      };
+
+      for (let p in r) {
+        let item=r[p]
+        if(data.name.length>=16){
+          break;
+        }
+        data.ga2021.push(item.ga382021);
+        data.ga2015.push(item.ga382015);
+        data.rate.push((item.reachRate * 100).toFixed(0));
+        data.name.push(item.orgName);       
+      }
+      this.data = data;
+      
+      // console.info(this.data);
+    },
+
+    windowResize() {
+      this.myChart && this.myChart.resize();
+    },
+    initMap() {
+      this.myChart && this.myChart.dispose();
+      let c = this.$refs["chart"];
+
+      // 基于准备好的dom，初始化echarts实例
+      this.myChart = echarts.init(
+        c
+        // document.getElementById("commAlarmEvent_Chart")
+      );
+
+      let t = this;
+      // 指定图表的配置项和数据
+      var option = {
+        //  color: ["#82D5AE"],
+        tooltip: {
+          trigger: "axis",
+          confine: true,
+          axisPointer: {
+            type: "shadow",
+          },         
+          
+          // formatter: "完成率：{c}%",
+        },
+        legend: {
+          show: true,
+          textStyle: {
+            color: "rgb(245, 245, 245)",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "2%",
+          top: "20px",
+          containLabel: true,
+
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            data: this.data.name,
+            // data: this.mapdata.totalDataVo.xlist,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: "solid",
+                color: "rgb(245, 245, 245)", //左边线的颜⾊
+              },
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: -45,
+              fontSize: 12,
+              color: "#fff",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            minInterval: 1,
+            // max: function (value) {
+            //   let m = value.max == Math.ceil(value.max) ? Math.ceil(value.max * 1.0001) : Math.ceil(value.max);
+            //   return m
+            // },
+          },
+        ],
+        series: [       
+          {
+            name: "GA38-2021",
+            type: "bar",
+            stack:'ga38',
+            barWidth: "14",
+            // label: {
+            //   show: true,
+            //   position: 'top',
+            // },
+            data: this.data.ga2021,
+            // itemStyle: {
+            //   normal: {
+            //     label: {
+            //       formatter: function (param) {
+            //         // if (t.data.all[param.dataIndex]) {
+            //         //   let rate = param.value / t.data.all[param.dataIndex];
+            //         //   return (Math.floor(rate * 1000) / 10).toFixed(1) + "%";
+            //         // } else {
+            //         //   return "";
+            //         // }
+            //         return parseFloat(param.value).toFixed(0) + "%";
+            //       },
+            //       show: true,
+            //       position: "top",
+            //       textStyle: {
+            //         fontWeight: "bolder",
+            //         fontSize: "10",
+            //         color: "rgb(245, 245, 245)",
+            //       },
+            //     },
+            //   },
+            // },
+          },
+          {
+            name: "GA38-2015",
+            type: "bar",
+            stack:'ga38',
+            barWidth: "14",
+            // label: {
+            //   show: true,
+            //   position: 'top',
+            // },
+            data: this.data.ga2015,
+          },
+          {
+            name: "达标率",
+            type: "bar",
+            stack:'ga38',
+            barWidth: "14",
+            tooltip:{
+              valueFormatter:(v)=>`${v}%`
+            },
+            // label: {
+            //   show: true,
+            //   formatter:'{c}%'
+            // },
+            data: this.data.rate,
+          },
+        ],
+      };
+      if (option && typeof option === "object") {
+        this.myChart.setOption(option);
+      }
+    },
+
+    resetTimer() {
+      this.timer && clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        if (this.isMouseOver) {
+          return;
+        }
+        this.activeName = getNextPeriod(this.types, this.activeName);
+        this.getData();
+      }, this.refreshTime);
+    },
+  },
+};
+</script>
+<style lang="less" scoped></style>

src/views/board/charts/question/report.vue

@@ -51,7 +51,12 @@ const types = [
   },
 ];
 export default {
-  props: ["orgId"],
+  props: {
+    orgId:{
+      type: String,
+      isRequired: true,
+    },
+  },
   data() {
     return {
       data: {
@@ -122,13 +127,14 @@ export default {
       //   notQuestion: 4*bs,
       //   reformed: (500 - 112 - 20 - 50 - 4)*bs,
       // };
-      let r = (await  question({ orgId: this.orgId, period: this.activeName })).data;
+      let r = (await question({ orgId: this.orgId, period: this.activeName }))
+        .data;
 
       this.data = r;
-      if(r.total==0){
-        this.data.reformRate=100;
-      }else{
-        this.data.reformRate=((r.reformed/r.total)*100).toFixed(0);
+      if (r.total == 0) {
+        this.data.reformRate = 100;
+      } else {
+        this.data.reformRate = ((r.reformed / r.total) * 100).toFixed(0);
       }
     },
 
@@ -165,10 +171,28 @@ export default {
         {
           name: "已逾期",
           value: this.data.overdue,
-        },{
-         
-        }
+        },
+        {
+          value: this.sum(
+            this.data.unconfirm,
+            this.data.dissent,
+            this.data.closed,
+            this.data.unreform,
+            this.data.reformed,
+            this.data.overdue
+          ),
+          itemStyle: {
+            color: "none",
+            decal: {
+              symbol: "none",
+            },
+            label: {
+              show: false,
+            },
+          },
+        },
       ];
+
       let t = this;
       // 指定图表的配置项和数据
       var option = {
@@ -177,39 +201,69 @@ export default {
         // },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)",
+          show:false,
+          // formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
+        title: {
+          text: `总数： ${this.data.total}`,
+          subtext: `整改率： ${Math.round(this.data.reformed * 100)}%`,
+          left: "center",
+          top: "50%",
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight:200,
+            // fontFamily:'SYNormal, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
+            align: "center",
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight:200,
+            // fontFamily:'SYNormal, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
+            align: "center",
+          },
+        },
+   
         legend: {
+          show: false,
+          selectedMode:false,
           // type: "scroll",
-          orient: "vertical",
-          right: 10,
+          // orient: "vertical",
+          // right: 10,
           // top: 20,
           // bottom: 20,
-          
-          data: chartData.map((d) => d.name),
-          formatter: function (name) {
-            let d = chartData.find((c) => c.name === name);
-            return d.name + "：" + (d.value?((d.value*100).toFixed(2)+'%'):'-') ;
-          },
-          textStyle: {
-            color: "white",
-          },
+
+          // data: chartData.map((d) => d.name),
+          // formatter: function (name) {
+          //   let d = chartData.find((c) => c.name === name);
+          //   return (
+          //     d.name + "：" + (d.value ? (d.value * 100).toFixed(2) + "%" : "-")
+          //   );
+          // },
+          // textStyle: {
+          //   color: "white",
+          // },
         },
         series: [
           {
             name: "问题整改",
             type: "pie",
-            radius: ["65%", "85%"],
-            center: ["30%", "50%"],
-            startAngle:180,
+            radius: ["70%", "110%"],
+            center: ["50%", "75%"],
+            startAngle: 180,
             data: chartData,
             label: {
               show: true,
-              position: "center",
-              color: "#fff",
-              fontSize: 14,
-              formatter: function (value) {
-                return `总数:${t.data.total}\n\n整改率:${Math.round(t.data.reformed*100)}%`;
+              //  position: "center",
+              color: "#8e949c",
+              fontSize: 12,
+              formatter: function (param) {
+                if (param.name) {
+                  return `${param.name}(${Math.round(param.value * 100)}%)`;
+                } else {
+                  return "";
+                }
               },
             },
             // emphasis: {
@@ -237,6 +291,15 @@ export default {
         this.getData();
       }, this.refreshTime);
     },
+    sum(...values) {
+      let t = 0;
+      values.forEach((v) => {
+        if (v) {
+          t = t + parseFloat(v);
+        }
+      });
+      return t;
+    },
   },
 };
 </script>

src/views/board/index.vue

@@ -38,27 +38,27 @@
           <question :orgId="selectedOrg.id" />
         </div>
         <div>
-          <resumptionReport
-            :orgId="selectedOrg.id"
-            :api="api.safetyCheck"
-            :orgName="selectedOrg.name"
-            title="日常安全检查"
-          />
+          <ga38-chart :orgId="selectedOrg.id" />
         </div>
       </div>
       <div>
         <div>
           <div>
-            <mapChart :orgId="selectedOrg.id" :orgName="selectedOrg.name" />
+            <mapChart :orgId="selectedOrg.id"/>
           </div>
           <div>
-            <orgStatis :orgId="selectedOrg.id" :orgName="selectedOrg.name" />
+            <comprehesive-chart :orgId="selectedOrg.id"/>
           </div>
         </div>
       </div>
       <div>
         <div>
-          
+          <resumptionReport
+            :orgId="selectedOrg.id"
+            :api="api.safetyCheck"
+            :orgName="selectedOrg.name"
+            title="日常安全检查"
+          />
         </div>
         <div>
           <resumptionReport
@@ -92,7 +92,9 @@ import { mapGetters } from "vuex";
 import resumptionReport from "./charts/resumption/report_bar.vue";
 import question from "./charts/question/report.vue";
 import mapChart from "./charts/map/report.vue";
-import orgStatis from "./charts/org/report.vue";
+// import orgStatis from "./charts/org/report.vue";
+import ga38Chart from './charts/ga38/report.vue'
+import comprehesiveChart from './charts/comprehesive/report.vue'
 import dayjs from "dayjs";
 import * as api from "@/api/board/cockpit.js";
 
@@ -119,7 +121,8 @@ export default {
     resumptionReport,
     question,
     mapChart,
-    orgStatis,
+    ga38Chart,
+    comprehesiveChart
   },
 
   computed: {
@@ -187,6 +190,7 @@ export default {
       id: this.orgId,
       name: this.orgName,
     };
+    
     this.orgCascaderSelectedIds=[this.orgId]
   },
   beforeDestroy() {
@@ -221,6 +225,7 @@ export default {
 
       this.selectedOrg = {
         id: checked[0].data.id,
+        path:checked[0].data.path,
         name: checked[0].data.shortName,
       };
     },