概况统计完成

src/api/dike/index.js

@@ -911,3 +911,22 @@ export function getDangerTaskTotalData(data){
     data
   })
 }
+
+/*                              概况统计                                          */
+
+// 获取巡查情况概览统计
+export function postYhStatisticsSituation(data) {
+  return request({
+    url: `/run/df/yh/statistics/situation`,
+    method: 'post',
+    data
+  })
+}
+// 获取隐患情况概览统计
+export function postYhStatisticsHiddenDanger(data){
+  return request({
+    url: `/run/df/yh/statistics/hiddenDanger`,
+    method: 'post',
+    data
+  })
+}

src/api/sluice/index.js

@@ -954,3 +954,21 @@ export function delRunSzYhRecord(data){
     method: 'delete'
   })
 }
+/*                              概况统计                                          */
+
+// 获取巡查情况概览统计
+export function postDfStatisticsSituation(data) {
+  return request({
+    url: `/run/sz/record/statistics`,
+    method: 'post',
+    data
+  })
+}
+// 获取隐患情况概览统计
+export function postDfStatisticsHiddenDanger(data){
+  return request({
+    url: `/run/sz/record/hiddenDanger`,
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -73,7 +73,12 @@ export const constantRoutes = [
         component: (resolve) => require(['@/views/welcome/index'], resolve),
         // name: '首页',
         // meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-      }
+      },
+      {
+        path: '/overviewStatistics',
+        component: (resolve) => require(['@/views/dike/runManage/enginerring/overviewStatistics/index.vue'], resolve),
+        hidden: true
+      },
     ]
   },
   // {

src/views/dike/runManage/enginerring/overviewStatistics/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="body slider-right">
+
+    <div class="top-title">巡查统计分析</div>
+    <div class="table-box slider-right-body">
+      <div class="title mb-8">责任人巡查情况概览</div>
+
+      <div class="search-item flex items-center mb-8">
+        <span class="search-label">巡查周期</span>
+        <el-date-picker
+          clearable
+          size="small"
+          class="ml-10"
+          v-model="paramsData.personResponsibleArr"
+          @change="getPersonResponsible"
+          type="daterange"
+          placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+      <div ref="personResponsible" class="personResponsible mb-8"></div>
+      <div class="title mb-8">巡查隐患概览</div>
+
+      <div class="search-form flex flex-wrap mb-8">
+        <div class="search-item flex items-center mr-8">
+          <span class="search-label">巡查周期</span>
+          <el-date-picker
+            clearable
+            size="small"
+            class="ml-10"
+            v-model="paramsData.hiddenDangerArr"
+            @change="gethiddenDanger"
+            type="daterange"
+            placeholder="开始日期"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </div>
+
+        <div class="search-item flex items-center mr-8">
+          <span class="search-label">行政区划</span>
+          <el-cascader
+            class="ml-10 search-input"
+            ref="cascader"
+            @change="gethiddenDanger"
+            v-model="paramsData.adcd"
+            :props="areasOptionProps"
+            placeholder="请选择行政区划"
+            clearable
+            size="small"
+          >
+          </el-cascader>
+        </div>
+      </div>
+      <div class="cardList">
+        <div class="total card">
+          <div class="header">堤防数量(段)</div>
+          <div class="content">{{  hiddenDangerData.dfNumber }}</div>
+        </div>
+        <div class="major card">
+          <div class="header">隐患数量(个)</div>
+          <div class="content">{{  hiddenDangerData.yhNumber }}</div>
+        </div>
+        <div class="handle card">
+          <div class="header">处理数量(个)</div>
+          <div class="content">{{  hiddenDangerData.czNumber }}</div>
+        </div>
+      </div>
+      <div ref="hiddenDanger" class="hiddenDanger"></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { cascaderLazyLoad } from "@/utils/elUtils";
+
+import {
+  postYhStatisticsSituation,
+  postYhStatisticsHiddenDanger,
+} from "@/api/dike";
+export default {
+  data () {
+    return {
+      personTypeOptions: '',
+      areasOptionProps: {
+        emitPath: false,
+        checkStrictly: true, //选择任意一级
+        expandTrigger: "hover",
+        lazy: true,
+        lazyLoad: cascaderLazyLoad,
+      },
+      paramsData: {
+        personResponsibleArr: [],
+        hiddenDangerArr: [],
+        adcd: ''
+      },
+      personResponsibleData: {
+        city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
+        administration: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50],
+        technology: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100],
+        patrol: [150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150]
+      },
+      hiddenDangerData: {
+        czNumber: 0,
+        dfNumber: 0,
+        yhNumber: 0,
+        city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
+        hiddenDangerNumber: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50],
+        handleNumber: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100]
+      }
+    }
+  },
+  created() {
+    this.getDicts("person_type").then((response) => {
+      this.personTypeOptions = response.data;
+    });
+  },
+  mounted() {
+    this.getPersonResponsible()
+    this.gethiddenDanger()
+  },
+  methods: {
+    gethiddenDanger() {
+      const node = this.$refs.cascader.getCheckedNodes()
+      postYhStatisticsHiddenDanger({
+        adcd: this.paramsData.adcd,
+        districtLevelFlag: node[0] && node[0].level === 3 ? 1 : 0,
+        patrolStart: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[0] : '',
+        patrolEnd: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[1] : ''
+      }).then((res) => {
+        this.hiddenDanger(res)
+      })
+    },
+    getPersonResponsible() {
+      postYhStatisticsSituation({
+        patrolStart: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[0] : '',
+        patrolEnd: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[1] : ''
+      }).then((res) => {
+        this.personResponsibleChart(res)
+      })
+    },
+    personResponsibleChart(res) {
+      this.personResponsibleData.city = res.data.xaxis
+      const legend = this.personTypeOptions.map(item => {
+        return item.dictLabel
+      })
+      const series = this.personTypeOptions.map(person => {
+        const list = []
+        console.log(res.data)
+        res.data.yaxis.forEach(item => {
+          let count = 0
+          item.series.forEach(sub => {
+            console.log(sub.dutyHolderType)
+            if (sub.dutyHolderType == person.dictValue) {
+              count = sub.count
+            }
+          })
+          list.push(count)
+        })
+        return {
+          name: person.dictLabel,
+          barGap: 0,
+          barWidth: 10,
+          type: 'bar',
+          data: list || []
+        }
+      })
+      const chart = echarts.init(this.$refs.personResponsible)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: legend,
+          right: 'left',
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '10%',
+          bottom: '10%',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.personResponsibleData.city,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '次数',
+            interval: 1
+          }
+        ],
+        series: series
+      };
+      chart.setOption(option);
+    },
+    hiddenDanger(res) {
+      this.hiddenDangerData.czNumber = res.data.czNumber
+      this.hiddenDangerData.yhNumber = res.data.yhNumber
+      this.hiddenDangerData.dfNumber = res.data.dfNumber
+      this.hiddenDangerData.city = res.data.xaxis
+      const hiddenDangerNumberList = []
+      const handleNumberList = []
+      res.data.yaxis.forEach(item => {
+        let hiddenDangerNumber = 0
+        let handleNumber = 0
+        item.series.forEach(sub => {
+          if (sub.type == '1') {
+            hiddenDangerNumber = sub.count
+          }
+          if (sub.type == '2') {
+            handleNumber = sub.count
+          }
+        })
+        hiddenDangerNumberList.push(hiddenDangerNumber)
+        handleNumberList.push(handleNumber)
+      })
+      this.hiddenDangerData.hiddenDangerNumber = hiddenDangerNumberList
+      this.hiddenDangerData.handleNumber = handleNumberList
+      const chart = echarts.init(this.$refs.hiddenDanger)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '10%',
+          bottom: '10%',
+        },
+        legend: {
+          data: ['隐患数量', '处理数量'],
+          right: 'left',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.hiddenDangerData.city,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            interval: 1,
+          },
+        ],
+        series: [
+          {
+            name: '隐患数量',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 10,
+            itemStyle: {
+              color: '#165DFF',
+            },
+            data: this.hiddenDangerData.hiddenDangerNumber
+          },
+          {
+            name: '处理数量',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 10,
+            itemStyle: {
+              color: '#28CE8E',
+            },
+            data: this.hiddenDangerData.handleNumber
+          },
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.body {
+  width: 100%;
+  padding-left: 24px;
+  .top-title {
+    height: 40px;
+    background-color: white;
+    display: flex;
+    padding-left: 16px;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    margin-top: 24px;
+    background-color: white;
+    .title {
+      padding-left: 20px;
+      position: relative;
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: "";
+        width: 4px;
+        height: 16px;
+        background-color: #1890ff;
+      }
+    }
+    .cardList {
+      display: flex;
+      justify-content: space-around;
+
+      .card {
+        width: 33%;
+        height: 102px;
+        border-radius: 8px;
+        padding: 16px 24px;
+        margin: 8px;
+        box-sizing: border-box;
+        border: 1px solid #9FD3CA;
+        background: linear-gradient(180deg, #EAFFFC 0%, rgba(222, 255, 250, 0) 100%), #FFFFFF;
+        .header {
+          font-size: 16px;
+        }
+        .content {
+          font-size: 32px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+          color: #31A08E;
+
+        }
+      }
+    }
+  }
+  .personResponsible {
+    width: 100%;
+    height: 295px;
+  }
+  .hiddenDanger {
+    width: 100%;
+    height: 290px;
+  }
+}
+</style>

src/views/sluice/runManage/enginerring/overviewStatistics/index.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="body slider-right">
+
+    <div class="top-title">巡查统计分析</div>
+    <div class="table-box slider-right-body">
+      <div class="title mb-8">责任人巡查情况概览</div>
+
+      <div class="search-item flex items-center mb-8">
+        <span class="search-label">巡查周期</span>
+        <el-date-picker
+          clearable
+          size="small"
+          class="ml-10"
+          v-model="paramsData.personResponsibleArr"
+          @change="getPersonResponsible"
+          type="daterange"
+          placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+      <div ref="personResponsible" class="personResponsible mb-8"></div>
+      <div class="title mb-8">巡查隐患概览</div>
+
+      <div class="search-form flex flex-wrap mb-8">
+        <div class="search-item flex items-center mr-8">
+          <span class="search-label">巡查周期</span>
+          <el-date-picker
+            clearable
+            size="small"
+            class="ml-10"
+            v-model="paramsData.hiddenDangerArr"
+            @change="gethiddenDanger"
+            type="daterange"
+            placeholder="开始日期"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </div>
+
+        <div class="search-item flex items-center mr-8">
+          <span class="search-label">行政区划</span>
+          <el-cascader
+            class="ml-10 search-input"
+            ref="cascader"
+            @change="gethiddenDanger"
+            v-model="paramsData.adcd"
+            :props="areasOptionProps"
+            placeholder="请选择行政区划"
+            clearable
+            size="small"
+          >
+          </el-cascader>
+        </div>
+      </div>
+      <div class="cardList">
+        <div class="total card">
+          <div class="header">堤防数量(段)</div>
+          <div class="content">{{  hiddenDangerData.dfNumber }}</div>
+        </div>
+        <div class="major card">
+          <div class="header">隐患数量(个)</div>
+          <div class="content">{{  hiddenDangerData.yhNumber }}</div>
+        </div>
+        <div class="handle card">
+          <div class="header">处理数量(个)</div>
+          <div class="content">{{  hiddenDangerData.czNumber }}</div>
+        </div>
+      </div>
+      <div ref="hiddenDanger" class="hiddenDanger"></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { cascaderLazyLoad } from "@/utils/elUtils";
+
+import {
+  postDfStatisticsSituation,
+  postDfStatisticsHiddenDanger,
+} from "@/api/sluice";
+import {postYhStatisticsHiddenDanger} from "@/api/dike";
+export default {
+  data () {
+    return {
+      personTypeOptions: '',
+      areasOptionProps: {
+        emitPath: false,
+        checkStrictly: true, //选择任意一级
+        expandTrigger: "hover",
+        lazy: true,
+        lazyLoad: cascaderLazyLoad,
+      },
+      paramsData: {
+        personResponsibleArr: [],
+        hiddenDangerArr: [],
+        adcd: ''
+      },
+      personResponsibleData: {
+        city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
+        administration: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50],
+        technology: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100],
+        patrol: [150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150]
+      },
+      hiddenDangerData: {
+        czNumber: 0,
+        dfNumber: 0,
+        yhNumber: 0,
+        city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
+        hiddenDangerNumber: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50],
+        handleNumber: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100]
+      }
+    }
+  },
+  created() {
+    this.getDicts("person_type").then((response) => {
+      this.personTypeOptions = response.data;
+    });
+  },
+  mounted() {
+    this.getPersonResponsible()
+    this.gethiddenDanger()
+  },
+  methods: {
+    gethiddenDanger() {
+      const node = this.$refs.cascader.getCheckedNodes()
+      postYhStatisticsHiddenDanger({
+        adcd: this.paramsData.adcd,
+        districtLevelFlag: node[0] && node[0].level === 3 ? 1 : 0,
+        patrolStart: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[0] : '',
+        patrolEnd: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[1] : ''
+      }).then((res) => {
+        this.hiddenDanger(res)
+      })
+    },
+    getPersonResponsible() {
+      console.log(this.paramsData)
+      postDfStatisticsSituation({
+        patrolStart: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[0] : '',
+        patrolEnd: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[1] : ''
+      }).then((res) => {
+        this.personResponsibleChart(res)
+      })
+    },
+    personResponsibleChart(res) {
+      this.personResponsibleData.city = res.data.xaxis
+      const legend = this.personTypeOptions.map(item => {
+        return item.dictLabel
+      })
+      const series = this.personTypeOptions.map(person => {
+        const list = []
+        res.data.yaxis.forEach(item => {
+          let count = 0
+          item.series.forEach(sub => {
+            if (sub.dutyHolderType == person.dictValue) {
+              count = sub.count
+            }
+          })
+          list.push(count)
+        })
+        return {
+          name: person.dictLabel,
+          barGap: 0,
+          barWidth: 10,
+          type: 'bar',
+          data: list || []
+        }
+      })
+      const chart = echarts.init(this.$refs.personResponsible)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: legend,
+          right: 'left',
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '10%',
+          bottom: '10%',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.personResponsibleData.city,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '次数',
+            interval: 1
+          }
+        ],
+        series: series
+      };
+      chart.setOption(option);
+    },
+    hiddenDanger(res) {
+      this.hiddenDangerData.czNumber = res.data.czNumber
+      this.hiddenDangerData.yhNumber = res.data.yhNumber
+      this.hiddenDangerData.dfNumber = res.data.dfNumber
+      this.hiddenDangerData.city = res.data.xaxis
+      const hiddenDangerNumberList = []
+      const handleNumberList = []
+      res.data.yaxis.forEach(item => {
+        let hiddenDangerNumber = 0
+        let handleNumber = 0
+        item.series.forEach(sub => {
+          if (sub.type == '1') {
+            hiddenDangerNumber = sub.count
+          }
+          if (sub.type == '2') {
+            handleNumber = sub.count
+          }
+        })
+        hiddenDangerNumberList.push(hiddenDangerNumber)
+        handleNumberList.push(handleNumber)
+      })
+      this.hiddenDangerData.hiddenDangerNumber = hiddenDangerNumberList
+      this.hiddenDangerData.handleNumber = handleNumberList
+      const chart = echarts.init(this.$refs.hiddenDanger)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '10%',
+          bottom: '10%',
+        },
+        legend: {
+          data: ['隐患数量', '处理数量'],
+          right: 'left',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.hiddenDangerData.city,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            interval: 1,
+          },
+        ],
+        series: [
+          {
+            name: '隐患数量',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 10,
+            itemStyle: {
+              color: '#165DFF',
+            },
+            data: this.hiddenDangerData.hiddenDangerNumber
+          },
+          {
+            name: '处理数量',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 10,
+            itemStyle: {
+              color: '#28CE8E',
+            },
+            data: this.hiddenDangerData.handleNumber
+          },
+        ]
+      };
+      chart.setOption(option);
+    },
+    handleChangeQuery() {
+      this.initData();
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.body {
+  width: 100%;
+  padding-left: 24px;
+  .top-title {
+    height: 40px;
+    background-color: white;
+    display: flex;
+    padding-left: 16px;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    margin-top: 24px;
+    background-color: white;
+    .title {
+      padding-left: 20px;
+      position: relative;
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: "";
+        width: 4px;
+        height: 16px;
+        background-color: #1890ff;
+      }
+    }
+    .cardList {
+      display: flex;
+      justify-content: space-around;
+
+      .card {
+        width: 33%;
+        height: 102px;
+        border-radius: 8px;
+        padding: 16px 24px;
+        margin: 8px;
+        box-sizing: border-box;
+        border: 1px solid #9FD3CA;
+        background: linear-gradient(180deg, #EAFFFC 0%, rgba(222, 255, 250, 0) 100%), #FFFFFF;
+        .header {
+          font-size: 16px;
+        }
+        .content {
+          font-size: 32px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+          color: #31A08E;
+
+        }
+      }
+    }
+  }
+  .personResponsible {
+    width: 100%;
+    height: 295px;
+  }
+  .hiddenDanger {
+    width: 100%;
+    height: 290px;
+  }
+}
+</style>

vue.config.js

@@ -75,7 +75,7 @@ module.exports = {
         // target: "http://shuili-admin.product.dev.com:30115",
         // target: 'http://172.16.34.59:18082',
         // target: "http://172.16.34.27:18082",
-        target: "http://127.0.0.1:18082",
+        target: "http://shuili.product.dev.com:30115",
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "/tianhui-admin-web",