fix：日常监测报告页面，工单完善

src/views/index-components/daily-index.vue

@@ -58,6 +58,8 @@ export default {
       roadNum: 0,
       // 病害趋势echart数据
       diseaseChart: [],
+      // 道路分布echart数据
+      roadChart: [],
     };
   },
   created() {

src/views/index-components/disease-index.vue

@@ -155,9 +155,7 @@ export default {
         if (code === 200) {
           this.total = data.total;
           this.newTotal = data.today;
-          let all = 0;
           this.distributionList = data.data.map((item) => {
-            all += item.value;
             return {
               value: item.value,
               name: item.label,

src/views/index-components/road-index.vue

@@ -46,7 +46,7 @@
 import * as echarts from "echarts";
 // 接口
 import { getEquipment, getEquipmentLog } from "@/api/xj/index/index";
-import fssmScroll from "../../components/scroll/fssm-scroll.vue";
+import fssmScroll from "@/components/scroll/fssm-scroll.vue";
 export default {
   components: { fssmScroll },
   name: "RoadIndex",

src/views/xj/document/maintenance-notice/index.vue

@@ -53,20 +53,6 @@
           clearable
         ></el-cascader>
       </el-form-item>
-      <el-form-item label="病害状态" prop="state">
-        <el-select
-          v-model="noticeForm.state"
-          placeholder="请选择病害状态"
-          clearable
-        >
-          <el-option
-            v-for="item in defectStatus"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="上下行" prop="inspectDirection">
         <el-select
           v-model="noticeForm.inspectDirection"
@@ -146,7 +132,7 @@
       </el-form-item>
     </el-form>
     <!-- 导航栏 -->
-    <el-tabs v-model="activeName" @tab-click="getList">
+    <el-tabs v-model="activeName" @tab-click="resetQuery">
       <el-tab-pane
         v-for="(item, index) in editableTabs"
         :key="`tabs-${index}`"
@@ -350,8 +336,6 @@ export default {
       noticeForm: {
         // 道路名称
         segmentName: "",
-        // 病害状态
-        state: "",
         // 上下行
         inspectDirection: "",
         // 公里桩
@@ -405,8 +389,6 @@ export default {
       segmentList: [],
       // 病害类型下拉级联
       tableDefect: [],
-      // 病害状态
-      defectStatus: [],
       // 导航栏选择绑定
       activeName: "已完成",
       // 导航栏列表
@@ -448,7 +430,6 @@ export default {
     this.getList();
     this.getSegmentList();
     this.getDefectData();
-    this.getDefectStatusList();
   },
   methods: {
     /**
@@ -476,15 +457,12 @@ export default {
     },
 
     /**
-     * @description: 获取病害状态下拉数据
+     * @description: 切换导航栏
+     * @param {*}
      * @return {*}
      */
-    getDefectStatusList() {
+    changeTab() {
-      getDefectStatus().then(({ code, data }) => {
+      this.resetQuery();
-        if (code === 200) {
-          this.defectStatus = data;
-        }
-      });
     },
 
     /**
@@ -495,7 +473,18 @@ export default {
     handleQuery() {
       this.$refs.noticeForm.validate((valid) => {
         if (valid) {
-          this.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
+          const data = {
+            ...this.noticeForm,
+            classType: this.paramsDefectType ? this.paramsDefectType[0] : "",
+            defectType: this.paramsDefectType
+              ? this.paramsDefectType.length > 1
+                ? this.paramsDefectType[1]
+                : ""
+              : "",
+            startTime: this.dateTime ? this.dateTime[0] : "",
+            endTime: this.dateTime ? this.dateTime[1] : "",
+          };
+          this.searchForm = JSON.parse(JSON.stringify(data));
           this.pagination.page = 1;
           this.getList();
         }
@@ -508,11 +497,10 @@ export default {
      * @return {*}
      */
     resetQuery() {
+      this.$refs.noticeForm.resetFields();
       this.noticeForm = {
         // 道路名称
         segmentName: "",
-        // 病害状态
-        state: "",
         // 上下行
         inspectDirection: "",
         // 公里桩
@@ -525,6 +513,8 @@ export default {
         minArea: undefined,
         maxArea: undefined,
       };
+      this.paramsDefectType = [];
+      this.dateTime = [];
       this.searchForm = {};
       this.pagination.page = 1;
       this.getList();
@@ -540,8 +530,6 @@ export default {
         ...this.searchForm,
         ...this.pagination,
         maintenanceStatus: this.activeName,
-        startTime: this.dateTime ? this.dateTime[0] : "",
-        endTime: this.dateTime ? this.dateTime[1] : "",
       };
       getMaintenanceNoticeList(data)
         .then(({ code, rows, total }) => {

src/views/xj/inspection-report/daily-monitoring/components/four-content.vue

@@ -0,0 +1,293 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-18 09:13:34
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-18 09:13:42
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\four-content.vue
+ * @Description: 巡检报告-日常监测报告-路况评定
+-->
+<template>
+  <div class="four-content">
+    <div class="title">
+      <span>路况评定</span>
+    </div>
+    <div class="traffic-chart" ref="trafficChart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+// 接口
+import { getRoadConditionLog } from "@/api/xj/index/index";
+export default {
+  name: "FourContent",
+  data() {
+    return {};
+  },
+  created() {
+    this.getLogData();
+  },
+  methods: {
+    /**
+     * @description: 获取echart数据
+     * @param {*}
+     * @return {*}
+     */
+    getLogData() {
+      getRoadConditionLog().then(({ code, data }) => {
+        if (code === 200) {
+          this.trafficEchartData = data;
+          this.$nextTick(() => {
+            this.drawTrafficChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制柱状图
+     * @param {*}
+     * @return {*}
+     */
+    drawTrafficChart() {
+      if (this.$refs.trafficChart) {
+        const xData = this.trafficEchartData.map((item) => {
+          return item.name;
+        });
+        const y1Data = this.trafficEchartData.map((item) => {
+          return item.road;
+        });
+        const y2Data = this.trafficEchartData.map((item) => {
+          return item.event;
+        });
+        const y3Data = this.trafficEchartData.map((item) => {
+          return item.bridge;
+        });
+        const y4Data = this.trafficEchartData.map((item) => {
+          return item.green;
+        });
+        const chart = echarts.init(this.$refs.trafficChart);
+        chart.setOption({
+          color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
+          title: [
+            // 中心比例
+            {
+              text: "病害趋势",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          legend: {
+            show: true,
+            right: "3%",
+          },
+          tooltip: {
+            trigger: "axis",
+            padding: [5, 10, 5, 10],
+          },
+          grid: {
+            top: "20%",
+            left: "7%",
+            right: "4%",
+            bottom: "12%",
+          },
+          xAxis: [
+            {
+              data: xData,
+              type: "category",
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: false,
+              },
+              boundaryGap: false,
+            },
+          ],
+          yAxis: [
+            {
+              nameTextStyle: {
+                color: "#fff",
+                fontSize: 12,
+              },
+              name: "",
+              type: "value",
+              axisLabel: {
+                show: true,
+                color: "#9eaaba",
+              },
+              axisLine: { show: false },
+              splitLine: { show: true },
+            },
+          ],
+          series: [
+            {
+              name: "路面病害数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#388BD8",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y1Data,
+            },
+            {
+              name: "交安病害数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#04DAD7",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y3Data,
+            },
+            {
+              name: "桥隧病害数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#F8A74E",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y4Data,
+            },
+            {
+              name: "绿化问题数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#8448FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: y2Data,
+            },
+          ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.four-content {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 3rem;
+    background: url("~@/assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
+  }
+
+  .traffic-chart {
+    width: 100%;
+    height: 90%;
+  }
+}
+</style>

src/views/xj/inspection-report/daily-monitoring/components/one-content.vue

@@ -0,0 +1,243 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-18 09:13:34
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-18 09:13:42
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\one-content.vue
+ * @Description: 巡检报告-日常监测报告-今日巡查
+-->
+<template>
+  <div class="one-content">
+    <div class="title">
+      <span>今日巡查</span>
+    </div>
+    <div class="day-echart" ref="dayChart"></div>
+  </div>
+</template>
+
+<script>
+import { getTaskToday } from "@/api/xj/index/index";
+import * as echarts from "echarts";
+export default {
+  name: "OneContent",
+  data() {
+    return {
+      // 病害趋势echart数据
+      diseaseChart: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /**
+     * @description: 获取数据
+     * @param {*}
+     * @return {*}
+     */
+    getData() {
+      getTaskToday().then(({ code, data }) => {
+        if (code === 200) {
+          this.diseaseChart = data.xclcbhqs;
+          this.$nextTick(() => {
+            this.drawTrendChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制病害趋势柱状图
+     * @param {*}
+     * @return {*}
+     */
+    drawTrendChart() {
+      const xData = this.diseaseChart.map((item) => {
+        return item.label;
+      });
+      const y1Data = this.diseaseChart.map((item) => {
+        return item.value;
+      });
+      const y2Data = this.diseaseChart.map((item) => {
+        return item.long;
+      });
+      if (this.$refs.dayChart) {
+        const chart = echarts.init(this.$refs.dayChart);
+        chart.setOption({
+          color: ["#388BD8", "#FFC400"],
+          title: [
+            // 中心比例
+            {
+              text: "巡查里程-病害趋势",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            right: "5%",
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: xData,
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/h"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/W㎡"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: false,
+              },
+            },
+          ],
+          series: [
+            {
+              type: "bar",
+              barWidth: 10,
+              name: "累计病害",
+              data: y1Data,
+            },
+            {
+              type: "line",
+              symbolSize: 5,
+              name: "巡查里程",
+              smooth: 1,
+              data: y2Data,
+              yAxisIndex: 1,
+            },
+          ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.one-content {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 3rem;
+    background: url("~@/assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
+  }
+}
+
+.day-echart {
+  height: 90%;
+  width: 100%;
+}
+</style>

src/views/xj/inspection-report/daily-monitoring/components/three-content.vue

@@ -0,0 +1,234 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-18 09:13:34
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-18 09:13:42
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\three-content.vue
+ * @Description: 巡检报告-日常监测报告-公路资产
+-->
+<template>
+  <div class="three-content">
+    <div class="title">
+      <span>公路资产</span>
+    </div>
+    <div class="road-chart" ref="roadChart"></div>
+  </div>
+</template>
+
+<script>
+import { getEquipmentLog } from "@/api/xj/index/index";
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+import * as echarts from "echarts";
+export default {
+  components: { FssmScroll },
+  name: "ThreeContent",
+  data() {
+    return {};
+  },
+  created() {
+    this.getBottomData();
+  },
+  methods: {
+    /**
+     * @description: 获取底部echart数据
+     * @param {*}
+     * @return {*}
+     */
+    getBottomData() {
+      getEquipmentLog().then(({ code, data }) => {
+        if (code === 200) {
+          this.roadChartData = data;
+          this.$nextTick(() => {
+            this.drawRoadChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制echart图
+     * @param {*}
+     * @return {*}
+     */
+    drawRoadChart() {
+      if (this.$refs.roadChart) {
+        const xData = this.roadChartData.map((item) => {
+          return item.label;
+        });
+        const y1Data = this.roadChartData.map((item) => {
+          return item.total;
+        });
+        const y2Data = this.roadChartData.map((item) => {
+          return item.value;
+        });
+        const chart = echarts.init(this.$refs.roadChart);
+        chart.setOption({
+          color: ["#388BD8", "#04DAD7"],
+          title: [
+            // 中心比例
+            {
+              text: "路产趋势",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            right: "5%",
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: xData,
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/h"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          series: [
+            {
+              name: "路产总数",
+              type: "bar",
+              barWidth: 20,
+              itemStyle: {
+                borderWidth: 1,
+                borderRadius: [3, 3, 0, 0],
+                color: "#388BD8",
+              },
+              data: y1Data,
+            },
+            {
+              name: "异常设施数量",
+              type: "bar",
+              barWidth: 20,
+              itemStyle: {
+                borderWidth: 1,
+                borderRadius: [3, 3, 0, 0],
+                color: "#38C8D8",
+              },
+              data: y2Data,
+            },
+          ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.three-content {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 3rem;
+    background: url("~@/assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
+  }
+
+  .road-chart {
+    width: 100%;
+    height: 90%;
+  }
+}
+</style>

src/views/xj/inspection-report/daily-monitoring/components/twe-content.vue

@@ -0,0 +1,285 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-18 09:13:34
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-18 09:13:42
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\twe-content.vue
+ * @Description: 巡检报告-日常监测报告-病害识别
+-->
+<template>
+  <div class="twe-content">
+    <div class="title">
+      <span>病害识别</span>
+    </div>
+    <div class="disease-echart">
+      <div class="disease-div" ref="diseaseChart"></div>
+      <div class="disease-legnd">
+        <fssm-scroll>
+          <div
+            class="legnd-div"
+            v-for="(item, index) in distributionList"
+            :key="`disease-${index}`"
+          >
+            <div class="name">
+              <span
+                class="index"
+                :style="{ backgroundColor: distributionColor[index] }"
+              ></span>
+              <span>{{ item.name }}</span>
+            </div>
+            <div class="rate">{{ item.rate }}</div>
+          </div>
+        </fssm-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTotalList } from "@/api/xj/index/index";
+import * as echarts from "echarts";
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+export default {
+  name: "TweContent",
+  components: {
+    FssmScroll,
+  },
+  data() {
+    return {
+      // 病害类型颜色盘
+      distributionColor: [
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
+        "#F6D566",
+        "#00B1FF",
+        "#62CFFF",
+        "#6A9BFF",
+        "#B38EFF",
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
+        "#F6D566",
+        "#00B1FF",
+        "#62CFFF",
+        "#6A9BFF",
+        "#B38EFF",
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
+      ],
+      // 病害类型分布数据
+      distributionList: [],
+    };
+  },
+  created() {
+    this.getBottomData();
+  },
+  methods: {
+    /**
+     * @description: 获取数据
+     * @param {*}
+     * @return {*}
+     */
+    getBottomData() {
+      getTotalList({ dateType: this.checkCycle }).then(({ code, data }) => {
+        if (code === 200) {
+          this.total = data.total;
+          this.newTotal = data.today;
+          this.distributionList = data.data.map((item) => {
+            return {
+              value: item.value,
+              name: item.label,
+              rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
+            };
+          });
+          this.$nextTick(() => {
+            this.drawDistributionChart();
+          });
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制病害类型分布图
+     * @param {*}
+     * @return {*}
+     */
+    drawDistributionChart() {
+      if (this.$refs.diseaseChart) {
+        const chart = echarts.init(this.$refs.diseaseChart);
+        chart.setOption({
+          color: this.distributionColor,
+          title: [
+            // 中心比例
+            {
+              text: "新增病害类型分布",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          series: [
+            {
+              type: "pie",
+              //   hoverAnimation: true,
+              minAngle: 1,
+              padAngle: 4,
+              hoverOffset: 0,
+              startAngle: 0, //起始角度
+              clockwise: false, //是否顺时针
+              radius: ["55%", "70%"],
+              center: ["50%", "56%"],
+              avoidLabelOverlap: false,
+              animationDuration: 3000,
+              emphasis: {
+                label: {
+                  formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
+                  show: true,
+                  fontSize: "30",
+                  fontWeight: "bold",
+                  rich: {
+                    a: {
+                      fontSize: 18,
+                      lineHeight: 18,
+                      color: "#000",
+                    },
+                    b: {
+                      color: "#000",
+                      fontSize: 16,
+                      lineHeight: 30,
+                    },
+                  },
+                },
+              },
+              label: {
+                show: false,
+                position: "center",
+                color: "rgba(13, 17, 29,0)",
+              },
+              labelLine: {
+                show: false,
+              },
+              data: this.distributionList,
+              zlevel: 30,
+            },
+            {
+              type: "pie",
+              radius: ["35%", "55%"],
+              center: ["50%", "56%"],
+              //   hoverAnimation: true,
+              hoverOffset: 0,
+              startAngle: 0, //起始角度
+              clockwise: false, //是否顺时针
+              padAngle: 4,
+              minAngle: 1,
+              animationDuration: 3000,
+              emphasis: { scale: false },
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: "#E4EDFD",
+              },
+              data: this.distributionList,
+              z: 1,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.twe-content {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 3rem;
+    background: url("~@/assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
+
+    span {
+      font-family: "DouYu";
+    }
+  }
+}
+
+.disease-echart {
+  height: 90%;
+  width: 100%;
+  display: flex;
+
+  > div {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    position: relative;
+    background-color: #ffffff;
+
+    .disease-div {
+      width: 30%;
+      height: 100%;
+    }
+
+  }
+  
+  .disease-legnd {
+    width: 70%;
+    height: 100%;
+    padding: 2.5rem 0;
+
+    .scroll-box {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .legnd-div {
+      width: 47%;
+      height: 2rem;
+      padding: 0 1rem;
+      margin: 0.2rem 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #f6f6fa;
+      border-radius: 0.2rem;
+
+      .name {
+        display: flex;
+        align-items: center;
+
+        .index {
+          width: 0.7rem;
+          height: 0.7rem;
+          display: inline-block;
+          margin-right: 0.5rem;
+          border-radius: 0.3rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/xj/inspection-report/daily-monitoring/index.vue

@@ -7,18 +7,86 @@
  * @Description: 巡检报告-日常监测报告
 -->
 <template>
-  <div class="content">日常监测报告</div>
+  <div class="content">
+    <div class="export">
+      <el-form
+        :model="dailyForm"
+        ref="dailyForm"
+        size="small"
+        :inline="true"
+        label-width="5rem"
+      >
+        <el-form-item label="道路名称" prop="segmentName">
+          <el-select
+            v-model="dailyForm.segmentName"
+            placeholder="请选择路段"
+            clearable
+          >
+            <el-option
+              v-for="item in segmentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <!-- <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+          > -->
+          <el-button type="primary" @click="exportReport" size="mini"
+            >导出报告</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="div-content">
+      <one-content></one-content>
+    </div>
+    <div class="div-content">
+      <twe-content></twe-content>
+    </div>
+    <div class="div-content">
+      <three-content></three-content>
+    </div>
+    <div class="div-content">
+      <four-content></four-content>
+    </div>
+  </div>
 </template>
 
 <script>
+import OneContent from "./components/one-content.vue";
+import TweContent from "./components/twe-content.vue";
+import ThreeContent from "./components/three-content.vue";
+import FourContent from "./components/four-content.vue";
 export default {
   name: "DailyMonitoring",
-  components: {},
+  components: { OneContent, TweContent, ThreeContent, FourContent },
   data() {
-    return {};
+    return {
+      dailyForm: {
+        segmentName: "",
+      },
+      // 选择分公司下拉数据
+      segmentList: [],
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    /**
+     * @description: 导出报告
+     * @return {*}
+     */
+    exportReport() {},
+  },
 };
 </script>
 
@@ -26,6 +94,22 @@ export default {
 .content {
   width: 100%;
   height: calc(100vh - 5.4rem);
-  padding: 1rem;
+  padding: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.export {
+  height: 5%;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+.div-content {
+  width: 49.5%;
+  height: 46%;
+  background: url("~@/assets/index/road-content.png") no-repeat;
+  background-size: 100% 100%;
 }
 </style>