统计展示

src/api/backend/statistics.js

@@ -6,4 +6,18 @@ export function getDdlist() {
       method: "get",
     });
   }
+  export function getPoliceId(data) {
+    return request({
+      url: '/backend/org/page2',
+      method: 'post',
+      data: data
+    })
+  }
+  // 发现隐患-整改隐患数
+  export function tongjiBroad(ids) {
+    return request({
+      url: '/backend/tongji-broad/page',
+      method: "get",
+    })
+  }
   

src/styles/index.scss

@@ -1,149 +1,169 @@
-$editorTabsborderColor: #121315;
-body,
-html {
-  margin: 0;
-  padding: 0;
-  background: #fff;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
-}
-
-input,
-textarea {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
-}
-
-.editor-tabs {
-  background: $editorTabsborderColor;
-  .el-tabs__header {
-    margin: 0;
-    border-bottom-color: $editorTabsborderColor;
-    .el-tabs__nav {
-      border-color: $editorTabsborderColor;
-    }
-  }
-  .el-tabs__item {
-    height: 32px;
-    line-height: 32px;
-    color: #888a8e;
-    border-left: 1px solid $editorTabsborderColor !important;
-    background: #363636;
-    margin-right: 5px;
-    user-select: none;
-  }
-  .el-tabs__item.is-active {
-    background: #1e1e1e;
-    border-bottom-color: #1e1e1e !important;
-    color: #fff;
-  }
-  .el-icon-edit {
-    color: #f1fa8c;
-  }
-  .el-icon-document {
-    color: #a95812;
-  }
-  :focus.is-active.is-focus:not(:active) {
-    box-shadow: none;
-    border-radius: 0;
-  }
-}
-
-// home
-.right-scrollbar {
-  .el-scrollbar__view {
-    padding: 12px 18px 15px 15px;
-  }
-}
-.el-scrollbar__wrap {
-  box-sizing: border-box;
-  overflow-x: hidden !important;
-  margin-bottom: 0 !important;
-}
-.center-tabs {
-  .el-tabs__header {
-    margin-bottom: 0 !important;
-  }
-  .el-tabs__item {
-    width: 50%;
-    text-align: center;
-  }
-  .el-tabs__nav {
-    width: 100%;
-  }
-}
-.reg-item {
-  padding: 12px 6px;
-  background: #f8f8f8;
-  position: relative;
-  border-radius: 4px;
-  .close-btn {
-    position: absolute;
-    right: -6px;
-    top: -6px;
-    display: block;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    color: #fff;
-    text-align: center;
-    z-index: 1;
-    cursor: pointer;
-    font-size: 12px;
-    &:hover {
-      background: rgba(210, 23, 23, 0.5);
-    }
-  }
-  & + .reg-item {
-    margin-top: 18px;
-  }
-}
-.action-bar {
-  & .el-button + .el-button {
-    margin-left: 15px;
-  }
-  & i {
-    font-size: 20px;
-    vertical-align: middle;
-    position: relative;
-    top: -1px;
-  }
-}
-
-.custom-tree-node {
-  width: 100%;
-  font-size: 14px;
-  .node-operation {
-    float: right;
-  }
-  i[class*="el-icon"] + i[class*="el-icon"] {
-    margin-left: 6px;
-  }
-  .el-icon-plus {
-    color: #409eff;
-  }
-  .el-icon-delete {
-    color: #157a0c;
-  }
-}
-
-.el-scrollbar__view {
-  overflow-x: hidden;
-}
-
-.el-rate {
-  display: inline-block;
-  vertical-align: text-top;
-}
-.el-upload__tip {
-  line-height: 1.2;
-}
-
-.el-transfer-panel {
-  width: auto;
-}
+$editorTabsborderColor: #121315;
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+}
+
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+}
+
+.editor-tabs {
+  background: $editorTabsborderColor;
+  .el-tabs__header {
+    margin: 0;
+    border-bottom-color: $editorTabsborderColor;
+    .el-tabs__nav {
+      border-color: $editorTabsborderColor;
+    }
+  }
+  .el-tabs__item {
+    height: 32px;
+    line-height: 32px;
+    color: #888a8e;
+    border-left: 1px solid $editorTabsborderColor !important;
+    background: #363636;
+    margin-right: 5px;
+    user-select: none;
+  }
+  .el-tabs__item.is-active {
+    background: #1e1e1e;
+    border-bottom-color: #1e1e1e !important;
+    color: #fff;
+  }
+  .el-icon-edit {
+    color: #f1fa8c;
+  }
+  .el-icon-document {
+    color: #a95812;
+  }
+  :focus.is-active.is-focus:not(:active) {
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+// home
+.right-scrollbar {
+  .el-scrollbar__view {
+    padding: 12px 18px 15px 15px;
+  }
+}
+.el-scrollbar__wrap {
+  box-sizing: border-box;
+  overflow-x: hidden !important;
+  margin-bottom: 0 !important;
+}
+.center-tabs {
+  .el-tabs__header {
+    margin-bottom: 0 !important;
+  }
+  .el-tabs__item {
+    width: 50%;
+    text-align: center;
+  }
+  .el-tabs__nav {
+    width: 100%;
+  }
+}
+.reg-item {
+  padding: 12px 6px;
+  background: #f8f8f8;
+  position: relative;
+  border-radius: 4px;
+  .close-btn {
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+    cursor: pointer;
+    font-size: 12px;
+    &:hover {
+      background: rgba(210, 23, 23, 0.5);
+    }
+  }
+  & + .reg-item {
+    margin-top: 18px;
+  }
+}
+.action-bar {
+  & .el-button + .el-button {
+    margin-left: 15px;
+  }
+  & i {
+    font-size: 20px;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+  }
+}
+
+.custom-tree-node {
+  width: 100%;
+  font-size: 14px;
+  .node-operation {
+    float: right;
+  }
+  i[class*="el-icon"] + i[class*="el-icon"] {
+    margin-left: 6px;
+  }
+  .el-icon-plus {
+    color: #409eff;
+  }
+  .el-icon-delete {
+    color: #157a0c;
+  }
+}
+
+.el-scrollbar__view {
+  overflow-x: hidden;
+}
+
+.el-rate {
+  display: inline-block;
+  vertical-align: text-top;
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+.el-transfer-panel {
+  width: auto;
+}
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-color: #d9d9d9;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #bfbfbf;
+}
+::-webkit-scrollbar-track {
+  background: #f0f2f5;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

src/views/backend/statistics/index.vue

@@ -35,6 +35,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app-container {
+  background:#EDEFF2;
+  min-height: calc(100vh - 84px);
+}
 .tabs {
   margin-bottom: 12px;
 }

src/views/backend/statisticsFire/component/barChart.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    :class="className"
+    :style="{
+      height: height,
+      width: width,
+      background: background,
+      marginRight: '16px',
+    }"
+  >
+    <div ref="chart" class="chart"></div>
+  </div>
+</template>
+  
+  <script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+
+const animationDuration = 6000;
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "464px",
+    },
+    background: {
+      type: String,
+      default: "#fff",
+    },
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.chart = echarts.init(this.$refs.chart, "macarons");
+    this.chart.setOption({
+      title: {
+        text: "监督员质态统计",
+        textStyle: {
+          color: '#0F2B4C'
+        },
+        top:10,
+        left:5
+      },
+      xAxis: {
+        type: "category",
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        axisLabel: {
+          rotate: 45, // 设置标签倾斜角度，单位为度
+        },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+          type: "bar",
+          barWidth: "16px",
+          itemStyle: {
+            color: "#0147EB",
+          },
+        },
+      ],
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+};
+</script>
+  
+  <style lang="scss">
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/backend/statisticsFire/component/unitActive.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    :class="className"
+    :style="{ height: height, width: width, background: background }"
+  >
+    <div ref="chart" class="chart"></div>
+  </div>
+</template>
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+
+const animationDuration = 3000;
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    background: {
+      type: String,
+      default: "#fff",
+    },
+    reportData: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {},
+  watch: {
+    reportData: function (newData, oldData) {
+      if (newData !== oldData) {
+        this.initChart();
+      }
+    },
+  },
+  methods: {
+    initChart() {
+      console.log(this.reportData, "-================");
+      this.chart = echarts.init(this.$refs.chart, "macarons");
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        xAxis: {
+          type: "category",
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        axisLabel: {
+          rotate: 45, // 设置标签倾斜角度，单位为度
+        },
+        },
+
+        yAxis: {
+          type: "value",
+        },
+        series: [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+          type: "bar",
+          barWidth: "16px",
+          itemStyle: {
+            color: "#0147EB",
+          },
+        },
+        ],
+      });
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+};
+</script>
+<style>
+.chart {
+  /* Disable pointer events on chart container */
+  pointer-events: none;
+}
+
+/* Enable pointer events for all child elements */
+.chart * {
+  pointer-events: auto;
+}
+</style>

src/views/backend/statisticsFire/component/unitbartChart.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    :class="className"
+    :style="{
+      height: height,
+      width: width,
+      background: background,
+    }"
+  >
+    <div ref="chart" class="chart"></div>
+  </div>
+</template>
+    
+    <script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+
+const animationDuration = 6000;
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "464px",
+    },
+    background: {
+      type: String,
+      default: "#fff",
+    },
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.chart = echarts.init(this.$refs.chart, "macarons");
+    this.chart.setOption({
+        title: {
+        text: "监督员分管单位统计",
+        textStyle: {
+          color: '#0F2B4C',
+          top:20
+        },
+        top:10,
+        left:5
+      },
+      xAxis: {
+        type: "category",
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        axisLabel: {
+          rotate: 45, // 设置标签倾斜角度，单位为度
+        },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+          type: "bar",
+          barWidth: "16px",
+          itemStyle: {
+            color: "#01BCEB",
+          },
+        },
+      ],
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+};
+</script>
+    
+    <style lang="scss">
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/backend/statisticsFire/index.vue

@@ -1,85 +1,564 @@
 <template>
-    <div>
-        <el-tabs
-        type="border-card"
-        v-model.trim="selectedTab"
-        @tab-click="clickTab"
+  <div>
+    <el-tabs
+      type="border-card"
+      v-model.trim="selectedTab"
+      @tab-click="clickTab"
+    >
+      <el-tab-pane
+        :label="item.deptName"
+        v-for="(item, index) in brigade"
+        :key="index"
+        :name="item.id"
       >
-        <el-tab-pane
-          :label="item.deptName"
-          v-for="(item, index) in brigade"
-          :key="index"
-        >
-        </el-tab-pane>
-      </el-tabs>
-      <div class="nav-data" v-for="(item, index) in navData" :key="index">
-        <img :src="item.imgs" style="width: 60px; height: 60px" alt="" />
+      </el-tab-pane>
+    </el-tabs>
+    <div class="nav-data">
+      <div v-for="(item, index) in navData" :key="index" class="nav-data-item">
+        <img :src="item.imgs" alt="" class="nav-img" />
+        <div class="text">
+          <div>{{ item.name }}</div>
+          <div>{{ item.count }}</div>
+        </div>
       </div>
     </div>
-  </template>
+    <!-- 统计图 -->
+    <div class="chart">
+      <!-- 左侧版块 -->
+      <div class="left-chart">
+        <div class="first-line">
+          <bar-chart />
+          <unitbart-chart />
+        </div>
+        <div class="two-line">
+          <div v-for="(item, index) in scanCode" :key="index">
+            <div class="total">{{ item.count }}</div>
+            <div class="item-name">{{ item.name }}</div>
+          </div>
+        </div>
+        <div class="two-line three-line">
+          <div
+            v-for="(item, index) in threeChart"
+            :key="index"
+            style="color: #657398"
+          >
+            <img :src="item.imgs" alt="" class="nav-img" />
+            <div>{{ item.name }}</div>
+            <div class="date">{{ item.count }}</div>
+          </div>
+        </div>
+        <div class="four-line" style="position: relative">
+          <div class="title">单位活跃数</div>
+          <div
+            class="date-picker"
+            style="
+              position: absolute;
+              top: 0;
+              right: 16px;
+              z-index: 999;
+              margin-top: 10px;
+            "
+          >
+            <el-date-picker
+              v-model="selectedMonths"
+              type="month"
+              placeholder="选择月份"
+              format="M"
+              value-format="M"
+              @change="handleChange"
+            >
+            </el-date-picker>
+          </div>
+          <div style="display: flex; align-items: center">
+            <div class="fire">
+              <div class="imgs">
+                <img src="../../../assets/images/fire11.png" alt="" />
+              </div>
+              <div class="count">3218</div>
+              <div>当前活跃单位数</div>
+            </div>
+            <unit-active :reportData="reportData"> </unit-active>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧版块 -->
+      <div class="right-chart">
+        <div class="first-line">
+          <div class="table-title">单位质态列表</div>
+          <el-table highlight-current-row :data="list" height="360px">
+            <el-table-column label="序号" type="index" width="50px" />
+            <el-table-column label="单位名称" align="center" prop="orgName">
+            </el-table-column>
+            <el-table-column label="质态" align="center" prop="policeId">
+            </el-table-column>
+          </el-table>
+          <!-- 分页组件 -->
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryRader.pageNo"
+            :limit.sync="queryRader.pageSize"
+            layout="total, prev, pager, next, jumper"
+            @pagination="getData"
+          />
+        </div>
+        <div class="two-line">
+          <div class="left">
+            <el-table highlight-current-row :data="list" height="416px">
+              <el-table-column label="序号" type="index" width="50px" />
+              <el-table-column
+                label="消防设备类型"
+                align="center"
+                prop="orgName"
+              >
+              </el-table-column>
+              <el-table-column label="扫码数量" align="center" prop="policeId">
+              </el-table-column>
+            </el-table>
+            <el-table
+              highlight-current-row
+              :data="list"
+              height="390px"
+              style="margin-top: 16px"
+            >
+              <el-table-column label="序号" type="index" width="50px" />
+              <el-table-column label="隐患类型" align="center" prop="orgName">
+              </el-table-column>
+              <el-table-column label="数量" align="center" prop="policeId">
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="right">
+            <el-table highlight-current-row :data="list" height="822px">
+              <el-table-column label="序号" type="index" width="50px" />
+              <el-table-column label="监督单位" align="center" prop="orgName">
+              </el-table-column>
+              <el-table-column label="监督员" align="center" prop="policeId">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
   <script>
-  import { getDdlist } from "@/api/backend/statistics";
-  export default {
-    data() {
-      return {
-        brigade: [],
-        selectedTab:0,
-        navData: [
-          {
-            name: "已初始化单位数",
-            code: 1,
-            imgs: require("@/assets/images/default.jpg"),
-          },
-          {
-            name: "发现隐患数",
-            code: 1,
-            imgs: require("@/assets/images/default.jpg"),
-          },
-          {
-            name: "整改隐患数",
-            code: 1,
-            imgs: require("@/assets/images/default.jpg"),
-          },
-          {
-            name: "隐患整改率",
-            code: 1,
-            imgs: require("@/assets/images/default.jpg"),
-          },
-        ],
-      };
+import { getDdlist, getPoliceId, tongjiBroad } from "@/api/backend/statistics";
+import { currentReport } from "@/api/backend/taskInfo";
+import barChart from "./component/barChart.vue";
+import unitbartChart from "./component/unitbartChart.vue";
+import unitActive from "./component/unitActive.vue";
+import { getOrgPage } from "@/api/backend/org";
+export default {
+  components: {
+    barChart,
+    unitbartChart,
+    unitActive,
+  },
+  data() {
+    return {
+      brigade: [],
+      selectedTab: 0,
+      selectedMonths: "",
+      reportData: {},
+      list: [], //单位质态列表
+      navData: [
+        {
+          name: "已初始化单位数",
+          code: 1,
+          imgs: require("@/assets/images/fire1.png"),
+        },
+        {
+          name: "发现隐患数",
+          code: 2,
+          imgs: require("@/assets/images/fire2.png"),
+        },
+        {
+          name: "整改隐患数",
+          code: 3,
+          imgs: require("@/assets/images/fire3.png"),
+        },
+        {
+          name: "隐患整改率",
+          code: 4,
+          imgs: require("@/assets/images/fire4.png"),
+        },
+      ],
+      scanCode: [
+        { name: "巡查扫码总数", code: 1 },
+        { name: "日均扫码总数", code: 2 },
+        { name: "人均扫码总数", code: 3 },
+        { name: "单位扫码总数", code: 4 },
+        { name: "隐患整改平均时间(天)", code: 5 },
+        { name: "日均扫描设备类型数", code: 6 },
+      ],
+      threeChart: [
+        {
+          name: "今日扫码",
+          code: 1,
+          imgs: require("@/assets/images/fire5.png"),
+        },
+        {
+          name: "今日活跃人数",
+          code: 2,
+          imgs: require("@/assets/images/fire6.png"),
+        },
+        {
+          name: "上周缺查单位",
+          code: 3,
+          imgs: require("@/assets/images/fire7.png"),
+        },
+        {
+          name: "设备类型数",
+          code: 4,
+          imgs: require("@/assets/images/fire8.png"),
+        },
+        {
+          name: "设备类型覆盖率",
+          code: 5,
+          imgs: require("@/assets/images/fire9.png"),
+        },
+      ],
+      total: 0,
+      queryRader: {
+        pageSize: 10,
+        pageNo: 1,
+      },
+      deptId: "",
+      tongjiData: null,
+      allNumber: null,
+    };
+  },
+  // 监听 Element UI 中的筛选月份变化
+  watch: {
+    //选择月份
+    selectedMonths: function (newVal) {
+      this.fetchData();
     },
-    created() {
-        this.getList()
+  },
+  created() {
+    this.getList();
+    this.fetchData();
+    this.getData();
+    this.navList();
+  },
+  methods: {
+    navList() {
+      tongjiBroad({ pageNo: 1, pageSize: 9999 }).then((response) => {
+        if (response.data) {
+          this.allNumber = response.data.list;
+          this.allNumber.map((item) => {
+            if (item.deptid == this.deptId) {
+              this.tongjiData = item;
+            }
+          });
+        }
+      });
     },
-    methods: {
-        getList() {
-        // 执行查询
-        getDdlist().then((response) => {
-          console.log("response", response);
-          this.brigade = response.data;
-          this.brigade.unshift({ deptName: "所有大队", id: 0 });
+    detaulData() {
+        this.navData.forEach((item) => {
+          switch (item.code) {
+            case 1:
+              item.count = this.tongjiData.initorgtotal??0; //
+              break;
+            case 2:
+              item.count = this.tongjiData.peradjust??0; //
+              break;
+            case 3:
+              item.count = this.tongjiData.peradjust??0;
+              break;
+            case 4:
+              item.count = this.tongjiData.peradjust??0;
+              break;
+            default:
+              break;
+          }
         });
-      },
-      clickTab() {
-
-      }
+        this.scanCode.forEach((item) => {
+          switch (item.code) {
+            case 1:
+              item.count = this.tongjiData.patroltotal; //修改客户信息
+              break;
+            case 2:
+              item.count = this.tongjiData.avgdate; //红号变更
+              break;
+            case 3:
+              item.count = this.tongjiData.avgperson;
+              break;
+            case 4:
+              item.count = this.tongjiData.scantotal;
+              break;
+            case 5:
+              item.count = this.tongjiData.dengerfixavg;
+              break;
+            case 6:
+              item.count = this.tongjiData.avgdatedevtype;
+              break;
+            default:
+              break;
+          }
+        });
+        this.threeChart.forEach((item) => {
+          switch (item.code) {
+            case 1:
+              item.count = this.tongjiData.todayscantotal; //修改客户信息
+              break;
+            case 2:
+              item.count = this.tongjiData.todayhottotal; //红号变更
+              break;
+            case 3:
+              item.count = this.tongjiData.lastweektotal;
+              break;
+            case 4:
+              item.count = this.tongjiData.devtypetotal;
+              break;
+            case 5:
+              item.count = this.tongjiData.devcover;
+              break;
+            default:
+              break;
+          }
+        });
+      console.log("this.threeChart", this.threeChart);
+    },
+    getList() {
+      // 执行查询
+      getDdlist().then((response) => {
+        this.brigade = response.data;
+        this.brigade.unshift({ deptName: "所有大队", id: 0 });
+      });
     },
-  };
-  </script>
+    clickTab(e) {
+      this.deptId = e.name;
+      this.navList();
+    },
+    async fetchData() {
+      const time = this.selectedMonths;
+      const month = this.selectedMonths
+        ? this.selectedMonths
+        : new Date().getMonth() + 1; // 如果已选择月份使用已选择的月份，否则默认为当前月份
+      const res = await currentReport({ month: month });
+      this.reportData = res.data;
+    },
+    handleChange(val) {
+      //选择月份
+      this.selectedMonths = val;
+      this.selectedMonth = val;
+    },
+    getData() {
+      getOrgPage(this.queryRader).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
+    },
+  },
+};
+</script>
   <style lang="scss" scoped>
-  .tabs {
-    margin-bottom: 12px;
+.tabs {
+  margin-bottom: 12px;
+}
+::v-deep .el-tabs--border-card > .el-tabs__content {
+  padding: 0 !important;
+}
+.nav {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow-x: auto;
+  cursor: pointer;
+}
+.nav-img {
+  width: 50px;
+  height: 50px;
+  margin: 0 32px 0 40px;
+}
+.text {
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  & > div:first-child {
+    color: #657398;
+    margin-bottom: 20px;
+  }
+  & > div:last-child {
+    font-weight: 600;
   }
-  ::v-deep .el-tabs--border-card > .el-tabs__content {
-    padding: 0 !important;
+}
+
+.nav-data {
+  display: flex;
+  margin-top: 16px;
+  justify-content: space-around;
+}
+.nav-data-item {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  width: 25%;
+  height: 132px;
+  margin-right: 16px;
+}
+.nav-data-item:last-child {
+  margin-right: 0;
+}
+.chart {
+  display: flex;
+  .left-chart {
+    width: 58%;
+    .first-line {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 16px;
+    }
+    .two-line {
+      margin-top: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      & > div {
+        width: 144px;
+        margin-right: 16px;
+        height: 200px;
+        background: #fff;
+        position: relative;
+        .total {
+          position: absolute;
+          left: 50%;
+          text-align: center;
+          line-height: 90px;
+          font-size: 30px;
+          font-weight: 600;
+          transform: translateX(-50%);
+          top: 30px;
+          width: 106px;
+          height: 106px;
+          opacity: 1;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+      & > div:nth-child(even) {
+        color: #01bceb;
+        .total {
+          border: 9px solid #01bceb;
+        }
+      }
+      & > div:nth-child(odd) {
+        color: #0147eb;
+        .total {
+          border: 9px solid #0147eb;
+        }
+      }
+      & > div:last-child {
+        margin-right: 0;
+      }
+      .item-name {
+        color: #657398;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 330px;
+      }
+    }
+    .three-line {
+      display: flex;
+      & > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .nav-img,
+        div {
+          margin: 0;
+          margin-left: 28px;
+        }
+      }
+      .date {
+        font-size: 30px;
+        font-weight: 600;
+        color: #0f2b4c;
+      }
+    }
+    .four-line {
+      margin-top: 16px;
+      background: #fff;
+      .title {
+        height: 40px;
+        font-size: 18px;
+        color: #0f2b4c;
+        padding: 10px 0 0 10px;
+      }
+      ::v-deep .el-date-editor.el-input__inner {
+        width: 121px !important;
+      }
+
+      ::v-deep .el-input__prefix {
+        color: #0147eb;
+      }
+
+      ::v-deep .el-input__inner {
+        border: 1px solid #0147eb;
+        color: #0147eb;
+      }
+      .fire {
+        width: 144px;
+        height: 212px;
+        font-size: 15px;
+        color: #657398;
+        background: #fff url("~@/assets/images/fire10.png") no-repeat center;
+        margin-left: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        .imgs {
+          width: 64px;
+          height: 64px;
+          background-color: #fff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          & > img {
+            width: 48px;
+            height: 48px;
+          }
+        }
+        .count {
+          font-size: 30px;
+          color: #0f2b4c;
+          font-weight: 600;
+        }
+      }
+    }
   }
-  .nav {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    overflow-x: auto;
-    cursor: pointer;
-    .nav-item {
+
+  .right-chart {
+    margin-left: 1%;
+    width: 41%;
+    .first-line {
+      background: #fff;
+      height: 464px;
+      margin-top: 16px;
+    }
+    .two-line {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 16px;
+      .left {
+        flex-basis: 48%;
+      }
+      .right {
+        height: 100%;
+        flex-basis: 48%;
+        margin-left: 16px;
+      }
     }
   }
-  </style>
+}
+.table-title {
+  color: #0f2b4c;
+  font-size: 16px;
+  padding: 10px;
+}
+</style>

src/views/index.vue

@@ -1,637 +1,637 @@
-<template>
-  <div class="dashboard-editor-container">
-    <!-- <img src="../../static/20230321180755.png" alt="" style="width:100%;heighr:100%"> -->
-    <div>
-      <panel-group @handleSetLineChartData="handleSetLineChartData" />
-      <el-row :gutter="20">
-        <el-col
-          :xs="44"
-          :sm="44"
-          :lg="16"
-          :style="{ height: wheight + 10 + 'px', background: '#fff' }"
-        >
-          <!-- <div class="chart-wrapper" style="position: relative;">
-            <div class="date-picker" style="position: absolute;top: 0;right:30px;z-index:999;margin-top: 10px">
-              <el-date-picker v-model="selectedMonth" type="month" placeholder="选择月份" format="yyyy-MM"
-                value-format="yyyy-MM" @change="handleChange">
-              </el-date-picker>
-            </div>
-            <bar-chart :chart-data="chartData" :selected-month="selectedMonth" />
-          </div> -->
-          <!-- :height="wheight?wheight" -->
-          <div style="margin-top: 10px; font-weight: 500; font-size: 15px">
-            <span>任务列表</span
-            ><span
-              style="float: right; cursor: pointer; float: right"
-              @click="gomorelist"
-              >更多</span
-            >
-          </div>
-          <el-table
-            ref="filterTable"
-            :data="tableDataMiddle"
-            :height="wheight - 50"
-            style="width: 100%; padding-top: 10px"
-            @filter-change="filterTags"
-          >
-            <el-table-column label="任务名称" align="center" prop="taskName" />
-            <el-table-column label="任务类型" align="center" prop="taskType">
-              <template v-slot="scope">
-                <dict-tag
-                  :type="DICT_TYPE.TASK_TYPE"
-                  :value="scope.row.taskType"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column label="任务内容" align="center">
-              <template slot-scope="scope">
-                <div v-html="scope.row.taskContent"></div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="任务状态"
-              align="center"
-              prop="taskStatus"
-              :filters="[
-                { text: '待完成', value: 1 },
-                { text: '待审核', value: 2 },
-                { text: '已归档', value: 3 },
-              ]"
-              filter-placement="bottom-end"
-              :filter-multiple="false"
-              column-key="taskStatus"
-              v-slot="scope"
-            >
-              <template>
-                <dict-tag
-                  :type="DICT_TYPE.TASK_STATUS"
-                  :value="scope.row.taskStatus"
-                />
-              </template>
-            </el-table-column>
-            <!-- <el-table-column prop="tag" label="任务状态" width="100"
-              >
-              <template slot-scope="scope">
-                <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'"
-                  disable-transitions>{{ scope.row.tag }}</el-tag>
-              </template>
-            </el-table-column> -->
-          </el-table>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper" style="position: relative">
-            <div
-              class="date-picker"
-              style="
-                position: absolute;
-                top: 0;
-                left: 170px;
-                z-index: 999;
-                margin-top: 10px;
-              "
-            >
-              <el-date-picker
-                v-model="selectedMonths"
-                type="month"
-                placeholder="选择月份"
-                format="M"
-                value-format="M"
-                @change="handleChange"
-              >
-              </el-date-picker>
-            </div>
-            <raddar-chart :reportData="reportData" />
-            <!-- <div>详细情况</div> -->
-            <el-button
-              size="middle"
-              type="text"
-              style="
-                position: absolute;
-                bottom: 5px;
-                right: 50px;
-                z-index: 999;
-                margin-top: 10px;
-              "
-              @click="handleDeatail"
-              >详细情况</el-button
-            >
-          </div>
-        </el-col>
-        <!-- <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col> -->
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :xs="44" :sm="44" :lg="16">
-          <div style="display: flex">
-            <!-- <div class="line-left"> -->
-            <!-- <div class="line-left-top">任务完成数</div>
-              <div class="bg">
-                <p class="line-left-item line-left-item-title">本月完成量</p>
-                <div class="line-left-item"><span class="line-left-item-number">232</span><span
-                    class="line-left-item-unit">条</span></div>
-                <div class="line-left-item line-left-item-last">同比上月 <span class="xiajiang">12%</span><img
-                    src="../assets/images/xiajiang.png" style="width:6px;height:8px;margin: 6px 0 0 3px;"></div>
-              </div>
-              <div class="bg">
-                <p class="line-left-item line-left-item-title">本周完成量</p>
-                <div class="line-left-item"><span class="line-left-item-number">232</span><span
-                    class="line-left-item-unit">条</span></div>
-                <div class="line-left-item line-left-item-last">同比上月 <span class="shangshen">12%</span><img
-                    src="../assets/images/shangshen.png" style="width:6px;height:8px;margin: 6px 0 0 3px;"></div>
-              </div> -->
-            <!-- </div> -->
-            <div
-              class="chart-wrapper"
-              style="position: relative; width: 100%; margin-bottom: 0"
-              id="wheight"
-            >
-              <line-chart
-                :chart-data="lineChartData"
-                :chart-datano="lineChartDatano"
-              />
-            </div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div
-            class="chart-wrapper chart-wrappers"
-            style="height: 356px; overflow: auto"
-          >
-            <div style="margin-bottom: 10px">
-              <span class="line-left-top">整改隐患记录</span
-              ><span style="float: right; cursor: pointer" @click="more"
-                >更多</span
-              >
-            </div>
-            <el-table
-              :data="tableData"
-              style="width: 100%"
-              :cell-class-name="tableCellClassName"
-            >
-              <el-table-column
-                label="任务名称"
-                prop="task_name"
-                header-align="center"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column
-                label="检查时间"
-                prop="inspect_time"
-                header-align="center"
-                align="center"
-              >
-                <template v-slot="scope">
-                  <span>{{ parseTime(scope.row.inspect_time) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="单位名称"
-                prop="org_name"
-                header-align="center"
-                align="center"
-              >
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-    <el-dialog
-      title="维保报告单位数量详情"
-      :visible.sync="showRaddarDetail"
-      width="60%"
-      v-dialogDrag
-      append-to-body
-      class="details"
-    >
-      <el-button
-        size="mini"
-        type="primary"
-        plain
-        @click="handleDeatailWei"
-        style="margin-bottom: 10px"
-        >未上传</el-button
-      >
-      <el-button
-        size="mini"
-        type="success"
-        plain
-        @click="handleDeatailYi"
-        style="margin-bottom: 10px"
-        >已上传</el-button
-      >
-      <el-table
-        highlight-current-row
-        v-loading="loading"
-        :data="list"
-        style="width: 100%; overflow: auto"
-      >
-        <el-table-column label="ID" align="center" prop="id" />
-        <el-table-column label="单位名称" align="center" prop="orgName">
-          <template v-slot="scope">
-            <span style="color: forestgreen" @click="opentabs = true">{{
-              scope.row.orgName
-            }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryRader.pageNo"
-        :limit.sync="queryRader.pageSize"
-        @pagination="getData"
-      />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import PanelGroup from "./dashboard/PanelGroup";
-import LineChart from "./dashboard/LineChart";
-import RaddarChart from "./dashboard/RaddarChart";
-import PieChart from "./dashboard/PieChart";
-import BarChart from "./dashboard/BarChart";
-import {
-  getTaskInfoPage,
-  countdengerbyday,
-  currentReport,
-} from "@/api/backend/taskInfo";
-import { getHiddenDangerPage } from "@/api/backend/hiddenDanger";
-import { computed } from "vue";
-import { getOrgPage } from "@/api/backend/org";
-const lineChartData = {
-  newVisitis: {
-    // expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145],
-  },
-  // messages: {
-  //   // expectedData: [200, 192, 120, 144, 160, 130, 140],
-  //   actualData: [180, 160, 151, 106, 145, 150, 130]
-  // },
-  // purchases: {
-  //   // expectedData: [80, 100, 121, 104, 105, 90, 100],  //预期数据
-  //   actualData: [120, 90, 100, 138, 142, 130, 130]   //实际数据
-  // },
-  // shoppings: {
-  //   // expectedData: [130, 140, 141, 142, 145, 150, 160],
-  //   actualData: [120, 82, 91, 154, 162, 140, 130]
-  // },
-  // installation: {
-  //   actualData: [120, 82, 91, 154, 162, 140, 130]
-  // }
-};
-
-export default {
-  name: "Index",
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-  },
-  data() {
-    return {
-      wheight: 300,
-      list: [], //维保报告
-      // 遮罩层
-      loading: true,
-      tableDataMiddle: [],
-      tableData: [
-        // { systemName: '系统A', taskCount: 10, completionRate: '60%' },
-        // { systemName: '系统B', taskCount: 20, completionRate: '80%' },
-        // { systemName: '系统C', taskCount: 30, completionRate: '90%' },
-        // { systemName: '系统D', taskCount: 40, completionRate: '70%' }
-      ],
-      lineChartData: {},
-      lineChartDatano: {},
-      //选择月份
-      chartData: [
-        // 消防巡检数数据
-        { date: "2023-2-10", value: 70 },
-        { date: "2023-2-13", value: 40 },
-        { date: "2023-2-15", value: 20 },
-        { date: "2023-2-16", value: 60 },
-        { date: "2023-2-20", value: 123 },
-        { date: "2023-2-22", value: 80 },
-        { date: "2023-2-23", value: 140 },
-        { date: "2023-2-24", value: 190 },
-      ],
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        taskStatus: 1,
-      },
-      Params: {
-        pageNo: 1,
-        pageSize: 10,
-        userId: this.$store.state.user.id,
-      },
-      reportData: {},
-      selectedMonths: "",
-      showRaddarDetail: false, //维保单位详情
-      total: 0,
-      queryRader: {
-        pageSize: 10,
-        pageNo: 1,
-      },
-      selectedMonth: new Date().toLocaleDateString().substring(0, 7), // 默认选中当前月份
-    };
-  },
-  // 监听 Element UI 中的筛选月份变化
-  watch: {
-    //选择月份
-    selectedMonths: function (newVal) {
-      this.fetchData();
-      // 过滤并更新消防巡检数数据
-      // this.chartData = this.filterAndSortData();
-    },
-    //  'queryParams.taskStatus':function (newVal) {
-    //   this.queryParams.taskStatus=newVal
-    //   this.getList()
-    //   console.log(this.queryParams.taskStatus,'newValnewVal');
-
-    //  }
-  },
-  created() {
-    //  var hi=document.getElementById('wheight').clientHeight
-    this.$nextTick(() => {
-      this.wheight = document.getElementById("wheight").clientHeight;
-      this.getList();
-    });
-    this.countdengerbyday();
-    this.countdengerbydayno();
-    this.rightGetList();
-    this.fetchData();
-  },
-  methods: {
-    handleDeatailWei() {
-      //未上传
-    },
-    handleDeatailYi() {
-      //已上传
-    },
-    handleDeatail() {
-      this.showRaddarDetail = true;
-      this.getData();
-    },
-    async fetchData() {
-      const time = this.selectedMonths;
-      const month = this.selectedMonths
-        ? this.selectedMonths
-        : new Date().getMonth() + 1; // 如果已选择月份使用已选择的月份，否则默认为当前月份
-      const res = await currentReport({ month: month });
-      this.reportData = res.data;
-    },
-    more() {
-      this.$router.push({ path: "/backend/hiddendanger" });
-    },
-    gomorelist() {
-      this.$router.push({ path: "/backend/taskInfo" });
-    },
-    //统计参数月份没有上传维保报告的数量
-    async currentReport() {},
-    //近30天隐患统计
-    async countdengerbyday() {
-      const res = await countdengerbyday({
-        dengerStatus: 1,
-        userId: this.$store.state.user.id,
-      });
-      this.lineChartData = res;
-      // console.log(res, "ressrw");
-    },
-    async countdengerbydayno() {
-      //未解决
-      const res = await countdengerbyday({
-        dengerStatus: 0,
-        userId: this.$store.state.user.id,
-      });
-      this.lineChartDatano = res;
-      // console.log(res, "ressrw");
-    },
-    //任务列表表格
-    filterTags(filters) {
-      this.queryParams.taskStatus = filters.taskStatus[0];
-      // console.log(filters,'filters');
-      this.getList();
-    },
-    //用来修改单元格css
-    tableCellClassName({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex == 0) {
-        return "cell-start";
-      } else if (columnIndex == 9) {
-        return "cell-end";
-      } else {
-        return "cell-middle";
-      }
-    },
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type];
-    },
-    handleChange(val) {
-      //选择月份
-      this.selectedMonths = val;
-      this.selectedMonth = val;
-    },
-    /** 查询列表 */
-    getList() {
-      // 执行查询
-      getTaskInfoPage(this.queryParams).then((response) => {
-        // console.log(response, "responseresponse");
-        this.tableDataMiddle = response.data.list;
-      });
-    },
-    getData() {
-      this.loading = true;
-      getOrgPage(this.queryRader).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    //右下角数据
-    rightGetList() {
-      getHiddenDangerPage(this.Params).then((response) => {
-        // console.log(response, "responseresponseresponse");
-        this.tableData = response.data.list;
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 15px 32px 0px 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 30px;
-    overflow: auto;
-  }
-}
-
-@media (max-width: 1024px) {
-  .chart-wrapper {
-    padding: 8px;
-    overflow: auto;
-  }
-}
-
-.line-left {
-  display: flex;
-  width: 20%;
-  flex-direction: column;
-  background-color: #fff;
-  height: 356px;
-
-  .line-left-item {
-    margin-left: 20px;
-
-    .line-left-item-number {
-      font-weight: 600;
-      font-size: 16px;
-    }
-
-    .line-left-item-unit {
-      font-weight: 500;
-      font-size: 12px;
-      float: right;
-      margin-right: 30px;
-    }
-  }
-
-  .line-left-item-title {
-    color: #657398;
-  }
-}
-
-.line-left-top {
-  margin: 10px 0 10px 20px;
-  color: #333;
-  font-weight: 600;
-  font-size: "12";
-}
-
-.bg {
-  margin: 0 0 15px 20px;
-  width: 85%;
-  height: 35%;
-  background: url("../assets/images/juxing.png") no-repeat;
-  background-size: 100% 100%;
-
-  .line-left-item-last {
-    display: flex;
-    font-size: 10px;
-    color: #3e5478;
-    margin-top: 6px;
-
-    .xiajiang {
-      color: #eb0101;
-      margin-left: 6px;
-    }
-
-    .shangshen {
-      color: #00d632;
-      margin-left: 6px;
-    }
-  }
-}
-
-// ::v-deep .el-table__row {
-//   margin-bottom: 20px !important;
-// }
-
-// ::v-deep .el-table__row td:first-child {
-//   border-left: 1px solid #E4E4E4;
-// }
-
-// ::v-deep .el-table__row td:first-child,
-// ::v-deep .el-table__row td:last-child {
-//   border-top: 1px solid #E4E4E4;
-//   border-bottom: 1px solid #E4E4E4;
-// }
-::v-deep .el-table th {
-  border: none !important;
-}
-
-::v-deep .el-table__row td:last-child {
-  border-right: 1px solid #e4e4e4;
-}
-
-// ::v-deep .el-table__row td:not(:first-child),
-// ::v-deep .el-table__row td:not(:last-child) {
-//   border-top: 1px solid transparent;
-// }
-
-::v-deep .cell-start {
-  border-top: 1px solid #ebeff0;
-  border-bottom: 1px solid #ebeff0 !important;
-  border-left: 1px solid #ebeff0;
-}
-
-::v-deep .cell-end {
-  border-top: 1px solid #ebeff0;
-  border-bottom: 1px solid #ebeff0 !important;
-  border-right: 1px solid #ebeff0;
-}
-
-::v-deep .cell-middle {
-  border-top: 1px solid #ebeff0;
-  border-bottom: 1px solid #ebeff0 !important;
-}
-
-::v-deep .el-table__body {
-  //这行代码为间隔效果！！！
-  border-spacing: 0px 6px !important;
-}
-
-//滚动条样式
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgb(202, 208, 208);
-  border-radius: 3px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #888;
-}
-
-::v-deep .el-date-editor.el-input,
-::v-deep .el-date-editor.el-input__inner {
-  width: 121px !important;
-}
-
-::v-deep .el-input__prefix {
-  color: #01b0e3;
-}
-
-::v-deep .el-input__inner {
-  border: 1px solid #01b0e3;
-  color: #01b0e3;
-}
-
-::v-deep .el-dialog__body {
-  padding: 10px;
-}
-</style>
+<template>
+  <div class="dashboard-editor-container">
+    <!-- <img src="../../static/20230321180755.png" alt="" style="width:100%;heighr:100%"> -->
+    <div>
+      <panel-group @handleSetLineChartData="handleSetLineChartData" />
+      <el-row :gutter="20">
+        <el-col
+          :xs="44"
+          :sm="44"
+          :lg="16"
+          :style="{ height: wheight + 10 + 'px', background: '#fff' }"
+        >
+          <!-- <div class="chart-wrapper" style="position: relative;">
+            <div class="date-picker" style="position: absolute;top: 0;right:30px;z-index:999;margin-top: 10px">
+              <el-date-picker v-model="selectedMonth" type="month" placeholder="选择月份" format="yyyy-MM"
+                value-format="yyyy-MM" @change="handleChange">
+              </el-date-picker>
+            </div>
+            <bar-chart :chart-data="chartData" :selected-month="selectedMonth" />
+          </div> -->
+          <!-- :height="wheight?wheight" -->
+          <div style="margin-top: 10px; font-weight: 500; font-size: 15px">
+            <span>任务列表</span
+            ><span
+              style="float: right; cursor: pointer; float: right"
+              @click="gomorelist"
+              >更多</span
+            >
+          </div>
+          <el-table
+            ref="filterTable"
+            :data="tableDataMiddle"
+            :height="wheight - 50"
+            style="width: 100%; padding-top: 10px"
+            @filter-change="filterTags"
+          >
+            <el-table-column label="任务名称" align="center" prop="taskName" />
+            <el-table-column label="任务类型" align="center" prop="taskType">
+              <template v-slot="scope">
+                <dict-tag
+                  :type="DICT_TYPE.TASK_TYPE"
+                  :value="scope.row.taskType"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="任务内容" align="center">
+              <template slot-scope="scope">
+                <div v-html="scope.row.taskContent"></div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="任务状态"
+              align="center"
+              prop="taskStatus"
+              :filters="[
+                { text: '待完成', value: 1 },
+                { text: '待审核', value: 2 },
+                { text: '已归档', value: 3 },
+              ]"
+              filter-placement="bottom-end"
+              :filter-multiple="false"
+              column-key="taskStatus"
+              v-slot="scope"
+            >
+              <template>
+                <dict-tag
+                  :type="DICT_TYPE.TASK_STATUS"
+                  :value="scope.row.taskStatus"
+                />
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="tag" label="任务状态" width="100"
+              >
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'"
+                  disable-transitions>{{ scope.row.tag }}</el-tag>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper" style="position: relative">
+            <div
+              class="date-picker"
+              style="
+                position: absolute;
+                top: 0;
+                left: 170px;
+                z-index: 999;
+                margin-top: 10px;
+              "
+            >
+              <el-date-picker
+                v-model="selectedMonths"
+                type="month"
+                placeholder="选择月份"
+                format="M"
+                value-format="M"
+                @change="handleChange"
+              >
+              </el-date-picker>
+            </div>
+            <raddar-chart :reportData="reportData" />
+            <!-- <div>详细情况</div> -->
+            <el-button
+              size="middle"
+              type="text"
+              style="
+                position: absolute;
+                bottom: 5px;
+                right: 50px;
+                z-index: 999;
+                margin-top: 10px;
+              "
+              @click="handleDeatail"
+              >详细情况</el-button
+            >
+          </div>
+        </el-col>
+        <!-- <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col> -->
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :xs="44" :sm="44" :lg="16">
+          <div style="display: flex">
+            <!-- <div class="line-left"> -->
+            <!-- <div class="line-left-top">任务完成数</div>
+              <div class="bg">
+                <p class="line-left-item line-left-item-title">本月完成量</p>
+                <div class="line-left-item"><span class="line-left-item-number">232</span><span
+                    class="line-left-item-unit">条</span></div>
+                <div class="line-left-item line-left-item-last">同比上月 <span class="xiajiang">12%</span><img
+                    src="../assets/images/xiajiang.png" style="width:6px;height:8px;margin: 6px 0 0 3px;"></div>
+              </div>
+              <div class="bg">
+                <p class="line-left-item line-left-item-title">本周完成量</p>
+                <div class="line-left-item"><span class="line-left-item-number">232</span><span
+                    class="line-left-item-unit">条</span></div>
+                <div class="line-left-item line-left-item-last">同比上月 <span class="shangshen">12%</span><img
+                    src="../assets/images/shangshen.png" style="width:6px;height:8px;margin: 6px 0 0 3px;"></div>
+              </div> -->
+            <!-- </div> -->
+            <div
+              class="chart-wrapper"
+              style="position: relative; width: 100%; margin-bottom: 0"
+              id="wheight"
+            >
+              <line-chart
+                :chart-data="lineChartData"
+                :chart-datano="lineChartDatano"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div
+            class="chart-wrapper chart-wrappers"
+            style="height: 356px; overflow: auto"
+          >
+            <div style="margin-bottom: 10px">
+              <span class="line-left-top">整改隐患记录</span
+              ><span style="float: right; cursor: pointer" @click="more"
+                >更多</span
+              >
+            </div>
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              :cell-class-name="tableCellClassName"
+            >
+              <el-table-column
+                label="任务名称"
+                prop="task_name"
+                header-align="center"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                label="检查时间"
+                prop="inspect_time"
+                header-align="center"
+                align="center"
+              >
+                <template v-slot="scope">
+                  <span>{{ parseTime(scope.row.inspect_time) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="单位名称"
+                prop="org_name"
+                header-align="center"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <el-dialog
+      title="维保报告单位数量详情"
+      :visible.sync="showRaddarDetail"
+      width="60%"
+      v-dialogDrag
+      append-to-body
+      class="details"
+    >
+      <el-button
+        size="mini"
+        type="primary"
+        plain
+        @click="handleDeatailWei"
+        style="margin-bottom: 10px"
+        >未上传</el-button
+      >
+      <el-button
+        size="mini"
+        type="success"
+        plain
+        @click="handleDeatailYi"
+        style="margin-bottom: 10px"
+        >已上传</el-button
+      >
+      <el-table
+        highlight-current-row
+        v-loading="loading"
+        :data="list"
+        style="width: 100%; overflow: auto"
+      >
+        <el-table-column label="ID" align="center" prop="id" />
+        <el-table-column label="单位名称" align="center" prop="orgName">
+          <template v-slot="scope">
+            <span style="color: forestgreen" @click="opentabs = true">{{
+              scope.row.orgName
+            }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryRader.pageNo"
+        :limit.sync="queryRader.pageSize"
+        @pagination="getData"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PanelGroup from "./dashboard/PanelGroup";
+import LineChart from "./dashboard/LineChart";
+import RaddarChart from "./dashboard/RaddarChart";
+import PieChart from "./dashboard/PieChart";
+import BarChart from "./dashboard/BarChart";
+import {
+  getTaskInfoPage,
+  countdengerbyday,
+  currentReport,
+} from "@/api/backend/taskInfo";
+import { getHiddenDangerPage } from "@/api/backend/hiddenDanger";
+import { computed } from "vue";
+import { getOrgPage } from "@/api/backend/org";
+const lineChartData = {
+  newVisitis: {
+    // expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145],
+  },
+  // messages: {
+  //   // expectedData: [200, 192, 120, 144, 160, 130, 140],
+  //   actualData: [180, 160, 151, 106, 145, 150, 130]
+  // },
+  // purchases: {
+  //   // expectedData: [80, 100, 121, 104, 105, 90, 100],  //预期数据
+  //   actualData: [120, 90, 100, 138, 142, 130, 130]   //实际数据
+  // },
+  // shoppings: {
+  //   // expectedData: [130, 140, 141, 142, 145, 150, 160],
+  //   actualData: [120, 82, 91, 154, 162, 140, 130]
+  // },
+  // installation: {
+  //   actualData: [120, 82, 91, 154, 162, 140, 130]
+  // }
+};
+
+export default {
+  name: "Index",
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+  },
+  data() {
+    return {
+      wheight: 300,
+      list: [], //维保报告
+      // 遮罩层
+      loading: true,
+      tableDataMiddle: [],
+      tableData: [
+        // { systemName: '系统A', taskCount: 10, completionRate: '60%' },
+        // { systemName: '系统B', taskCount: 20, completionRate: '80%' },
+        // { systemName: '系统C', taskCount: 30, completionRate: '90%' },
+        // { systemName: '系统D', taskCount: 40, completionRate: '70%' }
+      ],
+      lineChartData: {},
+      lineChartDatano: {},
+      //选择月份
+      chartData: [
+        // 消防巡检数数据
+        { date: "2023-2-10", value: 70 },
+        { date: "2023-2-13", value: 40 },
+        { date: "2023-2-15", value: 20 },
+        { date: "2023-2-16", value: 60 },
+        { date: "2023-2-20", value: 123 },
+        { date: "2023-2-22", value: 80 },
+        { date: "2023-2-23", value: 140 },
+        { date: "2023-2-24", value: 190 },
+      ],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        taskStatus: 1,
+      },
+      Params: {
+        pageNo: 1,
+        pageSize: 10,
+        userId: this.$store.state.user.id,
+      },
+      reportData: {},
+      selectedMonths: "",
+      showRaddarDetail: false, //维保单位详情
+      total: 0,
+      queryRader: {
+        pageSize: 10,
+        pageNo: 1,
+      },
+      selectedMonth: new Date().toLocaleDateString().substring(0, 7), // 默认选中当前月份
+    };
+  },
+  // 监听 Element UI 中的筛选月份变化
+  watch: {
+    //选择月份
+    selectedMonths: function (newVal) {
+      this.fetchData();
+      // 过滤并更新消防巡检数数据
+      // this.chartData = this.filterAndSortData();
+    },
+    //  'queryParams.taskStatus':function (newVal) {
+    //   this.queryParams.taskStatus=newVal
+    //   this.getList()
+    //   console.log(this.queryParams.taskStatus,'newValnewVal');
+
+    //  }
+  },
+  created() {
+    //  var hi=document.getElementById('wheight').clientHeight
+    this.$nextTick(() => {
+      this.wheight = document.getElementById("wheight").clientHeight;
+      this.getList();
+    });
+    this.countdengerbyday();
+    this.countdengerbydayno();
+    this.rightGetList();
+    this.fetchData();
+  },
+  methods: {
+    handleDeatailWei() {
+      //未上传
+    },
+    handleDeatailYi() {
+      //已上传
+    },
+    handleDeatail() {
+      this.showRaddarDetail = true;
+      this.getData();
+    },
+    async fetchData() {
+      const time = this.selectedMonths;
+      const month = this.selectedMonths
+        ? this.selectedMonths
+        : new Date().getMonth() + 1; // 如果已选择月份使用已选择的月份，否则默认为当前月份
+      const res = await currentReport({ month: month });
+      this.reportData = res.data;
+    },
+    more() {
+      this.$router.push({ path: "/backend/hiddendanger" });
+    },
+    gomorelist() {
+      this.$router.push({ path: "/backend/taskInfo" });
+    },
+    //统计参数月份没有上传维保报告的数量
+    async currentReport() {},
+    //近30天隐患统计
+    async countdengerbyday() {
+      const res = await countdengerbyday({
+        dengerStatus: 1,
+        userId: this.$store.state.user.id,
+      });
+      this.lineChartData = res;
+      // console.log(res, "ressrw");
+    },
+    async countdengerbydayno() {
+      //未解决
+      const res = await countdengerbyday({
+        dengerStatus: 0,
+        userId: this.$store.state.user.id,
+      });
+      this.lineChartDatano = res;
+      // console.log(res, "ressrw");
+    },
+    //任务列表表格
+    filterTags(filters) {
+      this.queryParams.taskStatus = filters.taskStatus[0];
+      // console.log(filters,'filters');
+      this.getList();
+    },
+    //用来修改单元格css
+    tableCellClassName({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex == 0) {
+        return "cell-start";
+      } else if (columnIndex == 9) {
+        return "cell-end";
+      } else {
+        return "cell-middle";
+      }
+    },
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type];
+    },
+    handleChange(val) {
+      //选择月份
+      this.selectedMonths = val;
+      this.selectedMonth = val;
+    },
+    /** 查询列表 */
+    getList() {
+      // 执行查询
+      getTaskInfoPage(this.queryParams).then((response) => {
+        // console.log(response, "responseresponse");
+        this.tableDataMiddle = response.data.list;
+      });
+    },
+    getData() {
+      this.loading = true;
+      getOrgPage(this.queryRader).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    //右下角数据
+    rightGetList() {
+      getHiddenDangerPage(this.Params).then((response) => {
+        // console.log(response, "responseresponseresponse");
+        this.tableData = response.data.list;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 15px 32px 0px 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 30px;
+    overflow: auto;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+    overflow: auto;
+  }
+}
+
+.line-left {
+  display: flex;
+  width: 20%;
+  flex-direction: column;
+  background-color: #fff;
+  height: 356px;
+
+  .line-left-item {
+    margin-left: 20px;
+
+    .line-left-item-number {
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .line-left-item-unit {
+      font-weight: 500;
+      font-size: 12px;
+      float: right;
+      margin-right: 30px;
+    }
+  }
+
+  .line-left-item-title {
+    color: #657398;
+  }
+}
+
+.line-left-top {
+  margin: 10px 0 10px 20px;
+  color: #333;
+  font-weight: 600;
+  font-size: "12";
+}
+
+.bg {
+  margin: 0 0 15px 20px;
+  width: 85%;
+  height: 35%;
+  background: url("../assets/images/juxing.png") no-repeat;
+  background-size: 100% 100%;
+
+  .line-left-item-last {
+    display: flex;
+    font-size: 10px;
+    color: #3e5478;
+    margin-top: 6px;
+
+    .xiajiang {
+      color: #eb0101;
+      margin-left: 6px;
+    }
+
+    .shangshen {
+      color: #00d632;
+      margin-left: 6px;
+    }
+  }
+}
+
+// ::v-deep .el-table__row {
+//   margin-bottom: 20px !important;
+// }
+
+// ::v-deep .el-table__row td:first-child {
+//   border-left: 1px solid #E4E4E4;
+// }
+
+// ::v-deep .el-table__row td:first-child,
+// ::v-deep .el-table__row td:last-child {
+//   border-top: 1px solid #E4E4E4;
+//   border-bottom: 1px solid #E4E4E4;
+// }
+::v-deep .el-table th {
+  border: none !important;
+}
+
+::v-deep .el-table__row td:last-child {
+  border-right: 1px solid #e4e4e4;
+}
+
+// ::v-deep .el-table__row td:not(:first-child),
+// ::v-deep .el-table__row td:not(:last-child) {
+//   border-top: 1px solid transparent;
+// }
+
+::v-deep .cell-start {
+  border-top: 1px solid #ebeff0;
+  border-bottom: 1px solid #ebeff0 !important;
+  border-left: 1px solid #ebeff0;
+}
+
+::v-deep .cell-end {
+  border-top: 1px solid #ebeff0;
+  border-bottom: 1px solid #ebeff0 !important;
+  border-right: 1px solid #ebeff0;
+}
+
+::v-deep .cell-middle {
+  border-top: 1px solid #ebeff0;
+  border-bottom: 1px solid #ebeff0 !important;
+}
+
+::v-deep .el-table__body {
+  //这行代码为间隔效果！！！
+  border-spacing: 0px 6px !important;
+}
+
+//滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(202, 208, 208);
+  border-radius: 3px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #888;
+}
+
+::v-deep .el-date-editor.el-input,
+::v-deep .el-date-editor.el-input__inner {
+  width: 121px !important;
+}
+
+::v-deep .el-input__prefix {
+  color: #01b0e3;
+}
+
+::v-deep .el-input__inner {
+  border: 1px solid #01b0e3;
+  color: #01b0e3;
+}
+
+::v-deep .el-dialog__body {
+  padding: 10px;
+}
+</style>