完善监控统计图表功能

@@ -7,13 +7,14 @@ class business {
     startDate:开始日期
     endDate:结束日期 
   */
-  async getSuucessRate(startDate,endDate) {
+  async getSuucessRate(startDate,endDate,qxdm) {
     return request({
       url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
       method: 'get',
       params: {
         startDate:startDate,
-        endDate:endDate
+        endDate:endDate,
+        qxdm:qxdm
       }
     })
   }

@@ -7,13 +7,14 @@ class efficient {
     startDate:开始日期
     endDate:结束日期 
   */
-  async getProcessCounts(startDate, endDate) {
+  async getProcessCounts(startDate, endDate,qxdm) {
     return request({
       url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts",
       method: "post",
       params: {
         startDate: startDate,
         endDate: endDate,
+        qxdm:qxdm
       },
     });
   }

@@ -2,25 +2,31 @@
   <!-- 监控日志 -->
   <div class="jktjDetail form-clues">
     <!-- 头部搜索 -->
-    <el-form
-      ref="form"
-      :model="form"
-      :inline="true"
-      class="from-clues-header"
-      label-width="100px"
-    >
-      <el-row class="rows">
-        <el-col :span="8">
-          <el-form-item label="开始日期">
+    <div class="from-clues-header">
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="开始日期" prop="startTime">
               <el-date-picker
-              v-model="valueTime"
+                type="datetime"
+                placeholder="开始日期"
+                :picker-options="pickerOptionsStart"
+                clearable
+                v-model="form.startTime"
                 value-format="yyyy/MM/dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="结束日期" prop="endTime">
+              <el-date-picker
+                type="datetime"
+                placeholder="结束日期"
+                :picker-options="pickerOptionsEnd"
+                clearable
+                v-model="form.endTime"
+                value-format="yyyy/MM/dd HH:mm:ss"
+              ></el-date-picker>
             </el-form-item>
           </el-col>
           <!-- 操作按钮 -->
@@ -30,6 +36,7 @@
           </el-col>
         </el-row>
       </el-form>
+    </div>
     <!-- 表格 -->
     <div class="form-clues-content echarts-box" v-if="pieChartsData.length">
       <div id="myChart" class="chart"></div>
@@ -62,16 +69,18 @@ export default {
           }
         },
       },
+      form: {
+        startTime: getFirstDayOfSeason(),
+        endTime: timeFormat(new Date(), true),
+      },
       // 搜索表单
-      valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
-      // valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
       pieChartsData: [],
     };
   },
-  created() {
+  created() {},
+  mounted() {
     this.getProcessCounts();
   },
-  mounted() {},
   computed: {
     ...mapGetters(["dicData"]),
   },
@@ -80,8 +89,8 @@ export default {
     async getProcessCounts() {
       this.pieChartsData = [];
       let { result: res } = await efficient.getProcessCounts(
-        this.valueTime[0],
-        this.valueTime[1]
+        this.form.startTime,
+        this.form.endTime
       );
       //获取图表配置项需要的数据
       res.length > 0 &&
@@ -95,13 +104,18 @@ export default {
             groupId: item.recType,
           });
         });
+      this.$nextTick(() => {
         // 初始化图表
         this.echartInit();
         this.barChartInit(res[0].recType);
+      });
     },
     // 重置
     resetForm() {
-      this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
+      this.form = {
+        startTime: getFirstDayOfSeason(),
+        endTime: timeFormat(new Date(), true),
+      };
       this.getProcessCounts();
     },
     //玫瑰图初始化
@@ -112,7 +126,7 @@ export default {
       // 绘制图表
       myChart.setOption({
         legend: {
-          bottom: "6%",
+          bottom: "2%",
           left: "center",
           textStyle: {
             color: "#fff",
@@ -127,14 +141,11 @@ export default {
             name: "各业务类型办理数量",
             type: "pie",
             radius: [0, 250],
-            center: ["50%", "30%"],
+            center: ["50%", "45%"],
             roseType: "area",
             itemStyle: {
               borderRadius: 8,
             },
-            label: {
-              show: false,
-            },
             data: this.pieChartsData,
           },
         ],
@@ -173,19 +184,37 @@ export default {
       //请求recType对应业务的各区县数据
       let { result: res } = await efficient.getProcessDays(
         recType,
-        this.valueTime[0],
-        this.valueTime[1]
+        this.form.startTime,
+        this.form.endTime
       );
+      //行政区数组
       let xzqArr = [];
-      //行政区代码过滤
-      res.length > 0 &&
-        res.forEach((item) => {
-          xzqArr.push(
-            this.dicData["A20"].filter((i) => {
-              return i.DCODE == item.qxdm;
-            })[0].DNAME
-          );
+      this.dicData["A20"].forEach((item) => {
+        xzqArr.push(item.DNAME);
+        let tempArr = res.filter((i) => {
+          return i.qxdm == item.DCODE;
         });
+        if (tempArr.length) {
+          item.avgDay = tempArr[0].avgDay;
+          item.maxDay = tempArr[0].maxDay;
+          item.minDay = tempArr[0].minDay;
+        } else {
+          item.avgDay = 0;
+          item.maxDay = 0;
+          item.minDay = 0;
+        }
+      });
+      //补全无数据行政区后的结果数组
+      let dealArr = [...this.dicData["A20"]];
+      // //行政区代码过滤
+      // res.length > 0 &&
+      //   res.forEach((item) => {
+      //     xzqArr.push(
+      //       this.dicData["A20"].filter((i) => {
+      //         return i.DCODE == item.qxdm;
+      //       })[0].DNAME
+      //     );
+      //   });
       let myChartBar = this.$echarts.init(
         document.getElementById("myChart-bar")
       );
@@ -220,7 +249,7 @@ export default {
               textStyle: {
                 show: true,
                 color: "#fff",
-                fontSize: "20",
+                fontSize: "16",
               },
             },
           },
@@ -245,18 +274,21 @@ export default {
         series: [
           {
             type: "bar",
+            barMaxWidth: '60',
             name: "最短用时",
-            data: res.map((item) => item.minDay),
+            data: dealArr.map((item) => item.minDay),
           },
           {
             type: "bar",
+            barMaxWidth: '60',
             name: "平均用时",
-            data: res.map((item) => item.avgDay),
+            data: dealArr.map((item) => item.avgDay),
           },
           {
             type: "bar",
+            barMaxWidth: '60',
             name: "最长用时",
-            data: res.map((item) => item.maxDay),
+            data: dealArr.map((item) => item.maxDay),
           },
         ],
       });

@@ -5,10 +5,10 @@
     <div class="from-clues-header">
       <el-form ref="form" :model="form" label-width="100px">
         <el-row>
-          <el-col :span="6">
+          <el-col :span="4">
             <el-form-item label="行政区">
               <el-select
-                v-model="form.XZQDM"
+                v-model="form.qxdm"
                 class="width100"
                 clearable
                 placeholder="行政区"
@@ -23,17 +23,28 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="开始日期">
+          <el-col :span="4">
+            <el-form-item label="开始日期" prop="startTime">
               <el-date-picker
-                v-model="valueTime"
+                type="datetime"
+                placeholder="开始日期"
+                :picker-options="pickerOptionsStart"
+                clearable
+                v-model="form.startTime"
                 value-format="yyyy/MM/dd HH:mm:ss"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              >
-              </el-date-picker>
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="结束日期" prop="endTime">
+              <el-date-picker
+                type="datetime"
+                placeholder="结束日期"
+                :picker-options="pickerOptionsEnd"
+                clearable
+                v-model="form.endTime"
+                value-format="yyyy/MM/dd HH:mm:ss"
+              ></el-date-picker>
             </el-form-item>
           </el-col>
           <!-- 操作按钮 -->
@@ -76,13 +87,12 @@ export default {
           }
         },
       },
-      // 搜索表单
-      valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
       recTypeArr: [],
       chartData: [],
+      // 搜索表单
       form: {
-        startTime: "",
-        endTime: "",
+        startTime: getFirstDayOfSeason(),
+        endTime: timeFormat(new Date(),true),
         qxdm: "",
       },
     };
@@ -99,8 +109,9 @@ export default {
       this.recTypeArr = [];
       this.chartData = [];
       let { result: res } = await business.getSuucessRate(
-        this.valueTime[0],
-        this.valueTime[1]
+        this.form.startTime,
+        this.form.endTime,
+        this.form.qxdm
       );
       this.chartData = res;
       //行政区代码过滤
@@ -108,15 +119,17 @@ export default {
         res.forEach((item) => {
           this.recTypeArr.push(item.recTypeName);
         });
+      this.$nextTick(() => {
+        // 初始化图表 
         this.echartInit();
+      });
     },
     // 重置
     resetForm() {
       this.form = {
-        startTime: "",
-        endTime: "",
+        startTime: getFirstDayOfSeason(),
+        endTime: timeFormat(new Date(),true),
       };
-      this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
       this.getSuucessRate();
     },
     echartInit() {
@@ -206,7 +219,7 @@ export default {
               color: "#fff",
               fontSize: "16",
             },
-            interval: 5,
+            splitNumber:4,
             axisLabel: {
               formatter: "{value} %",
               textStyle: {
@@ -221,6 +234,7 @@ export default {
           {
             name: "成功",
             type: "bar",
+            barMaxWidth: '60',
             tooltip: {
               valueFormatter: function (value) {
                 return value + " ml";
@@ -233,6 +247,7 @@ export default {
           {
             name: "失败",
             type: "bar",
+            barMaxWidth: '60',
             tooltip: {
               valueFormatter: function (value) {
                 return value + " ml";
@@ -245,6 +260,7 @@ export default {
           {
             name: "成功率",
             type: "line",
+            barMaxWidth: '60',
             yAxisIndex: 1,
             tooltip: {
               valueFormatter: function (value) {

@@ -5,10 +5,10 @@
     <div class="from-clues-header">
       <el-form ref="form" :model="form" label-width="100px">
         <el-row>
-          <el-col :span="6">
+          <el-col :span="4">
             <el-form-item label="行政区">
               <el-select
-                v-model="form.XZQDM"
+                v-model="form.qxdm"
                 class="width100"
                 clearable
                 placeholder="行政区"
@@ -23,35 +23,50 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="开始日期">
+          <el-col :span="4">
+            <el-form-item label="开始日期" prop="startTime">
               <el-date-picker
-                v-model="valueTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              >
-              </el-date-picker>
+                type="datetime"
+                placeholder="开始日期"
+                :picker-options="pickerOptionsStart"
+                clearable
+                v-model="form.startTime"
+                value-format="yyyy/MM/dd HH:mm:ss"
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="结束日期" prop="endTime">
+              <el-date-picker
+                type="datetime"
+                placeholder="结束日期"
+                :picker-options="pickerOptionsEnd"
+                clearable
+                v-model="form.endTime"
+                value-format="yyyy/MM/dd HH:mm:ss"
+              ></el-date-picker>
             </el-form-item>
           </el-col>
           <!-- 操作按钮 -->
           <el-col :span="3" class="btnColRight">
             <btn nativeType="cz" @click="resetForm">重置</btn>
-            <btn nativeType="cx">查询</btn>
+            <btn nativeType="cx" @click="getProcessCounts">查询</btn>
           </el-col>
         </el-row>
       </el-form>
     </div>
     <!-- 图表 -->
-    <div class="form-clues-content echarts-box">
+    <div class="form-clues-content echarts-box" v-if="chartData.length">
       <div id="myChart" class="chart"></div>
     </div>
+    <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import efficient from "@/api/efficient";
+import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
 export default {
   name: "jktj",
   data() {
@@ -74,21 +89,37 @@ export default {
       },
       // 搜索表单
       valueTime: "",
+      // 搜索表单
       form: {
-        startTime: "",
-        endTime: "",
-        XZQDM: "",
+        startTime: getFirstDayOfSeason(),
+        endTime: timeFormat(new Date(),true),
+        qxdm: "",
       },
+      chartData:[]
     };
   },
   mounted() {
-    // 初始化图表
-    this.echartInit();
+    // 查询业务量
+    this.getProcessCounts();
   },
   computed: {
     ...mapGetters(["dicData"]),
   },
   methods: {
+    async getProcessCounts(){
+      this.chartData = [];
+      let { result: res } = await efficient.getProcessCounts(
+        this.form.startTime,
+        this.form.endTime,
+        this.form.qxdm
+      );
+      //获取图表配置项需要的数据
+      this.chartData = res;
+      this.$nextTick(() => {
+        // 初始化图表
+        this.echartInit(this.chartData)
+      });
+    },
     // 重置
     resetForm() {
       this.form = {
@@ -96,7 +127,8 @@ export default {
         endTime: "",
       };
     },
-    echartInit() {
+    //图表渲染
+    echartInit(chartArr) {
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById("myChart"));
       // 绘制图表
@@ -108,7 +140,6 @@ export default {
           textStyle: {
             fontSize: 16, // 字体大小
           },
-          extraCssText: "width:220px;height:160px;", // 背景色
         },
         grid: {
           top: 120,
@@ -116,14 +147,7 @@ export default {
         xAxis: [
           {
             type: "category",
-            data: [
-              "土地所有权",
-              "建设用地、宅基地使用权",
-              "构（建）筑物所有权",
-              "林权",
-              "注销登记",
-              "抵押权登记",
-            ],
+            data: chartArr.map(item=>item.recTypeName),
             axisLabel: {
               interval: 0,
               formatter: function (val) {
@@ -151,7 +175,7 @@ export default {
               textStyle: {
                 show: true,
                 color: "#fff",
-                fontSize: "20",
+                fontSize: "16",
               },
             },
           },
@@ -175,8 +199,9 @@ export default {
         ],
         series: [
           {
-            data: [200, 120, 150, 80, 70, 30],
+            data: chartArr.map(item=>item.counts),
             type: "bar",
+            barMaxWidth: '60',
           },
         ],
       });
@@ -193,6 +218,11 @@ export default {
   .rows {
     margin-left: 100px;
   }
+  .center {
+    line-height: 50vh;
+    text-align: center;
+    color:#b6b5b5
+  }
   .echarts-box {
     display: flex;
     justify-content: center;