图表

src/api/yg/yhxx.js

@@ -1,5 +1,21 @@
 import request from '@/utils/request'
 
+// 饼图
+export function getPie() {
+  return request({
+    url: '/yhxx/yhxx/getPie',
+    method: 'get',
+  })
+}
+
+// 柱状图图
+export function getHistogram() {
+  return request({
+    url: '/yhxx/yhxx/getHistogram',
+    method: 'get',
+  })
+}
+
 // 查询水闸隐患信息列表
 export function listYhxx(query) {
   return request({

src/views/safetyManage/declarationManage/sluice/declare/components/listPage/index.vue

@@ -194,8 +194,13 @@
             icon="el-icon-info"
             icon-color="green"
             :title="
-              scope.row.zxStatus == 1 ? scope.row.reason : '确定提交注销申请吗'
+              scope.row.zxStatus == 1
+                ? `意见：${scope.row.reason}`
+                : scope.row.zxStatus == 0
+                ? '注销申请中，请勿重复提交'
+                : '确定提交注销申请吗'
             "
+            :confirm-button-text="scope.row.zxStatus == 1 ? `重申` : '申请'"
             :style="{ marginLeft: '10px' }"
             @confirm="handleDelete(scope.row)"
           >
@@ -664,6 +669,7 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        adcd: [{ required: true, message: "请选择行政区划", trigger: "blur" }],
         wagaName: [
           { required: true, message: "水闸名称不能为空", trigger: "blur" },
         ],
@@ -1039,6 +1045,8 @@ export default {
                 this.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
+                // console.log(9999, this.$emit);
+                // this.$emit("chartEleGetData");
               }
             });
           }
@@ -1047,6 +1055,12 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
+      if (row.zxStatus == "0") {
+        this.$message({
+          message: "已提交注销申请，请勿重复提交",
+          type: "warning",
+        });
+      } else {
         const id = row.id;
         let form;
         getJbxx(id).then((res) => {
@@ -1059,6 +1073,7 @@ export default {
             }
           });
         });
+      }
 
       // const ids = row.id || this.ids;
       // if (ids) {

src/views/safetyManage/declarationManage/sluice/declare/index.vue

@@ -10,8 +10,8 @@
         {{ item.routeName }}
       </el-breadcrumb-item>
     </el-breadcrumb>
-    <dataCharts />
-    <listPage />
+    <dataCharts ref="dataCharts" />
+    <listPage :@chartEleGetData="chartEleGetData" />
   </div>
 </template>
 <script>
@@ -33,5 +33,10 @@ export default {
       ],
     };
   },
+  computed: {
+    chartEleGetData() {
+      return this.$refs.dataCharts?.getData;
+    },
+  },
 };
 </script>

src/views/safetyManage/responsiblePersonManage/sluice/dataCharts.vue

@@ -84,7 +84,7 @@ export default {
         title: {
           // text: "World Population",
         },
-        color: ["#38A0FF", "#4CCA73"],
+        color: ["#38A0FF", "#4CCA73", "#FBD437"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -127,15 +127,21 @@ export default {
 
         series: [
           {
-            name: "大坝管理责任人",
+            name: "政府部门责任人",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["0"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "主管部门责任人",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["1"]),
             barMaxWidth: "10%",
           },
           {
-            name: "防汛责任人",
+            name: "管理单位责任人",
             type: "bar",
-            data: Object.values(this.barChartData).map((res) => res["0"]),
+            data: Object.values(this.barChartData).map((res) => res["2"]),
             barMaxWidth: "10%",
           },
         ],

src/views/safetyManage/safeProduction/sluice/dataCharts.vue

@@ -1,9 +1,164 @@
 <template>
-  <div class="content"></div>
+  <div class="content">
+    <div ref="pieEle" style="width: 30%; height: 100%"></div>
+    <div ref="barEle" style="width: 70%; height: 100%"></div>
+  </div>
 </template>
+<script>
+import { getPie, getHistogram } from "@/api/yg/yhxx";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      pieChartData: [],
+      barChartData: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    async getData() {
+      const res1 = await getPie();
+      const res2 = await getHistogram();
+      for (let key in res1[0]) {
+        this.pieChartData.push({ value: res1[0][key], name: key });
+      }
+      // for (let key in res1[0]) {
+      //   this.barChartData.push({ value: res1[0][key], name: key });
+      // }
+      this.barChartData = res2;
+      this.pieInit();
+      this.barInit();
+      console.log("pieChartData", this.pieChartData);
+      console.log("barChartData", this.barChartData);
+    },
+    pieInit() {
+      let chartDom = this.$refs.pieEle;
+      let myChart = echarts.init(chartDom);
+      let option = {
+        title: {
+          // text: "Referer of a Website",
+          // subtext: "Fake Data",
+          left: "center",
+        },
+        color: ["#6DD48C", "#5DB1FF", "#FBD437", "#36CBCB"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "2%",
+          icon: "circle",
+        },
+        series: [
+          {
+            // name: "水闸占比",
+            type: "pie",
+            radius: "65%",
+            data: this.pieChartData,
+            label: {
+              formatter: (params) => {
+                // console.log(11, params);
+                return `${params.name}: ${params.value}`;
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    barInit() {
+      Object.values(this.barChartData);
+      let chartDom = this.$refs.barEle;
+      let myChart = echarts.init(chartDom);
+      let option = {
+        title: {
+          // text: "World Population",
+        },
+        color: ["#38A0FF", "#4CCA73"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "2%",
+          icon: "circle",
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "12%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: Object.keys(this.barChartData),
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            //网格线
+            show: true, //是否显示
+            lineStyle: {
+              //网格线样式
+              // color: "#0735a2", //网格线颜色
+              // width: 1, //网格线的加粗程度
+              type: "dashed", //网格线类型
+            },
+          },
+          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
+          max: function (value) {
+            return value.max + Math.ceil(0.2 * value.max);
+          },
+          // boundaryGap: [0, 1],
+        },
+
+        series: [
+          {
+            name: "已解决",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["1"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "未解决",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["0"]),
+            barMaxWidth: "10%",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
 <style lang="scss" scoped>
 .content {
   height: 300px;
-  border: 1px solid #000;
+  // border: 1px solid #000;
+  background: #fff;
+  box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2);
+  margin-bottom: 10px;
+  display: flex;
 }
 </style>