style:监管

 /*
  * @Description: 干部查询
  * @Autor:
- * @LastEditTime: 2023-05-12 16:20:40
+ * @LastEditTime: 2023-11-03 15:00:17
  */
 /* 引入axios请求文件 */
 import request from '@/utils/request'
@@ -47,3 +47,16 @@ export function editSearchRecord (id) {
     method: 'get'
   })
 }
+
+/**
+ * @description: 财产登记情况
+ * @author: renchao
+ */
+
+export function djqk (data) {
+  return request({
+    url: urlHeader + '/djqk',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

@@ -126,6 +126,6 @@
         immediate: true,
         deep: true,
       },
-    },
+    }
   };
 </script>

+<template>
+  <!-- 监控日志 -->
+  <div class="ccdjqk from-clues">
+    <!-- 头部搜索 -->
+    <div class="from-clues-header">
+      <el-form ref="form" :model="form" label-width="100px">
+        <Breadcrumb />
+        <el-row class="mb-5">
+          <el-col :span="4">
+            <el-form-item label="开始日期" class="d-flex">
+              <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期"
+                :picker-options="pickerOptionsStart" v-model="form.startDate"
+                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="结束日期" class="d-flex">
+              <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
+                :picker-options="pickerOptionsEnd" v-model="form.endDate" value-format="yyyy-MM-dd HH:mm:ss"
+                @change="endDateChange"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <!-- 操作按钮 -->
+          <el-col :span="16" class="btnColRight">
+            <btn nativeType="cz" @click="resetForm">重置</btn>
+            <btn nativeType="cx" @click="getProcessCounts">查询</btn>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 图表 -->
+    <div class="from-clues-content echarts-box" v-if="chartData.length">
+      <div id="myChart" class="chart" style="height:100%;width:100%;"></div>
+    </div>
+    <div class="from-clues-content echarts-box center" v-else>暂无数据</div>
+  </div>
+</template>
+<script>
+  import { mapGetters } from "vuex";
+  import { djqk } from "@/api/searchRecord.js";
+  import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
+  export default {
+    name: "jktj",
+    data () {
+      return {
+        // 开始日期限制
+        pickerOptionsStart: {
+          disabledDate: (time) => {
+            if (this.form.endDate) {
+              return time.getTime() > new Date(this.form.endDate).getTime();
+            }
+          },
+        },
+        // 结束日期限制
+        pickerOptionsEnd: {
+          disabledDate: (time) => {
+            if (this.form.startDate) {
+              return time.getTime() < new Date(this.form.startDate).getTime();
+            }
+          },
+        },
+        // 搜索表单
+        form: {
+          startDate: getFirstDayOfSeason(),
+          endDate: timeFormat(new Date(), true),
+        },
+        chartData: []
+      };
+    },
+    mounted () {
+      // 财产登记情况
+      this.getProcessCounts();
+    },
+    computed: {
+      ...mapGetters(["dicData"]),
+    },
+    methods: {
+      endDateChange (val) {
+        this.form.endDate = timeFormat(new Date(val), true)
+      },
+      async getProcessCounts () {
+        this.chartData = [];
+        let { result: res } = await djqk(this.form)
+        //获取图表配置项需要的数据
+        this.chartData = res;
+        this.$nextTick(() => {
+          // 初始化图表
+          this.chartData.length && this.echartInit(this.chartData)
+        });
+
+      },
+      // 重置
+      resetForm () {
+        this.form = {
+          startDate: getFirstDayOfSeason(),
+          endDate: timeFormat(new Date(), true)
+        };
+        this.getProcessCounts();
+      },
+      //图表渲染
+      echartInit (chartArr) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("myChart"));
+        // 绘制图表
+        myChart.setOption({
+          color: ["#13E5FF"],
+          tooltip: {
+            show: true,
+            trigger: "axis",
+            textStyle: {
+              fontSize: 16, // 字体大小
+            },
+          },
+          grid: {
+            top: 120,
+            bottom: 100,
+          },
+          label: {
+            color: 'inherit',
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: chartArr.map(item => item.name),
+              axisLabel: {
+                textStyle: {
+                  show: true,
+                  color: this.BASE_API.echartTextColor,
+                  fontSize: "16"
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: "value",
+              name: "数量/个",
+              nameTextStyle: {
+                color: this.BASE_API.echartTextColor,
+                fontSize: "16",
+              },
+              axisLabel: {
+                textStyle: {
+                  show: true,
+                  color: this.BASE_API.echartTextColor,
+                  fontSize: "16",
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              type: "bar",
+              //显示数值
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                  },
+                },
+              },
+              barMaxWidth: '60',
+              data: chartArr.map(item => item.count),
+            },
+          ],
+        });
+      },
+    },
+  };
+</script>
+<style scoped lang="scss">
+  .ccdjqk {
+    flex-direction: column;
+
+    .rows {
+      margin-left: 100px;
+    }
+
+    .center {
+      line-height: 50vh;
+      text-align: center;
+      color: #b6b5b5;
+    }
+  }
+</style>