Merge pull request 'lukeyan' (#66) from lukeyan into master

Reviewed-on: #66

src/api/systemManagement/companyScore/index.js

@@ -7,4 +7,12 @@ export function getSafeCompany(params) {
         method: 'post',
         params
     })
+}
+// 请求企业赋分表格主页
+export function getSafeCompanyDetail(params) {
+    return request({
+        url: '/safety/system/tbSafeCompanyScoreDetail/getSafeCompanyScoreDetail',
+        method: 'post',
+        params
+    })
 }

src/router/index.js

@@ -62,12 +62,18 @@ const routes = [
                 name: 'companyScore',
                 component: () => import('@/views/systemManagement/companyScore'),
               },
-              // 企业名单
+              // 企业赋分详情
               {
-                path: 'companyList',
-                name: 'companyList',
-                component: () => import('@/views/systemManagement/companyList'),
+                path: 'companyDetails',
+                name: 'companyDetails',
+                component: () => import('@/views/systemManagement/companyScore/components/companyDetails'),
               },
+              // 企业名单
+              // {
+              //   path: 'companyList',
+              //   name: 'companyList',
+              //   component: () => import('@/views/systemManagement/companyList'),
+              // },
               // 关联设备
               {
                 path: 'correlationEquipment',
@@ -86,7 +92,13 @@ const routes = [
                 component: () => import('@/views/systemManagement/companyList'),
               }
             ]
-          }
+          },
+          // 闭环处置
+          {
+            path: 'closeLoopDispose',
+            name: 'closeLoopDispose',
+            component: () => import('@/views/closeLoopDispose'),
+          },
         ]
       },
       {

src/views/closeLoopDispose/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- 闭环处置 -->
+  <el-card class="box-card">
+    <div class="topZS"></div>
+    <div class="bottomZS"></div>
+    <div slot="header" class="clearfix">
+      <span>闭环处置</span>
+    </div>
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="我的流程" name="first">我的流程</el-tab-pane>
+      <el-tab-pane label="代办任务" name="second">代办任务</el-tab-pane>
+      <el-tab-pane label="已办任务" name="third">已办任务</el-tab-pane>
+      <el-tab-pane label="抄送我的" name="fourth">抄送我的</el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+<script>
+export default {
+  name: "CloseLoopDispose",
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  border: 0px;
+  width: 98vw;
+  height: 88.8vh; /* 控制card布局高度,用于适配 */
+  margin-top: 2vh;
+  margin-left: 1vw;
+  position: relative;
+  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+  background-size: 100% 100% !important;
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+}
+/deep/.el-tabs__active-bar.is-top {
+  background: #33cccc;
+}
+/deep/.el-tabs__item.is-top {
+  color: #fff;
+  font-size: 17px;
+}
+/deep/.el-tabs__item.is-top:focus,
+.el-tabs__item.is-top:hover {
+  color: #fff;
+  font-size: 17px;
+  background: linear-gradient(to bottom, #284f49, #2f6363, #233b38) !important;
+}
+</style>

src/views/head.vue

@@ -12,7 +12,7 @@
         <div class="shu"></div>
         <el-menu-item index="2" route="/home">实时预警</el-menu-item>
         <div class="shu"></div>
-        <el-menu-item index="3" route="/home">闭环处置</el-menu-item>
+        <el-menu-item index="3" route="/home/closeLoopDispose">闭环处置</el-menu-item>
         <div class="shu"></div>
         <el-menu-item index="4" route="/home">要素资源</el-menu-item>
         <div class="shu"></div>

src/views/systemManagement/companyScore/components/companyDetails.vue

@@ -0,0 +1,624 @@
+<template>
+  <!-- 企业赋分 -->
+  <el-card class="box-card">
+    <div class="topZS"></div>
+    <div class="bottomZS"></div>
+    <div slot="header" class="clearfix">
+      <span>企业赋分</span>
+    </div>
+    <div class="cardBody">
+      <div class="search_top">
+        <div class="left">{{ this.company_name }}</div>
+        <div class="right">
+          <el-select v-model="search_select" @change="date_select">
+            <el-option
+              v-for="item in day_list"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-if="this.search_date === '1'"
+            v-model="month_date"
+            type="month"
+            @change="month_change"
+            value-format="yyyy-MM"
+            placeholder="选择月"
+          >
+          </el-date-picker>
+          <Season
+            v-if="this.search_date === '2'"
+            ref="season"
+            :show_value="show_value"
+            @getValue="getValue"
+            @get_season_param="get_season_param"
+          ></Season>
+          <el-date-picker
+            v-if="this.search_date === '3'"
+            v-model="year_date"
+            type="year"
+            @change="year_change"
+            value-format="yyyy"
+            placeholder="选择年"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="company_data">
+        <div class="company_data_left">
+          <div class="data_one">综合平安指数</div>
+          <div class="data_two">{{ this.company_score }}</div>
+        </div>
+        <div class="company_data_right">
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_01"></div>
+            </div>
+            <div class="score_name">防疫安全</div>
+            <div class="score_num">
+              {{ this.score_one }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_02"></div>
+            </div>
+            <div class="score_name">人员安全</div>
+            <div class="score_num">
+              {{ this.score_two }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_03"></div>
+            </div>
+            <div class="score_name">消防安全</div>
+            <div class="score_num">
+              {{ this.score_three }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_04"></div>
+            </div>
+            <div class="score_name">危化运输安全</div>
+            <div class="score_num">
+              {{ this.score_four }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_05"></div>
+            </div>
+            <div class="score_name">列管物品安全</div>
+            <div class="score_num">
+              {{ this.score_five }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_06"></div>
+            </div>
+            <div class="score_name">内部治安安全</div>
+            <div class="score_num">
+              {{ this.score_six }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_07"></div>
+            </div>
+            <div class="score_name">消防道路安全</div>
+            <div class="score_num">
+              {{ this.score_seven }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_08"></div>
+            </div>
+            <div class="score_name">防攻击安全</div>
+            <div class="score_num">
+              {{ this.score_eight }}
+            </div>
+          </div>
+          <div class="score_portion">
+            <div class="score_img">
+              <div class="img_box img_09"></div>
+            </div>
+            <div class="score_name">网络安全</div>
+            <div class="score_num">
+              {{ this.score_nine }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="company_bottom">
+        <div class="left_table">
+          <div class="left_table_title">赋分</div>
+          <IndexTable ref="indexTable"></IndexTable>
+        </div>
+        <div class="right_table">
+          <DetailsTable
+            ref="detailsTable"
+            :company_id="company_id"
+          ></DetailsTable>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+  <script>
+import Season from "./season";
+import IndexTable from "./indexTable";
+import DetailsTable from "./detailsTable";
+import { getSafeCompany } from "@/api/systemManagement/companyScore";
+export default {
+  name: "CompanyDetails",
+  components: {
+    Season,
+    IndexTable,
+    DetailsTable,
+  },
+  data() {
+    return {
+      deatail_data: {},
+      search_select: "月度", // 度下拉
+      search_date: "1",
+      date_state: "",
+      month_date: "",
+      season_date: "", // 季度值
+      year_date: "",
+      statistics_date: "", // 接收最终的日期值，无论是月，季，年
+      day_list: [
+        {
+          value: "month",
+          label: "月度",
+        },
+        {
+          value: "season",
+          label: "季度",
+        },
+        {
+          value: "year",
+          label: "年度",
+        },
+      ],
+      company_id: "",
+      company_name: "",
+      company_score: "",
+      score_one: "",
+      score_two: "",
+      score_three: "",
+      score_four: "",
+      score_five: "",
+      score_six: "",
+      score_seven: "",
+      score_eight: "",
+      score_nine: "",
+      show_value: "",
+    };
+  },
+  created() {
+    console.log("params", this.$route.query);
+    this.deatail_data = this.$route.query;
+    this.company_id = this.deatail_data.companyId // 进入该页面的公司id, 传给右下表格的查询条件
+    if (this.deatail_data.scoreType === "month") {
+      this.search_select = "月度";
+      this.search_date = "1";
+      this.month_date = this.deatail_data.statisticsDate;
+    } else if (this.deatail_data.scoreType === "season") {
+      this.search_select = "季度";
+      this.search_date = "2";
+      this.show_value = this.deatail_data.showValue;
+      console.log("this.show_value123", this.show_value);
+    } else if (this.deatail_data.scoreType === "year") {
+      this.search_select = "年度";
+      this.search_date = "3";
+      this.year_date = this.deatail_data.statisticsDate;
+    }
+    this.company_name = this.deatail_data.companyName;
+    this.company_score = this.deatail_data.score;
+    this.score_one =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[0].score;
+    this.score_two =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[1].score;
+    this.score_three =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[2].score;
+    this.score_four =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[3].score;
+    this.score_five =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[4].score;
+    this.score_six =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[5].score;
+    this.score_seven =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[6].score;
+    this.score_eight =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[7].score;
+    this.score_nine =
+      this.deatail_data.tbSafeCompanyStatisticsScoreDetails[8].score;
+  },
+  mounted() {
+    this.get_time();
+  },
+  methods: {
+    date_select(val) {
+      console.log("val", val);
+      let get_date = new Date();
+      let year = get_date.getFullYear();
+      let month = get_date.getMonth() + 1;
+      month = month < 10 ? "0" + month : month;
+      this.date_state = val;
+      if (val === "month") {
+        this.search_date = "1";
+        this.statistics_date = this.month_date = `${year}-${month}`;
+      } else if (val === "season") {
+        this.search_date = "2";
+        // date_select选中season的时候就会触发get_season_param
+        if (month >= 1 && month <= 3) {
+          this.statistics_date = `${year}-03`;
+        } else if (month >= 4 && month <= 6) {
+          this.statistics_date = `${year}-06`;
+        } else if (month >= 7 && month <= 9) {
+          this.statistics_date = `${year}-09`;
+        } else if (month >= 10 && month <= 12) {
+          this.statistics_date = `${year}-12`;
+        }
+      } else if (val === "year") {
+        this.search_date = "3";
+        this.statistics_date = this.year_date = `${year}`;
+      }
+      // 度选择查询
+      const params = {
+        scoreType: this.date_state,
+        statisticsDate: this.statistics_date,
+        companyName: this.company_name,
+        levelIndex: "1",
+      };
+      getSafeCompany(params).then((res) => {
+        console.log("resss", res);
+        this.add_score_data(res);
+      });
+    },
+    month_change(val) {
+      // 日历月选择
+      console.log("month", val);
+      this.statistics_date = val; // 查询statisticsDate赋值
+      const params = {
+        scoreType: this.date_state,
+        statisticsDate: this.statistics_date,
+        companyName: this.company_name,
+        levelIndex: "1",
+      };
+      getSafeCompany(params).then((res) => {
+        console.log("resss", res);
+        this.add_score_data(res);
+      });
+    },
+    getValue(val) {
+      // 日历季度选择
+      console.log("val123", val);
+      this.statistics_date = val.date; // 查询statisticsDate赋值
+      const params = {
+        scoreType: this.date_state,
+        statisticsDate: this.statistics_date,
+        companyName: this.company_name,
+        levelIndex: "1",
+      };
+      getSafeCompany(params).then((res) => {
+        console.log("resss", res);
+        this.add_score_data(res);
+      });
+    },
+    get_season_param(val) {
+      this.statistics_date = val;
+      console.log(
+        "this.statistics_date_1",
+        JSON.stringify(this.statistics_date)
+      );
+    },
+    year_change(val) {
+      // 日历年度选择
+      console.log("year", val);
+      this.statistics_date = val; // 查询statisticsDate赋值
+      const params = {
+        scoreType: this.date_state,
+        statisticsDate: this.statistics_date,
+        companyName: this.company_name,
+        levelIndex: "1",
+      };
+      getSafeCompany(params).then((res) => {
+        console.log("resss", res);
+        this.add_score_data(res);
+      });
+    },
+    get_time() {
+      let get_date = new Date();
+      let year = get_date.getFullYear();
+      let month = get_date.getMonth() + 1;
+      month = month < 10 ? "0" + month : month;
+      this.month_date = `${year}-${month}`;
+    },
+    // 给列表添加数据
+    add_score_data(res) {
+      // 切换查询条件时先全部清空一次
+      (this.company_score = ""),
+        (this.score_one = ""),
+        (this.score_two = ""),
+        (this.score_three = ""),
+        (this.score_four = ""),
+        (this.score_five = ""),
+        (this.score_six = ""),
+        (this.score_seven = ""),
+        (this.score_eight = ""),
+        (this.score_nine = ""),
+        (this.company_score = res.rows[0].score);
+      this.score_one = res.rows[0].tbSafeCompanyStatisticsScoreDetails[0].score;
+      this.score_two = res.rows[0].tbSafeCompanyStatisticsScoreDetails[1].score;
+      this.score_three =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[2].score;
+      this.score_four =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[3].score;
+      this.score_five =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[4].score;
+      this.score_six = res.rows[0].tbSafeCompanyStatisticsScoreDetails[5].score;
+      this.score_seven =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[6].score;
+      this.score_eight =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[7].score;
+      this.score_nine =
+        res.rows[0].tbSafeCompanyStatisticsScoreDetails[8].score;
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  border: 0px;
+  height: 88.5vh; /* 控制card布局高度,用于适配 */
+  position: relative;
+  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+  background-size: 100% 100% !important;
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+}
+.cardBody {
+  .search_top {
+    width: 85.2vw;
+    height: 4.3vh;
+    // border: 0.1px solid #4d8f89;
+    display: flex;
+    justify-content: space-between;
+    .left {
+      width: 16vw;
+      height: 4vh;
+      // border: 0.1px solid #4d8f89;
+      font-size: 20px;
+      font-weight: 600;
+      color: #fff;
+      line-height: 4vh;
+      // text-align: center;
+    }
+    .right {
+      display: flex;
+      justify-content: space-between;
+      width: 21vw;
+      /deep/.el-input--suffix .el-input__inner {
+        color: #fff;
+        border: 0.1px solid #34a6a6;
+        border-radius: 0px;
+        background: rgba(0, 0, 0, 0);
+        width: 10vw;
+        height: 4vh;
+      }
+      /deep/ .el-input.el-input--prefix {
+        width: 10vw;
+      }
+      /deep/.el-input__icon {
+        color: #fff;
+        line-height: 4vh;
+        height: 4vh;
+      }
+      /deep/ .search_right_input.el-input {
+        .el-input__inner {
+          color: #fff;
+          border: 0.1px solid #495e70;
+          border-radius: 0px;
+          background: rgba(0, 0, 0, 0);
+          width: 10vw;
+          height: 4vh;
+        }
+      }
+    }
+  }
+  .company_data {
+    width: 85.2vw;
+    height: 18vh;
+    // border: 0.1px solid #4d8f89;
+    margin-top: 1vh;
+    display: flex;
+    justify-content: space-around;
+    .company_data_left {
+      margin-top: 1vh;
+      width: 15vw;
+      height: 16vh;
+      background: url("~@/assets/companyFile/020201.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      //   border: 0.1px solid #4d8f89;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .data_one {
+        width: 15vw;
+        height: 7vh;
+        // border: 0.1px solid #4d8f89;
+        color: #fff;
+        font-size: 30px;
+        font-weight: 700;
+        text-align: center;
+        line-height: 7vh;
+        // background: url("~@/assets/companyFile/020201.png") no-repeat !important;
+        // background-size: 100% 100% !important;
+      }
+      .data_two {
+        width: 15vw;
+        height: 7vh;
+        // border: 0.1px solid #4d8f89;
+        color: #fff;
+        font-size: 30px;
+        font-weight: 700;
+        text-align: center;
+        line-height: 7vh;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        // background: url("~@/assets/companyFile/020201.png") no-repeat !important;
+        // background-size: 100% 100% !important;
+      }
+    }
+    .company_data_right {
+      margin-top: 1vh;
+      width: 69vw;
+      height: 16vh;
+      //   border: 0.1px solid #4d8f89;
+      background: linear-gradient(
+        to right,
+        #284f49,
+        #1a2529,
+        #233b38
+      ) !important;
+      display: flex;
+      justify-content: space-around;
+      .score_portion {
+        width: 7vw;
+        height: 16vh;
+        // border: 0.1px solid #4d8f89;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .score_img {
+          width: 7vw;
+          height: 8vh;
+          //   border: 0.1px solid #4d8f89;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .img_box.img_01 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score01.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_02 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score02.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_03 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score03.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_04 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score04.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_05 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score05.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_06 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score06.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_07 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score07.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_08 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score08.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+          .img_box.img_09 {
+            width: 3.5vw;
+            height: 6vh;
+            background: url("~@/assets/companyFile/score09.png") no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+        }
+        .score_name {
+          width: 7vw;
+          height: 4vh;
+          //   border: 0.1px solid #4d8f89;
+          color: #fff;
+          font-size: 20px;
+          font-weight: 500;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          text-align: center;
+          line-height: 4vh;
+        }
+        .score_num {
+          width: 7vw;
+          height: 4vh;
+          //   border: 0.1px solid #4d8f89;
+          text-align: center;
+          line-height: 4vh;
+          color: #fff;
+          font-size: 18px;
+          font-weight: 700;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+      }
+    }
+  }
+  .company_bottom {
+    width: 85.2vw;
+    height: 54vh;
+    // border: 0.1px solid #4d8f89;
+    margin-top: 1vh;
+    display: flex;
+    justify-content: space-between;
+    .left_table {
+      width: 32vw;
+      height: 54vh;
+      //   border: 0.1px solid #4d8f89;
+      .left_table_title {
+        color: #fff;
+        font-size: 18px;
+        font-weight: 500;
+        height: 2vh;
+      }
+    }
+    .right_table {
+      margin-top: 3vh;
+      width: 52vw;
+      height: 51vh;
+      background: #141f21;
+      border: 0.1px solid #4d8f89;
+    }
+  }
+}
+</style>

src/views/systemManagement/companyScore/components/companyTable.vue

@@ -9,8 +9,7 @@
     >
       <el-table-column prop="companyName" label="企业名称" width="240">
       </el-table-column>
-      <el-table-column prop="score" label="平安指数">
-      </el-table-column>
+      <el-table-column prop="score" label="平安指数"> </el-table-column>
       <el-table-column label="指标得分">
         <el-table-column
           prop="tbSafeCompanyStatisticsScoreDetails[0].score"
@@ -69,10 +68,7 @@
       </el-table-column>
       <el-table-column prop="operation" label="操作">
         <template slot-scope="scope">
-          <el-button
-            size="small"
-            class="operation"
-            @click="jump(scope.row)"
+          <el-button size="small" class="operation" @click="jump(scope.row)"
             >赋分
           </el-button>
         </template>
@@ -87,6 +83,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    jump_params: {
+      type: Object,
+      default: () => {},
+    }
   },
   data() {
     return {
@@ -95,7 +95,13 @@ export default {
   },
   methods: {
     jump(val) {
-      console.log(val);
+      // console.log("jump_val", val);
+      val = Object.assign(val,this.jump_params)
+      console.log("jump_val", val);
+      this.$router.push({
+        path:'/home/systemManagement/companyDetails',
+        query:val
+      });
     },
     // 表头样式
     table_header({ row, rowIndex }) {
@@ -141,18 +147,18 @@ export default {
   }
 }
 /deep/.el-button.operation {
-    background-color: #182527;
-    border: 0px;
-    color: #2fabdc;
-  }
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
 
-  /deep/.el-button.operation:hover,
-  .el-button.operation:focus {
-    background-color: #182527;
-    border: 0px;
-    color: #2fabdc;
-    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
-  }
+/deep/.el-button.operation:hover,
+.el-button.operation:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
 /deep/.el-table--border::after,
 .el-table--group::after {
   width: 0px;

src/views/systemManagement/companyScore/components/detailsTable.vue

@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <div :title="massage_title" class="note_text">
+      {{ this.note.titleNote }}
+    </div>
+    <div class="input_text">
+      {{ this.input_text }}
+    </div>
+    <div class="input_body">
+      <el-input
+        v-model="person_input"
+        placeholder="请输入数量                                                  (人)"
+      ></el-input>
+      <el-button>提交</el-button>
+    </div>
+    <div class="table_body">
+      <el-table
+        :data="detail_table_data"
+        class="company_table"
+        :header-cell-style="table_header"
+        :cell-style="{ background: 'revert', 'text-align': 'center' }"
+      >
+        <el-table-column
+          v-for="item in table_list"
+          :key="item.prop"
+          :label="item.label"
+        >
+        </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button size="small" class="operation" @click="open(scope.row)"
+              >编辑
+            </el-button>
+            <el-button size="small" class="operation" @click="open(scope.row)"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table_pagination">
+        <el-pagination
+          :background="true"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[4]"
+          :page-size="pageSize"
+          :current-page="pageNum"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/assets/js/eventBus.js";
+import { getIndexTable } from "@/api/systemManagement/safeIndex";
+import { getSafeCompanyDetail } from "@/api/systemManagement/companyScore";
+export default {
+  name: "DetailsTable",
+  props: {
+    company_id: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      note: {}, // 三级指标点击展示字段
+      note_arr: [], // 树形总数据，以用于按照id查询三级数据
+      three_level_id: "",
+      two_level_arr: [], // 遍历出来的二级数据
+      three_level_arr: [], // 遍历出来的三级数据
+      massage_title: "", // 标题文字过多鼠标悬浮展示
+      input_text: "", // 添加人数input框标题
+      person_input: "",
+      table_list: [
+        {
+          prop: "time",
+          label: "填报时间",
+          width: "200",
+        },
+        {
+          prop: "person_num",
+          label: "填报数量(人)",
+          width: "200",
+        },
+        {
+          prop: "warning",
+          label: "预警情况",
+          width: "200",
+        },
+        {
+          prop: "person",
+          label: "填报人",
+        },
+      ],
+      detail_table_data:[],
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  created() {
+    this.get_data();
+  },
+  mounted() {
+    bus.$on("send_three", (data) => {
+      console.log("dataaaa", data);
+      this.three_level_id = data.safeRuleId; // 根据传来的id找对应的三级数据
+      const new_arr = this.three_level_arr.filter(
+        (item) => item.id == this.three_level_id
+      );
+      this.note = JSON.parse(new_arr[0].note);
+      this.input_text = new_arr[0].levelIndexThree;
+      this.massage_title = this.note.titleNote;
+      this.get_detail_data()
+    });
+  },
+  methods: {
+    get_data() {
+      // 先获取到整体的数据，然后再逐层遍历，最终获得全部的三级数据的集合
+      getIndexTable().then((res) => {
+        console.log("res", res.data);
+        this.note_arr = res.data;
+        for (let i = 0; i < this.note_arr.length; i++) {
+          // 拿到所有的二级指标数据数组
+          this.two_level_arr = this.two_level_arr.concat(
+            this.note_arr[i].tbSafeRuleTwoVoList
+          );
+        }
+        for (let i = 0; i < this.two_level_arr.length; i++) {
+          // 拿到所有的三级指标数据数组
+          this.three_level_arr = this.three_level_arr.concat(
+            this.two_level_arr[i].tbSafeRuleThreeVoList
+          );
+        }
+        console.log("this.three_level_arr", this.three_level_arr);
+      });
+    },
+    get_detail_data() {
+      let param = {
+        companyId: this.company_id,
+        safeRuleId: this.three_level_id,
+        pageSize : this.pageSize,
+        pageNum : this.pageNum,
+      };
+      getSafeCompanyDetail(param).then(res=>{
+        this.detail_table_data = res.rows
+        this.total = res.total
+      })
+    },
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #425969",
+      };
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.get_detail_data();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+      this.get_detail_data();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.note_text {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: 51vw;
+  height: 4.5vh;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border-bottom: 0.1px solid #4d8f89;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 4.5vh;
+}
+.input_text {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: 51vw;
+  height: 3vh;
+  color: #fff;
+  font-size: 18px;
+  line-height: 3vh;
+}
+.input_body {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: 51vw;
+  height: 4.5vh;
+  // border: 0.1px solid #4d8f89;
+  display: flex;
+  .el-input {
+    width: 18vw;
+    height: 4.5vh;
+  }
+  /deep/.el-input__inner {
+    width: 15vw;
+    height: 4.5vh;
+    border-radius: 0px;
+    color: #fff;
+    border: 0.1px solid #374956;
+    background: #212d2f;
+  }
+  .el-button {
+    width: 5vw;
+    color: #fff;
+    border: 0.1px solid #374956;
+    border-radius: 0px !important;
+    background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    text-shadow: 0 0 9px #34e1b3;
+    filter: brightness(150%);
+  }
+}
+.table_body {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: 51vw;
+  height: 34vh;
+  // border: 0.1px solid #374956;
+}
+/deep/.el-button.operation {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
+
+/deep/.el-button.operation:hover,
+.el-button.operation:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
+/deep/.el-table {
+  // width: 85.2vw;
+  height: 29vh;
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+
+    & th {
+      background-color: transparent;
+    }
+
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+.table_pagination {
+  width: 51vw;
+  height: 5vh;
+  /deep/.el-input--suffix .el-input__inner {
+    color: #fff;
+    border: 0.1px solid #34a6a6;
+    border-radius: 0px;
+    background: rgba(0, 0, 0, 0);
+    width: 5vw;
+    height: 2.6vh;
+    line-height: 2.6vh;
+  }
+  /deep/.el-input__icon {
+    color: #fff;
+    line-height: 2.6vh;
+    height: 2.6vh;
+  }
+  /deep/.el-pagination {
+    margin-left: 50%;
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    ul {
+      li {
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-next {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      li {
+        background: #3c4b4a !important;
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/companyScore/components/indexTable.vue

@@ -0,0 +1,640 @@
+<!-- 指标表格 -->
+<template>
+  <div class="display">
+    <table>
+      <tr class="table_title">
+        <th class="table_title_one">一级指标</th>
+        <th class="table_title_two">二级指标</th>
+        <th class="table_title_three">三级指标</th>
+      </tr>
+      <!-- 防疫安全 -->
+      <tr class="table_body">
+        <td rowspan="5" @click="click_onelevel('3')">防疫安全</td>
+        <td @click="click_twolevel('4')">疫苗接种数</td>
+        <td @click="click_threelevel('5', '1')">疫苗接种数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('7')">核酸检测率</td>
+        <td @click="click_threelevel('8', '1')">核算检测率</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('9')">场所码数据</td>
+        <td @click="click_threelevel('10', '1')">场所码异常数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('11')" rowspan="2">中高风险返企数</td>
+        <td @click="click_threelevel('12', '1')">境外人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('13', '1')">境内人员</td>
+      </tr>
+      <!-- 人员安全 -->
+      <tr class="table_body">
+        <td rowspan="14" @click="click_onelevel('14')">人员安全</td>
+        <td rowspan="4" @click="click_twolevel('15')">流动人员</td>
+        <td @click="click_threelevel('16', '1')">未登记人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('17', '1')">未注销人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('18', '1')">未变更人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('19', '1')">高危人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="7" @click="click_twolevel('20')">重点人员</td>
+        <td @click="click_threelevel('21', '1')">重性精神病人</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('22', '1')">非访人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('23', '1')">退役重点人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('24', '1')">个人极端人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('25', '1')">前科人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('26', '1')">家暴人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('27', '1')">酗酒人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('28')">重点岗位人员</td>
+        <td @click="click_threelevel('29', '1')">危险品领用、保管、使用人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('30', '1')">危险品技术资质人员</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('31')">专家人员</td>
+        <td @click="click_threelevel('32', '1')">
+          领域内有较高专业知识技术的专家、人才
+        </td>
+      </tr>
+      <!-- 消防安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('33')">消防安全</td>
+        <td rowspan="3" @click="click_twolevel('34')">消防设施维护</td>
+        <td @click="click_threelevel('35', '1')">设备录入率</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('36', '2')">配置合理性</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('37', '1')">日常保养及时率</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('38')">企业台账建设</td>
+        <td @click="click_threelevel('39', '2')">必要资质</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('40', '2')">验收许可或建设许可</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('41', '2')">日常检查表</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('42')">消防制度执行</td>
+        <td @click="click_threelevel('43', '1')">人员培训率</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('44', '2')">演习举办情况</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('45', '2')">管理层专业知晓程度</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="4" @click="click_twolevel('46')">消防事件发生</td>
+        <td @click="click_threelevel('47', '1')">火灾事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('48', '1')">其他事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('49', '1')">消防违建</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('50', '1')">协助扑救</td>
+      </tr>
+      <!-- 危化运输安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('51')">危化运输安全</td>
+        <td rowspan="2" @click="click_twolevel('52')">源头检查</td>
+        <td @click="click_threelevel('53', '1')">区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('54', '1')">区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel('55')">违章数据</td>
+        <td @click="click_threelevel('56', '1')">违停</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('57', '1')">闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('58', '1')">超速</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('59', '1')">疲劳驾驶</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('60', '1')">未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('61')">交通事故</td>
+        <td @click="click_threelevel('62', '1')">经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('63', '1')">伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('64', '1')">泄漏事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('65')">行政/刑事案件</td>
+        <td @click="click_threelevel('66', '2')">有无拘留、判刑</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('67')">企业整改</td>
+        <td @click="click_threelevel('68', '1')">反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('69', '1')">整改反馈未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('70')">企业演习、培训</td>
+        <td @click="click_threelevel('71', '1')">企业演习</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('72', '1')">集中培训学习</td>
+      </tr>
+      <!-- 列管物品安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('73')">列管物品安全</td>
+        <td rowspan="2" @click="click_twolevel('74')">危险化学品</td>
+        <td @click="click_threelevel('75', '1')">
+          易制爆物品生产、购买、销售、储存、使用
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('76', '1')">
+          剧毒物品生产、购买、销售、储存、使用
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('77')">放射源物品</td>
+        <td @click="click_threelevel('78', '1')">放射源储存</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('79', '1')">放射源运输</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('80', '1')">放射源使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('81')">民爆物品</td>
+        <td @click="click_threelevel('82', '1')">烟花爆竹运输、销售、燃放</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('83', '1')">炸药、雷管保管、运输、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('84')">民用枪支管理</td>
+        <td @click="click_threelevel('85', '1')">猎枪</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('86', '1')">竞技体育用枪</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('87', '1')">商业射击馆枪支</td>
+      </tr>
+      <!-- 内部治安安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('88')">内部治安安全</td>
+        <td rowspan="4" @click="click_twolevel('89')">企业三防基础数据</td>
+        <td @click="click_threelevel('90', '2')">企业保卫人员名单</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('91', '2')">企业物防设施清单</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('92', '2')">
+          企业技防前端感知(人脸、车脸、重要部位视频监控)建设
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('93', '2')">企业技防设施连入平台情况</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('94')">
+          企业各类规章制度、应急预案、应急演练
+        </td>
+        <td @click="click_threelevel('95', '2')">规章制度</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('96', '2')">应急预案</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('97', '2')">应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('98')">部门检查及系统研判</td>
+        <td @click="click_threelevel('99', '2')">部门检查合格进行评分</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('100', '2')">
+          部门检查不合格及有缺项的要求企业整改
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('101', '2')">
+          应系统研判(设施过期及设施故障)
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('102')">企业整改</td>
+        <td @click="click_threelevel('103', '1')">企业反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('104', '1')">企业反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('105')">
+          企业发生的案件及企业员工涉及的案件
+        </td>
+        <td @click="click_threelevel('106', '1')">
+          企业发生被盗、被骗等各类案件
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('107', '1')">企业员工涉及的各类案件</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('108', '1')">企业员工涉及的信访等案件</td>
+      </tr>
+      <!-- 道路安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('109')">道路安全</td>
+        <td rowspan="2" @click="click_twolevel('110')">源头检查</td>
+        <td @click="click_threelevel('111', '1')">区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('112', '1')">区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel('113')">违章数据</td>
+        <td @click="click_threelevel('114', '1')">违停</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('115', '1')">闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('116', '1')">超速</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('117', '1')">未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('118', '1')">闯红灯</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('119')">交通事故</td>
+        <td @click="click_threelevel('120', '1')">经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('121', '1')">伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('122')">企业整改</td>
+        <td @click="click_threelevel('123', '1')">反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('124', '1')">反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('125')">企业周边交通设施检查</td>
+        <td @click="click_threelevel('126', '1')">设施完善</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('127', '1')">设施缺失</td>
+      </tr>
+      <!-- 防攻击安全 -->
+      <tr class="table_body">
+        <td rowspan="16" @click="click_onelevel('128')">防攻击安全</td>
+        <td rowspan="6" @click="click_twolevel('129')">企业人防达标情况</td>
+        <td @click="click_threelevel('130', '2')">
+          重要岗位人员是否进行安全背景调查
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('131', '2')">应急力量是否配备</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('132', '2')">是否安排人员24小时值班</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('133', '2')">是否安排巡逻防控力量</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('134', '2')">是否建立联防联动联治机制</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('135', '2')">是否定期开展实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('136')">企业物防达标情况</td>
+        <td @click="click_threelevel('137', '2')">是否有实体防护设施</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('138', '2')">是否配备必要的防爆器械</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('139', '2')">
+          车辆进出口是否安装车辆冲撞设施
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('140')">企业技防达标情况</td>
+        <td @click="click_threelevel('141', '2')">
+          是否全方位安装视频监控系统
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('142', '2')">是否安装访客登记系统</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('143', '2')">
+          是否安装入侵和紧急报警系统
+        </td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('144')">企业整改情况</td>
+        <td @click="click_threelevel('145', '1')">企业反馈完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('146', '1')">企业反馈未完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('147')">
+          企业定期开展反恐实战演练、培训
+        </td>
+        <td @click="click_threelevel('148', '2')">是否定期开展反恐实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('149', '2')">是否定期开展反恐培训</td>
+      </tr>
+      <!-- 网络安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('150')">网络安全</td>
+        <td rowspan="2" @click="click_twolevel('151')">漏洞整改</td>
+        <td @click="click_threelevel('152', '1')">反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('153', '1')">反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('154')">行政案件</td>
+        <td @click="click_threelevel('155', '2')">是否有过行政处罚</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('156')">重大网络安全事件</td>
+        <td @click="click_threelevel('157', '2')">是否发生过</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel('158')">网站应急系统备案</td>
+        <td @click="click_threelevel('159', '2')">网站备案</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('160', '2')">应用备案</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('161', '2')">应用评估</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel('162')">等保定级评审</td>
+        <td @click="click_threelevel('163', '2')">等保定级评审完成/未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel('164')">企业演习、培训</td>
+        <td @click="click_threelevel('165', '2')">应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_threelevel('166', '2')">集中培训学习</td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+import { getIndexTable } from "@/api/systemManagement/safeIndex";
+import bus from "@/assets/js/eventBus.js";
+export default {
+  name: "IndexTable",
+  data() {
+    return {
+      display_data: {},
+      one_index_three_level: [
+        { id: 5, levelIndexThree: "疫苗接种数" },
+        { id: 8, levelIndexThree: "核算检测率" },
+        { id: 10, levelIndexThree: "场所码异常数" },
+        { id: 12, levelIndexThree: "境外人员" },
+        { id: 13, levelIndexThree: "境内人员" },
+      ],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // table_header() {
+    //   return {
+    //     "text-align": "center", // 表头文字居中
+    //     color: "#fff",
+    //   };
+    // },
+    // 获取表格数据
+    getData() {
+      getIndexTable().then((res) => {
+        console.log("res", res);
+        this.display_data = res.data;
+      });
+    },
+    // 一级指标点击事件
+    click_onelevel(id) {
+      let obj = document.querySelectorAll("td");
+      let index = 0;
+      if (id < 6) {
+        index = id - 3;
+      } else {
+        index = id - 4;
+      }
+      obj.forEach((item) => {
+        item.className = "";
+      });
+      obj[index].className = "lightcolor";
+      const massage = {
+        safeRuleId: id,
+        level: "1",
+      };
+      this.$emit("back", massage);
+      bus.$emit("send", massage); // 传给一级指标详情
+    },
+    // 二级点击事件
+    click_twolevel(id) {
+      let obj = document.querySelectorAll("td");
+      let index = 0;
+      if (id < 6) {
+        index = id - 3;
+      } else {
+        index = id - 4;
+      }
+      obj.forEach((item) => {
+        item.className = "";
+      });
+      obj[index].className = "lightcolor";
+      const massage = {
+        safeRuleId: id,
+        level: "2",
+      };
+      this.$emit("back", massage);
+      bus.$emit("send", massage); // 传给二级指标详情
+    },
+    // 三级点击事件
+    click_threelevel(id, num) {
+      const massage = {
+        safeRuleId: id,
+        level: "3",
+        table_num: num,
+      };
+      let obj = document.querySelectorAll("td");
+      console.log("obj", obj);
+      let index = 0;
+      if (id < 6) {
+        index = id - 3;
+      } else {
+        index = id - 4;
+      }
+      obj.forEach((item) => {
+        item.className = "";
+      });
+      obj[index].className = "lightcolor";
+      this.$emit("back", massage);
+      bus.$emit("send_three", massage); // 传给三级指标详情
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.display {
+  width: 32vw;
+  height: 51vh;
+  margin-top: 1vh;
+  overflow-y: scroll;
+  border: 0.1px solid #4d8f89;
+}
+.display::-webkit-scrollbar {
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.display::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+table {
+  width: 31.5vw;
+  height: 50vh;
+  border: 0.1px solid #4d8f89;
+  .table_title {
+    color: #fff;
+    background: linear-gradient(to right, #284f49, #2f6363, #233b38);
+    height: 4vh;
+    .table_title_one {
+      width: 9vw;
+    }
+    .table_title_two {
+      width: 14vw;
+    }
+    .table_title_three {
+      width: 17vw;
+    }
+  }
+  .table_body {
+    color: #fff;
+    font-size: 18px;
+    text-align: center;
+    td {
+      border: 0.1px solid #4d8f89;
+      height: 4vh !important;
+      cursor: pointer;
+    }
+    td:hover {
+      background: #3c4b4a;
+      color: #54ffbe;
+    }
+  }
+}
+.display_title {
+  display: flex;
+  width: 40vw;
+  height: 4vh;
+  background: linear-gradient(to right, #284f49, #2f6363, #233b38);
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  line-height: 4vh;
+  .title_one {
+    width: 9vw;
+  }
+  .title_two {
+    width: 14vw;
+  }
+  .title_three {
+    width: 17vw;
+  }
+}
+.parent {
+  display: flex;
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  border-bottom: 0.2px solid #4d8f89;
+  //   background: #243333;
+  .son_one {
+    width: 9vw;
+    height: 20vh;
+    line-height: 20vh;
+  }
+  .son_two {
+    width: 14vw;
+    display: flex;
+    flex-direction: column;
+    div {
+      height: 5vh;
+      line-height: 5vh;
+    }
+  }
+  .son_three {
+    width: 17vw;
+    display: flex;
+    flex-direction: column;
+    div {
+      height: 4vh;
+      line-height: 4vh;
+    }
+  }
+}
+.lightcolor {
+  background: #3c4b4a;
+  color: #54ffbe;
+}
+</style>

src/views/systemManagement/companyScore/components/season.vue

@@ -106,6 +106,10 @@ export default {
       type: String,
       default: "date",
     },
+    show_value: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -118,6 +122,10 @@ export default {
     };
   },
   created() {
+    // if(this.show_value) {
+    //   this.showValue = this.show_value
+    // }
+
     //如果有默认值，直接用，没有默认值，把当前日期作为默认值
     if (this.defaultValue) {
       this.changeDefaultVal();
@@ -125,7 +133,11 @@ export default {
       this.defaultValue = this.year + "-" + this.month;
       this.changeDefaultVal();
     }
-    console.log("showValue", this.showValue);
+    this.$nextTick(() => {
+      console.log("this.show_value000", this.show_value);
+      this.showValue = this.show_value;
+      console.log("this.showValue", this.showValue);
+    });
   },
   watch: {
     defaultValue(value) {
@@ -150,19 +162,19 @@ export default {
         let month = +arr[1];
         if (month >= 1 && month <= 3) {
           this.showValue = `${this.year}年1季度`;
-          this.season_param = `${this.year}-03`
+          this.season_param = `${this.year}-03`;
         } else if (month >= 4 && month <= 6) {
           this.showValue = `${this.year}年2季度`;
-          this.season_param = `${this.year}-06`
+          this.season_param = `${this.year}-06`;
         } else if (month >= 7 && month <= 9) {
           this.showValue = `${this.year}年3季度`;
-          this.season_param = `${this.year}-09`
+          this.season_param = `${this.year}-09`;
         } else if (month >= 10 && month <= 12) {
           this.showValue = `${this.year}年4季度`;
-          this.season_param = `${this.year}-12`
+          this.season_param = `${this.year}-12`;
         }
-        console.log('this.season_param',this.season_param);
-        this.$emit('get_season_param',this.season_param)
+        console.log("this.season_param", this.season_param);
+        this.$emit("get_season_param", this.season_param, this.showValue);
       }
     },
     prev() {
@@ -186,15 +198,18 @@ export default {
         year: this.year,
         quarter: quarter,
       };
+      this.showValue = `${this.year}年${quarter}季度`;
       //发送事件给父元素
-      this.$emit("getValue", result);
+      this.$emit("getValue", result, this.showValue);
       this.showSeason = false;
-      this.showValue = `${this.year}年${quarter}季度`;
     },
   },
 };
 </script>
 <style lang="less" scoped>
+/deep/.el-card.box-card.is-always-shadow {
+  width: 220px !important;
+}
 .bgCard {
   position: fixed;
   top: 0;

src/views/systemManagement/companyScore/index.vue

@@ -60,6 +60,7 @@
         <CompanyTable
           ref="companyTable"
           :table_data="table_data"
+          :jump_params="jump_params"
         ></CompanyTable>
         <div class="table_pagination">
           <el-pagination
@@ -112,6 +113,8 @@ export default {
           label: "年度",
         },
       ],
+      jump_params:{}, // 跳转时携带入参
+      show_value:'',
       table_data: [],
       pageSize: 10,
       pageNum: 1,
@@ -140,12 +143,14 @@ export default {
       this.date_state = val;
       if (val === "month") {
         this.search_date = "1";
-        this.month_date = `${year}-${month}`;
+        this.statistics_date = this.month_date = `${year}-${month}`;
       } else if (val === "season") {
         this.search_date = "2";
+        // date_select选中season的时候就会触发get_season_param
+        console.log('this.statistics_date_2',this.statistics_date);
       } else if (val === "year") {
         this.search_date = "3";
-        this.year_date = `${year}`;
+        this.statistics_date = this.year_date = `${year}`;
       }
     },
 
@@ -154,13 +159,19 @@ export default {
       console.log("month", val);
       this.statistics_date = val; // 查询statisticsDate赋值
     },
-    getValue(val) {
+    getValue(val,value) {
       // 日历季度选择
       console.log("val123", val);
+      console.log("val123", value);
       this.statistics_date = val.date; // 查询statisticsDate赋值
+      this.show_value = value
     },
-    get_season_param(val) {
-      this.statistics_date = val;
+    // date_select选中season的时候就会触发
+    get_season_param(param,val) {
+      console.log('param_sss',param);
+      console.log('val_Sss',val);
+      this.statistics_date = param;
+      this.show_value = val
     },
     year_change(val) {
       // 日历年度选择
@@ -178,11 +189,16 @@ export default {
       const params = {
         scoreType: this.date_state,
         statisticsDate: this.statistics_date,
-        companyParamName: this.search_company,
+        companyName: this.search_company,
         levelIndex: "1",
         pageNum: this.pageNum,
         pageSize: this.pageSize,
       };
+      this.jump_params = {
+        showValue: this.show_value,
+        scoreType: this.date_state,
+        statisticsDate: this.statistics_date,
+      }
       getSafeCompany(params)
         .then((res) => {
           this.table_data = res.rows;

src/views/systemManagement/safeIndex/components/indexmassageThree.vue

@@ -172,8 +172,8 @@ export default {
       table_num: "", // 1 分值数字表格，2 分值是否表格
       massage_title: "", // 标题文字过多鼠标悬浮展示
       note_arr: [], // 树形总数据，以用于按照id查询三级数据
-      two_level_arr: [], // 遍及出来的二级数据
-      three_level_arr: [], // 遍及出来的三级数据
+      two_level_arr: [], // 遍历出来的二级数据
+      three_level_arr: [], // 遍历出来的三级数据
       three_level_id: "",
       note: "", // 三级指标点击展示字段
       tableData_all: [],