闭环

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

@@ -92,7 +92,13 @@ const routes = [
                 component: () => import('@/views/systemManagement/companyList'),
               }
             ]
-          }
+          },
+          // 闭环处置
+          {
+            path: 'closeLoopDispose',
+            name: 'closeLoopDispose',
+            component: () => import('@/views/closeLoopDispose'),
+          },
         ]
       },
       {

src/utils/request.js

@@ -4,7 +4,7 @@ import vm from "../main";
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  // baseURL: 'http://172.18.113.50:8080/zhapi',
+  //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://192.168.0.188:8888/zhapi',
   baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,

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

@@ -137,23 +137,30 @@
       </div>
       <div class="company_bottom">
         <div class="left_table">
-            <div class="left_table_title">赋分</div>
+          <div class="left_table_title">赋分</div>
-            <IndexTable ref="indexTable"></IndexTable>
+          <IndexTable ref="indexTable"></IndexTable>
+        </div>
+        <div class="right_table">
+          <DetailsTable
+            ref="detailsTable"
+            :company_id="company_id"
+          ></DetailsTable>
         </div>
-        <div class="right_table"></div>
       </div>
     </div>
   </el-card>
 </template>
   <script>
 import Season from "./season";
-import IndexTable from './indexTable'
+import IndexTable from "./indexTable";
+import DetailsTable from "./detailsTable";
 import { getSafeCompany } from "@/api/systemManagement/companyScore";
 export default {
   name: "CompanyDetails",
   components: {
     Season,
-    IndexTable
+    IndexTable,
+    DetailsTable,
   },
   data() {
     return {
@@ -179,6 +186,7 @@ export default {
           label: "年度",
         },
       ],
+      company_id: "",
       company_name: "",
       company_score: "",
       score_one: "",
@@ -196,6 +204,7 @@ export default {
   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";
@@ -595,7 +604,7 @@ export default {
     .left_table {
       width: 32vw;
       height: 54vh;
-    //   border: 0.1px solid #4d8f89;
+      //   border: 0.1px solid #4d8f89;
       .left_table_title {
         color: #fff;
         font-size: 18px;
@@ -604,8 +613,10 @@ export default {
       }
     }
     .right_table {
+      margin-top: 3vh;
       width: 52vw;
-      height: 54vh;
+      height: 51vh;
+      background: #141f21;
       border: 0.1px solid #4d8f89;
     }
   }

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/safeIndex/components/indexmassageThree.vue

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