update

src/loveflow/assets/reset.less

@@ -9,6 +9,7 @@
         margin-bottom: 0;
       }
       .el-input__inner {
+        padding: 0 10px;
         height: 34px;
         line-height: 34px;
         font-size: 14px;
@@ -23,6 +24,14 @@
       .el-form-item__label {
         color: #eaf6ff;
       }
+      .el-select {
+        .el-input__inner {
+          border: none;
+          background: url("~@/assets/images/base/selectb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+      }
 
       .el-button {
         padding: 9px 20px;
@@ -51,12 +60,19 @@
         }
         .el-range-separator {
           color: #eaf6ff;
-          line-height: 30px;
+          line-height: 34px;
+          margin: 0 4px 0 0;
           &::placeholder {
             color: #5b748c;
             //color: #eaf6ff;
           }
         }
+        &.el-input__inner {
+          border: none;
+          background: url("~@/assets/images/base/selectb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
       }
 
       .el-input-number {

src/loveflow/mixins/commonMixins.js

@@ -0,0 +1,18 @@
+export const commonMixins = {
+  data() {
+    return {
+      zhAreaList: [
+        { name: "招宝山街道", value: "330211001" },
+        { name: "九龙湖镇", value: "330211101" },
+        { name: "澥浦镇", value: "330211100" },
+        { name: "骆驼街道", value: "330211003" },
+        { name: "庄市街道", value: "330211004" },
+        { name: "蛟川街道", value: "330211002" },
+        { name: "贵驷街道", value: "330211005" },
+      ],
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};

src/loveflow/mixins/tableListMixins.js

@@ -134,7 +134,7 @@ export const tableListMixins = {
           street: "招宝山街道",
           times: i + 1,
           total: i + 5,
-          iszg: i % 2,
+          iszg: i % 3,
           way: "企业提醒",
           msg: i % 2,
           deal: "人工反馈",

src/router/routes/enterpriseTeamWork.js

@@ -54,7 +54,7 @@ export default [
         name: "riskHandle",
         meta: {
           head: true,
-          title: "风险处置",
+          title: "风险处置记录",
         },
         component: () => import("@/views/enterpriseTeamWork/riskHandle/index"),
       },
@@ -68,6 +68,26 @@ export default [
         component: () =>
           import("@/views/enterpriseTeamWork/problemRectify/index"),
       },
+      {
+        path: "/teamWork/problemRectify/indexTrack",
+        name: "problemRectify",
+        meta: {
+          head: false,
+          title: "问题整改跟踪",
+        },
+        component: () =>
+          import("@/views/enterpriseTeamWork/problemRectify/indexTrack"),
+      },
+      {
+        path: "/teamWork/problemRectify/indexFeedback",
+        name: "problemRectify",
+        meta: {
+          head: false,
+          title: "问题整改反馈",
+        },
+        component: () =>
+          import("@/views/enterpriseTeamWork/problemRectify/indexFeedback"),
+      },
       {
         path: "/teamWork/messageCenter",
         name: "messageCenter",

src/views/enterpriseTeamWork/components/screenMain.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="enterpriseTeamWorkScreenMainWrap loveflow">
+    <div class="riskTrim tlIcon"></div>
+    <div class="riskTrim trIcon"></div>
+    <div class="enterpriseTeamWorkScreenMainBody">
+      <div class="enterpriseTeamWorkScreenMainTop">{{ title }}</div>
+      <div class="enterpriseTeamWorkScreenMainBtm">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {
+      backIcon: require("@/assets/images/topic/left.png"),
+    };
+  },
+  methods: {
+    goBack() {
+      this.$emit("gotoPage");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.enterpriseTeamWorkScreenMainWrap {
+  height: 100%;
+  padding: 16px;
+  position: relative;
+  background: url("~@/assets/images/team/screenb.png") no-repeat center center;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+
+  .enterpriseTeamWorkScreenMainBody {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: url("~@/assets/images/team/screenw.png") no-repeat center center;
+    background-size: 100% 100%;
+    .enterpriseTeamWorkScreenMainTop {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: vw(830);
+      height: vw(70);
+      background: url("~@/assets/images/team/screent.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+      font-weight: bold;
+      font-size: vw(24);
+      color: #ffffff;
+    }
+    .enterpriseTeamWorkScreenMainBtm {
+      flex: 1;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/enterpriseTeamWork/problemRectify/bar.vue

@@ -0,0 +1,209 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let dataList = this.chartObj.data;
+      let maxArr = [];
+      let maxValue = 0;
+      let xData = [];
+      let yData = [];
+      let total = 0;
+
+      dataList.forEach((item) => {
+        xData.push(item.name);
+        yData.push(item.value);
+        if (maxValue < item.value) {
+          maxValue = item.value;
+        }
+      });
+      dataList.forEach((item) => {
+        maxArr.push(maxValue);
+        total = total + item.value;
+      });
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        grid: {
+          left: "14",
+          top: "5%", // 设置条形图的边距
+          right: "0",
+          bottom: "0",
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: xData,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: "bottom",
+                color: "#ffffff",
+                fontSize: 16,
+                fontFamily: "Microsoft YaHei",
+                align: "left",
+                rich: {
+                  index: {
+                    padding: [6, 0, 6, 8],
+                  },
+                  name: {
+                    padding: [4, 8, 6, 0],
+                  },
+                },
+              },
+              formatter: (name, index) => {
+                const _index = index + 1;
+                if (dataList.length) {
+                  const item = dataList.filter((item) => item.name == name)[0];
+                  let text = `{index|${_index}.} {name|${name}}`;
+                  return text;
+                }
+              },
+            },
+            offset: 0,
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: "bar",
+            barWidth: 6,
+            itemStyle: {
+              color: (params) => {
+                console.log(params);
+                let color = {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#2ccb7a", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.5,
+                      color: "#1aafc5", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#11a2e6", // 100% 处的颜色
+                    },
+                  ],
+                };
+                return color;
+              },
+            },
+            label: {
+              show: false,
+            },
+            data: dataList,
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 外边框
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barWidth: 1,
+            itemStyle: {
+              barBorderRadius: 10,
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              padding: [-20, 10, 0, -20],
+              textStyle: {
+                fontSize: 16,
+                rich: {
+                  value: {
+                    color: "#9CE0FF",
+                  },
+                },
+              },
+              formatter: (params) => {
+                var text = `{value|${params.data}}`;
+                return text;
+              },
+              rich: {
+                a: {
+                  color: "#9CE0FF",
+                  fontSize: 14,
+                  align: "right",
+                },
+              },
+              position: "right",
+              distance: 1, // 向右偏移位置
+              show: true,
+            },
+            data: yData,
+            z: 0,
+            animationEasing: "elasticOut",
+          },
+          {
+            name: "外框",
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barGap: "-100%", // 设置外框粗细
+            data: maxArr,
+            barWidth: 6,
+            itemStyle: {
+              color: "rgba(255,255,255,0.06)", // 填充色
+              label: {
+                // 标签显示位置
+                show: false,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>

src/views/enterpriseTeamWork/problemRectify/index.vue

@@ -1,3 +1,198 @@
 <template>
-  <div class="problemRectifyWrap"></div>
+  <div class="problemRectifyWrap loveflow">
+    <screenMain title="问题整改概览">
+      <div class="problemRectifyPanel">
+        <div class="leftWrap">
+          <div class="topWrap flexSpaceBetween">
+            <div class="searchWrap">
+              <div class="flex-center">
+                <div
+                  class="totalWrap"
+                  @click="gotoPage('/teamWork/problemRectify/indexTrack')"
+                >
+                  <div class="nameWrap">
+                    <div class="icon"></div>
+                    <div class="name">问题整改企业数</div>
+                  </div>
+                  <div class="value">{{ total }}</div>
+                </div>
+                <el-form
+                  :inline="true"
+                  :model="searchParam"
+                  class="demo-form-inline"
+                >
+                  <el-form-item label="区域">
+                    <el-select
+                      clearable
+                      v-model="searchParam.area"
+                      placeholder="全部"
+                      @change="areaChange"
+                    >
+                      <el-option
+                        v-for="item in zhAreaList"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.value"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="处置方式">
+                    <el-select v-model="searchParam.state" placeholder="">
+                      <el-option label="企业提醒" value="1"></el-option>
+                      <el-option label="核实消警" value="2"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </div>
+          </div>
+          <div class="midWrap"></div>
+          <div class="btmWrap"></div>
+        </div>
+        <div class="rightWrap">
+          <div class="zgHead">各区域整改企业数量</div>
+          <div class="zgBody">
+            <barWrap :chartObj="qyObj"></barWrap>
+          </div>
+        </div>
+      </div>
+    </screenMain>
+  </div>
 </template>
+<script>
+import screenMain from "../components/screenMain.vue";
+import barWrap from "./bar.vue";
+import { commonMixins } from "@/loveflow/mixins/commonMixins";
+
+export default {
+  components: { screenMain, barWrap },
+  mixins: [commonMixins],
+  data() {
+    return {
+      total: 327,
+      searchParam: {
+        area: "",
+        state: "",
+      },
+      qyObj: {
+        data: [
+          { name: "招宝山街道", value: 33 },
+          { name: "九龙湖镇", value: 27 },
+          { name: "澥浦镇", value: 25 },
+          { name: "骆驼街道", value: 23 },
+          { name: "庄市街道", value: 19 },
+          { name: "蛟川街道", value: 15 },
+          { name: "贵驷街道", value: 12 },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.getLast12Months());
+  },
+  methods: {
+    areaChange(val) {
+      console.log(val);
+    },
+    getLast12Months() {
+      const now = new Date();
+      const last12Months = [];
+      for (let i = 0; i < 12; i++) {
+        const month = now.getMonth(); // 获取当前月份（0-11）
+        const year = now.getFullYear(); // 获取当前年份
+        last12Months.unshift(`${year}-${month < 9 ? "0" : ""}${month + 1}`); // 将月份格式化并推入数组
+        now.setMonth(now.getMonth() - 1); // 将日期回溯一个月
+      }
+      return last12Months;
+    },
+    gotoPage(path) {
+      this.$router.push({
+        path: path,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.problemRectifyWrap {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+  color: #ffffff;
+  overflow: hidden;
+  .problemRectifyPanel {
+    display: flex;
+    height: 100%;
+    .leftWrap {
+      width: 65%;
+      .topWrap {
+        .totalWrap {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: vw(280);
+          height: vw(34);
+          background: url("~@/assets/images/team/wtzgqyb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .nameWrap {
+            display: flex;
+            align-items: center;
+            .icon {
+              width: vw(34);
+              height: vw(34);
+              background: url("~@/assets/images/team/wtzgqy.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+            .name {
+            }
+          }
+          .value {
+            font-weight: 400;
+            font-size: vw(20);
+            color: #e3f6ff;
+            letter-spacing: 1px;
+            text-shadow: 0px 0px 9px rgba(87, 207, 255, 0.88);
+          }
+          &:hover {
+            opacity: 0.8;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .rightWrap {
+      width: 35%;
+      padding-right: vw(36);
+      .zgHead {
+        display: flex;
+        padding-left: vw(20);
+        padding-top: vw(4);
+        height: 40px;
+        background: url("~@/assets/images/team/screenct.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+      .zgBody {
+        margin-top: -10px;
+        margin-left: 9px;
+        height: calc(100% - 40px);
+        background: linear-gradient(
+          177deg,
+          rgba(165, 200, 199, 0.1) 0%,
+          rgba(108, 151, 149, 0) 100%
+        );
+        border: 1px solid;
+        border-image: linear-gradient(
+            180deg,
+            rgba(128, 141, 154, 0.3),
+            rgba(73, 84, 97, 0)
+          )
+          1 1;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseTeamWork/problemRectify/indexFeedback.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="problemRectifyIndexTrackPanel loveflow">
+    <tableMain>
+      <div class="problemRectifyIndexTrackWrap">
+        <div class="titleWrap">
+          <div
+            class="backBtn"
+            @click="gotoPage('/teamWork/problemRectify/indexTrack')"
+          >
+            <img :src="backIcon" />返回
+          </div>
+        </div>
+        <div class="btmBody">
+          <div class="flexSpaceBetween">
+            <div class="tableOperator"></div>
+            <div class="searchWrap">
+              <el-form
+                :inline="true"
+                :model="queryParam"
+                class="demo-form-inline"
+              >
+                <el-form-item label="关键词">
+                  <el-input
+                    v-model="queryParam.name"
+                    placeholder="请输入企业名称"
+                  ></el-input>
+                </el-form-item>
+
+                <el-form-item label="整改状态">
+                  <el-select
+                    style="width: 160px"
+                    v-model="queryParam.kf"
+                    placeholder=""
+                  >
+                    <el-option label="已完成" value="1"></el-option>
+                    <el-option label="整改中" value="2"></el-option>
+                    <el-option label="未整改" value="3"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="整改反馈时间">
+                  <el-date-picker
+                    style="width: 360px"
+                    v-model="queryParam.time"
+                    type="datetimerange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="处置方式">
+                  <el-select
+                    style="width: 160px"
+                    v-model="queryParam.type"
+                    placeholder=""
+                  >
+                    <el-option label="企业提醒" value="1"></el-option>
+                    <el-option label="核实消警" value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="searchQuery"
+                    >查询</el-button
+                  >
+                  <el-button type="primary" plain @click="searchReset"
+                    >重置</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+          <div class="tableWrap">
+            <div class="wtzgPanel">
+              <div
+                class="wtzgWrap"
+                v-for="(item, index) in dataSource"
+                :key="item.id + index"
+              >
+                <div class="wtzgRow">
+                  <div class="wtzgCol">
+                    <div class="label">企业名称：</div>
+                    <div class="value" style="color: #ffe6d9">
+                      {{ item.cmy }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改内容：</div>
+                    <div class="value">
+                      {{ item.flowType }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改状态：</div>
+                    <div class="value">
+                      <span v-if="item.iszg == 0" style="color: #fda722"
+                        >整改中</span
+                      >
+                      <span v-if="item.iszg == 1" style="color: #4cf993"
+                        >已完成整改</span
+                      >
+                      <span v-if="item.iszg == 2" style="color: #ff6262"
+                        >超期整改</span
+                      >
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改耗时：</div>
+                    <div class="value">{{ item.times }}小时</div>
+                  </div>
+                </div>
+                <div class="wtzgRow">
+                  <div class="wtzgCol">
+                    <div class="label">整改反馈时间：</div>
+                    <div class="value">
+                      {{ item.date }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改反馈内容：</div>
+                    <div class="value">
+                      {{ item.remarks }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">处置方式：</div>
+                    <div class="value">
+                      {{ item.way }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改反馈附件：</div>
+                    <div class="value"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <gMainTable
+              border
+              stripe
+              ref="gMainTable"
+              :tableData="dataSource"
+              :columns="columns"
+              rowKey="id"
+              :pagination="ipagination"
+              @pageSizeChange="handlePageSizeChange"
+              @currentPageChange="handleCurrentPageChange"
+            >
+            </gMainTable>
+          </div>
+        </div>
+      </div>
+    </tableMain>
+  </div>
+</template>
+<script>
+import tableMain from "../components/tableMain.vue";
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+export default {
+  components: { tableMain },
+  mixins: [tableListMixins],
+  data() {
+    return {
+      backIcon: require("@/assets/images/topic/left.png"),
+      columns: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    gotoPage(path) {
+      this.$router.push({
+        path: path,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.problemRectifyIndexTrackPanel {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+  color: #ffffff;
+  overflow: hidden;
+  .problemRectifyIndexTrackWrap {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .titleWrap {
+      display: flex;
+      align-items: center;
+      height: 46px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #ebfff4;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 9px rgba(21, 255, 195, 0.6);
+      border-bottom: solid 1px rgba(91, 116, 140, 0.6);
+      .backBtn {
+        display: flex;
+        align-items: center;
+        img {
+          margin-right: 2px;
+          width: 20px;
+          height: 20px;
+        }
+        &:hover {
+          opacity: 0.8;
+          cursor: pointer;
+        }
+      }
+    }
+    .btmBody {
+      padding-top: vw(14);
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 50px);
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .tableWrap {
+        height: 100%;
+        overflow: hidden;
+        .wtzgPanel {
+          overflow-y: scroll;
+          height: calc(100% - 50px);
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          .wtzgWrap {
+            height: vw(108);
+            background: url("~@/assets/images/team/wtzggzb.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            margin-bottom: vw(16);
+            .wtzgRow {
+              padding: 0 vw(14);
+              display: flex;
+              align-items: center;
+              .wtzgCol {
+                display: flex;
+                align-items: center;
+                flex: 1;
+              }
+              .label {
+                font-size: vw(14);
+                color: #d0deee;
+              }
+              .value {
+                font-weight: 400;
+                font-size: vw(14);
+                color: #ffffff;
+              }
+            }
+          }
+        }
+
+        .el-table {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseTeamWork/problemRectify/indexTrack.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="problemRectifyIndexTrackPanel loveflow">
+    <tableMain>
+      <div class="problemRectifyIndexTrackWrap">
+        <div class="titleWrap">
+          <div class="backBtn" @click="gotoPage('/teamWork/problemRectify')">
+            <img :src="backIcon" />返回
+          </div>
+        </div>
+        <div class="btmBody">
+          <div class="flexSpaceBetween">
+            <div class="tableOperator"></div>
+            <div class="searchWrap">
+              <el-form
+                :inline="true"
+                :model="queryParam"
+                class="demo-form-inline"
+              >
+                <el-form-item label="关键词">
+                  <el-input
+                    v-model="queryParam.name"
+                    placeholder="请输入企业名称"
+                  ></el-input>
+                </el-form-item>
+
+                <el-form-item label="整改状态">
+                  <el-select v-model="queryParam.kf" placeholder="">
+                    <el-option label="已完成" value="1"></el-option>
+                    <el-option label="整改中" value="2"></el-option>
+                    <el-option label="未整改" value="3"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="整改比例">
+                  <div class="flex-center">
+                    <el-input-number
+                      style="width: 120px"
+                      :min="0"
+                      :max="100"
+                      v-model="queryParam.min"
+                      placeholder=""
+                    ></el-input-number>
+                    <span style="color: #495e70; padding: 0 4px">-</span>
+                    <el-input-number
+                      style="width: 120px"
+                      :min="0"
+                      :max="100"
+                      v-model="queryParam.max"
+                      placeholder=""
+                    ></el-input-number>
+                  </div>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="searchQuery"
+                    >查询</el-button
+                  >
+                  <el-button type="primary" plain @click="searchReset"
+                    >重置</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+          <div class="tableWrap">
+            <div class="wtzgPanel">
+              <div
+                class="wtzgWrap"
+                v-for="(item, index) in dataSource"
+                :key="item.id + index"
+              >
+                <div class="wtzgRow">
+                  <div class="wtzgCol">
+                    <div class="label">企业名称：</div>
+                    <div
+                      class="value qymc"
+                      style="color: #ffe6d9"
+                      @click="
+                        gotoPage('/teamWork/problemRectify/indexFeedback')
+                      "
+                    >
+                      {{ item.cmy }}
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改状态：</div>
+                    <div class="value">
+                      <span v-if="item.iszg == 0" style="color: #fda722"
+                        >整改中</span
+                      >
+                      <span v-if="item.iszg == 1" style="color: #4cf993"
+                        >已完成整改</span
+                      >
+                      <span v-if="item.iszg == 2" style="color: #ff6262"
+                        >超期整改</span
+                      >
+                    </div>
+                  </div>
+                  <div class="wtzgCol">
+                    <div class="label">整改进度：</div>
+                    <div class="valueWrap">
+                      <div class="rateBg">
+                        <div
+                          class="rate"
+                          :style="{ width: item.rate + '%' }"
+                        ></div>
+                      </div>
+                      <div class="rateWrap">{{ item.rate + "%" }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="wtzgRow">
+                  <div class="label">已整改内容：</div>
+                  <div class="valueRow">
+                    <div
+                      class="valueWrap"
+                      v-for="(list, _index) in item.yList"
+                      :key="list"
+                    >
+                      <div class="icon">{{ _index + 1 }}</div>
+                      <div class="value">{{ list }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="wtzgRow">
+                  <div class="label">未整改内容：</div>
+                  <div class="valueRow">
+                    <div
+                      class="valueWrap wtwzgValue"
+                      v-for="(list, _index) in item.wList"
+                      :key="list"
+                    >
+                      <div class="icon">{{ _index + 1 }}</div>
+                      <div class="value">{{ list }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <gMainTable
+              border
+              stripe
+              ref="gMainTable"
+              :tableData="dataSource"
+              :columns="columns"
+              rowKey="id"
+              :pagination="ipagination"
+              @pageSizeChange="handlePageSizeChange"
+              @currentPageChange="handleCurrentPageChange"
+            >
+            </gMainTable>
+          </div>
+        </div>
+      </div>
+    </tableMain>
+  </div>
+</template>
+<script>
+import tableMain from "../components/tableMain.vue";
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+export default {
+  components: { tableMain },
+  mixins: [tableListMixins],
+  data() {
+    return {
+      backIcon: require("@/assets/images/topic/left.png"),
+      columns: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+      ],
+    };
+  },
+  created() {
+    this.dataSource = [];
+    for (let i = 0; i < 20; i++) {
+      this.dataSource.push({
+        cmy: "海兴达化工有限公司" + i,
+        iszg: i % 3,
+        rate: (i % 9) * 10,
+        yList: [
+          "流动人员异常",
+          "重点岗位资质异常",
+          "车辆违规异常",
+          "人防配置情况异常",
+        ],
+        wList: [
+          "技防配置情况异常",
+          "企业应急预案制定异常",
+          "危化品车辆状态异常",
+          "人防设施情况异常",
+        ],
+      });
+    }
+  },
+  methods: {
+    gotoPage(path) {
+      this.$router.push({
+        path: path,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.problemRectifyIndexTrackPanel {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+  color: #ffffff;
+  overflow: hidden;
+  .problemRectifyIndexTrackWrap {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .titleWrap {
+      display: flex;
+      align-items: center;
+      height: 46px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #ebfff4;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 9px rgba(21, 255, 195, 0.6);
+      border-bottom: solid 1px rgba(91, 116, 140, 0.6);
+      .backBtn {
+        display: flex;
+        align-items: center;
+        img {
+          margin-right: 2px;
+          width: 20px;
+          height: 20px;
+        }
+        &:hover {
+          opacity: 0.8;
+          cursor: pointer;
+        }
+      }
+    }
+    .btmBody {
+      padding-top: vw(14);
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 50px);
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .tableWrap {
+        height: 100%;
+        overflow: hidden;
+        .wtzgPanel {
+          overflow-y: scroll;
+          height: calc(100% - 50px);
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          .wtzgWrap {
+            height: vw(108);
+            background: url("~@/assets/images/team/wtzggzb.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            margin-bottom: vw(16);
+            .wtzgRow {
+              padding: 0 vw(14);
+              display: flex;
+              align-items: center;
+              .wtzgCol {
+                display: flex;
+                align-items: center;
+                flex: 1;
+                .qymc {
+                  &:hover {
+                    cursor: pointer;
+                    opacity: 0.8;
+                  }
+                }
+              }
+              .label {
+                font-size: vw(14);
+                color: #d0deee;
+              }
+              .value {
+                font-weight: 400;
+                font-size: vw(14);
+                color: #ffffff;
+              }
+              .valueRow {
+                display: flex;
+                justify-content: space-evenly;
+                align-items: center;
+                flex: 1;
+              }
+              .valueWrap {
+                display: flex;
+                align-items: center;
+                flex: 1;
+                .rateBg {
+                  display: flex;
+                  align-items: center;
+                  width: vw(220);
+                  height: vw(10);
+                  background-color: rgba(255, 255, 255, 0.1);
+                  .rate {
+                    height: vw(8);
+                    background: linear-gradient(
+                      270deg,
+                      rgba(253, 242, 56, 1) 0%,
+                      #f4bf15 50%,
+                      #fbc161 100%
+                    );
+                  }
+                }
+                .icon {
+                  margin-right: vw(4);
+                  width: vw(18);
+                  height: vw(18);
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: #4cf993;
+                  border: solid 1px #4cf993;
+                  border-radius: 2px;
+                  font-size: vw(12);
+                }
+              }
+              .rateWrap {
+                margin-left: vw(6);
+                font-weight: 400;
+                font-size: vw(16);
+                color: #ffd69c;
+              }
+              .wtwzgValue {
+                .icon {
+                  color: #ff6262;
+                  border: solid 1px #ff6262;
+                }
+              }
+            }
+          }
+        }
+
+        .el-table {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseTeamWork/riskHandle/index.vue

@@ -36,7 +36,7 @@
                   </el-date-picker>
                 </el-form-item>
 
-                <el-form-item label="关键字">
+                <el-form-item label="关键词">
                   <el-input
                     v-model="queryParam.key"
                     placeholder="请输入姓名、身份证"

src/views/enterpriseTeamWork/riskOverview/indexDuty.vue

@@ -16,7 +16,7 @@
                 :model="queryParam"
                 class="demo-form-inline"
               >
-                <el-form-item label="关键字">
+                <el-form-item label="关键词">
                   <el-input
                     v-model="queryParam.name"
                     placeholder="请输入企业名称"
@@ -70,19 +70,6 @@
                   {{ scope.row.id }}
                 </span>
               </template>
-              <template v-slot:iszgSlot="{ scope }">
-                <div class="gouWrap" v-if="scope.row.state == 0"></div>
-              </template>
-              <template v-slot:msgSlot="{ scope }">
-                <div
-                  @click="sendMsg(scope.row)"
-                  class="msgfWrap"
-                  v-if="scope.row.msg == 0"
-                >
-                  发送超期提醒
-                </div>
-                <div class="msgWrap" v-if="scope.row.msg == 1">已经发送</div>
-              </template>
               <template v-slot:jjSlot="{ scope }">
                 <div class="ybWrap" v-if="scope.row.jj == 0">
                   <div class="text">一般</div>
@@ -94,20 +81,6 @@
                   <div class="text">紧急</div>
                 </div>
               </template>
-              <template v-slot:stateSlot="{ scope }">
-                <div class="failWrap" v-if="scope.row.state == 0">
-                  <div class="text">未完成</div>
-                </div>
-                <div class="ingWrap" v-if="scope.row.state == 1">
-                  <div class="text">整改中</div>
-                </div>
-                <div class="finishWrap" v-if="scope.row.state == 2">
-                  <div class="text">已完成</div>
-                </div>
-              </template>
-              <template v-slot:optSlot="{ scope }">
-                <div class="clickText" @click="deal(scope.row)">挂牌督办</div>
-              </template>
             </gMainTable>
           </div>
         </div>
@@ -144,6 +117,7 @@ export default {
         {
           prop: "qyName",
           label: "企业名称",
+          rowSpan: 4,
         },
         {
           prop: "flowType",
@@ -316,6 +290,45 @@ export default {
         path: "/teamWork/riskOverview",
       });
     },
+
+    // 合并单元格函数
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      let data = this.dataSource;
+      // data 就是从这里动态传过来的, column.property是表头的key
+      if (columnIndex == 1) {
+        var spanArr = this.getSpanArr(data);
+        console.log(spanArr);
+        const _row = spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col,
+        };
+      }
+    },
+    // 处理合并行的数据
+    getSpanArr(data) {
+      console.log(data);
+      let spanKey = "qyName";
+      var spanArr = [];
+      var pos = "";
+      for (var i = 0; i < data.length; i++) {
+        if (i === 0) {
+          spanArr.push(1);
+          pos = 0;
+        } else {
+          // 判断当前元素与上一个元素是否相同
+          if (data[i][spanKey] == data[i - 1][spanKey]) {
+            spanArr[pos] += 1;
+            spanArr.push(0);
+          } else {
+            spanArr.push(1);
+            pos = i;
+          }
+        }
+      }
+      return spanArr;
+    },
   },
 };
 </script>

src/views/enterpriseTeamWork/riskOverview/indexRisk.vue

@@ -16,7 +16,7 @@
                 :model="queryParam"
                 class="demo-form-inline"
               >
-                <el-form-item label="关键字">
+                <el-form-item label="关键词">
                   <el-input
                     v-model="queryParam.key"
                     placeholder="请输入企业名称"
@@ -41,7 +41,7 @@
                         v-model="queryParam.min"
                         placeholder=""
                       ></el-input-number>
-                      <span>-</span>
+                      <span style="color: #495e70; padding: 0 4px">-</span>
                       <el-input-number
                         :min="0"
                         v-model="queryParam.max"

src/views/enterpriseTopic/antiAttack/indexDetail.vue

@@ -25,7 +25,7 @@
         </div>
         <div class="searchWrap">
           <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-            <el-form-item label="关键字">
+            <el-form-item label="关键词">
               <el-input
                 v-model="queryParam.key"
                 placeholder="请输入公司名称"

src/views/enterpriseTopic/dangerTransport/index.vue

@@ -20,7 +20,7 @@
         <div class="tableOperator"></div>
         <div class="searchWrap">
           <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-            <el-form-item label="关键字">
+            <el-form-item label="关键词">
               <el-input
                 v-model="queryParam.key"
                 placeholder="请输入姓名、身份证"

src/views/enterpriseTopic/inSecurity/indexDetail.vue

@@ -11,7 +11,7 @@
                 <el-option label="类型二" value="beijing"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="关键字">
+            <el-form-item label="关键词">
               <el-input
                 v-model="queryParam.key"
                 placeholder="请输入公司名称、信用代码等"

src/views/enterpriseTopic/personSafety/flowPerson.vue

@@ -22,7 +22,7 @@
       </div>
       <div class="searchWrap">
         <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-          <el-form-item label="关键字">
+          <el-form-item label="关键词">
             <el-input
               v-model="queryParam.key"
               placeholder="请输入姓名、身份证"

src/views/enterpriseTopic/personSafety/keyPerson.vue

@@ -22,7 +22,7 @@
       </div>
       <div class="searchWrap">
         <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-          <el-form-item label="关键字">
+          <el-form-item label="关键词">
             <el-input
               v-model="queryParam.key"
               placeholder="请输入姓名、身份证"

src/views/enterpriseTopic/personSafety/workPerson.vue

@@ -22,7 +22,7 @@
       </div>
       <div class="searchWrap">
         <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-          <el-form-item label="关键字">
+          <el-form-item label="关键词">
             <el-input
               v-model="queryParam.key"
               placeholder="请输入姓名、身份证"