From ef7ee79f7d8e31d179b61a1fb3e5a5332a0dc8fb Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 15 May 2023 09:09:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=B3=E5=AE=89=E6=8C=87=E6=95=B0=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/systemManagement/safeIndex/index.js   |  19 +-
 .../safeIndex/components/indexTable.vue       | 565 ++++++++++++++++++
 .../safeIndex/components/indexmassageOne.vue  | 180 ++++++
 .../components/indexmassageThree.vue          |  14 +
 .../safeIndex/components/indexmassageTwo.vue  |  14 +
 .../systemManagement/safeIndex/index.vue      | 413 ++++++++++++-
 6 files changed, 1192 insertions(+), 13 deletions(-)
 create mode 100644 src/views/systemManagement/safeIndex/components/indexTable.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageOne.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageThree.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageTwo.vue

diff --git a/src/api/systemManagement/safeIndex/index.js b/src/api/systemManagement/safeIndex/index.js
index ad8ffbd..5a43e7d 100644
--- a/src/api/systemManagement/safeIndex/index.js
+++ b/src/api/systemManagement/safeIndex/index.js
@@ -1,9 +1,26 @@
-// 平安指数模块接口
+// 平安指数模块接口 
 import request from '@/utils/request'
+// 请求综合指数
 export function safeCalculation(params) {
     return request({
         url: '/safety/system/tbSafeCalculationRule/getCalculationRule',
         method: 'post',
         params
     })
+}
+// 修改综合指数
+export function saveSafeCalculation(data) {
+    return request({
+        url: '/safety/system/tbSafeCalculationRule',
+        method: 'put',
+        data
+    })
+}
+// 指标表格数据 
+export function getIndexTable(params) {
+    return request({
+        url: '/safety/system/tbSafeRule/getRuleTree',
+        method: 'post',
+        params
+    })
 }
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexTable.vue b/src/views/systemManagement/safeIndex/components/indexTable.vue
new file mode 100644
index 0000000..5598e3e
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexTable.vue
@@ -0,0 +1,565 @@
+<!-- 指标表格 -->
+<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">疫苗接种数</td>
+        <td>疫苗接种数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">核酸检测率</td>
+        <td>核算检测率</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">场所码数据</td>
+        <td>场所码异常数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel" rowspan="2">中高风险返企数</td>
+        <td>境外人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>境内人员</td>
+      </tr>
+      <!-- 人员安全 -->
+      <tr class="table_body">
+        <td rowspan="14" @click="click_onelevel('14')">人员安全</td>
+        <td rowspan="4" @click="click_twolevel">流动人员</td>
+        <td>未登记人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>未注销人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>未变更人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>高危人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="7" @click="click_twolevel">重点人员</td>
+        <td>重性精神病人</td>
+      </tr>
+      <tr class="table_body">
+        <td>非访人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>退役重点人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>个人极端人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>前科人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>家暴人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>酗酒人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">重点岗位人员</td>
+        <td>危险品领用、保管、使用人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>危险品技术资质人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>专家人员</td>
+        <td>领域内有较高专业知识技术的专家、人才</td>
+      </tr>
+      <!-- 消防安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('33')">消防安全</td>
+        <td rowspan="3" @click="click_twolevel">消防设施维护</td>
+        <td>设备录入率</td>
+      </tr>
+      <tr class="table_body">
+        <td>配置合理性</td>
+      </tr>
+      <tr class="table_body">
+        <td>日常保养及时率</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业台账建设</td>
+        <td>必要资质</td>
+      </tr>
+      <tr class="table_body">
+        <td>验收许可或建设许可</td>
+      </tr>
+      <tr class="table_body">
+        <td>日常检查表</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">消防制度执行</td>
+        <td>人员培训率</td>
+      </tr>
+      <tr class="table_body">
+        <td>演习举办情况</td>
+      </tr>
+      <tr class="table_body">
+        <td>管理层专业知晓程度</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="4" @click="click_twolevel">消防事件发生</td>
+        <td>火灾事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>其他事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>消防违建</td>
+      </tr>
+      <tr class="table_body">
+        <td>协助扑救</td>
+      </tr>
+      <!-- 危化运输安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('51')">危化运输安全</td>
+        <td rowspan="2" @click="click_twolevel">源头检查</td>
+        <td>区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel">违章数据</td>
+        <td>违停</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td>超速</td>
+      </tr>
+      <tr class="table_body">
+        <td>疲劳驾驶</td>
+      </tr>
+      <tr class="table_body">
+        <td>未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">交通事故</td>
+        <td>经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>泄漏事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>行政/刑事案件</td>
+        <td>有无拘留、判刑</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>整改反馈未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业演习、培训</td>
+        <td>企业演习</td>
+      </tr>
+      <tr class="table_body">
+        <td>集中培训学习</td>
+      </tr>
+      <!-- 列管物品安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('73')">列管物品安全</td>
+        <td rowspan="2" @click="click_twolevel">危险化学品</td>
+        <td>易制爆物品生产、购买、销售、储存、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td>剧毒物品生产、购买、销售、储存、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">放射源物品</td>
+        <td>放射源储存</td>
+      </tr>
+      <tr class="table_body">
+        <td>放射源运输</td>
+      </tr>
+      <tr class="table_body">
+        <td>放射源使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">民爆物品</td>
+        <td>烟花爆竹运输、销售、燃放</td>
+      </tr>
+      <tr class="table_body">
+        <td>炸药、雷管保管、运输、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">民用枪支管理</td>
+        <td>猎枪</td>
+      </tr>
+      <tr class="table_body">
+        <td>竞技体育用枪</td>
+      </tr>
+      <tr class="table_body">
+        <td>商业射击馆枪支</td>
+      </tr>
+      <!-- 内部治安安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('88')">内部治安安全</td>
+        <td rowspan="4" @click="click_twolevel">企业三防基础数据</td>
+        <td>企业保卫人员名单</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业物防设施清单</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业技防前端感知(人脸、车脸、重要部位视频监控)建设</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业技防设施连入平台情况</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业各类规章制度、应急预案、应急演练</td>
+        <td>规章制度</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急预案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">部门检查及系统研判</td>
+        <td>部门检查合格进行评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>部门检查不合格及有缺陷的要求企业整改</td>
+      </tr>
+      <tr class="table_body">
+        <td>应系统研判(设施过期及设施故障)</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>企业反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业发生的案件及企业员工涉及的案件</td>
+        <td>企业发生被盗、被骗等各类案件</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业员工涉及的各类案件</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业员工涉及的信访等案件</td>
+      </tr>
+      <!-- 道路安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('109')">道路安全</td>
+        <td rowspan="2" @click="click_twolevel">源头检查</td>
+        <td>区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel">违章数据</td>
+        <td>违停</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td>超速</td>
+      </tr>
+      <tr class="table_body">
+        <td>未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯红灯</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">交通事故</td>
+        <td>经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业周边交通设施检查</td>
+        <td>设施完善</td>
+      </tr>
+      <tr class="table_body">
+        <td>设施缺失</td>
+      </tr>
+      <!-- 防攻击安全 -->
+      <tr class="table_body">
+        <td rowspan="16" @click="click_onelevel('128')">防攻击安全</td>
+        <td rowspan="6" @click="click_twolevel">企业人防达标情况</td>
+        <td>重要岗位人员是否进行安全背景调查</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急力量是否配备</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安排人员24小时值班</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安排巡逻防控力量</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否建立联防联动联治机制</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否定期开展实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业物防达标情况</td>
+        <td>是否有实体防护设施</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否配备必要的防爆器械</td>
+      </tr>
+      <tr class="table_body">
+        <td>车辆进出口是否安装车辆冲撞设施</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业技防达标情况</td>
+        <td>是否全方位安装视频监控系统</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安装访客登记系统</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安装入侵和紧急报警系统</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改情况</td>
+        <td>企业反馈完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业反馈未完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业定期开展反恐实战演练、培训</td>
+        <td>是否定期开展反恐实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否定期开展反恐培训</td>
+      </tr>
+      <!-- 网络安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('150')">网络安全</td>
+        <td rowspan="2" @click="click_twolevel">漏洞整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">行政案件</td>
+        <td>是否有过行政处罚</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">重大网络安全事件</td>
+        <td>是否发生过</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">网站应急系统备案</td>
+        <td>网站备案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应用备案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应用评估</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">等保定级评审</td>
+        <td>等保定级评审完成/未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业演习、培训</td>
+        <td>应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td>集中培训学习</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) {
+      const massage= {
+        safeRuleId:id,
+        level:'1',
+      }
+      this.$emit("back", massage);
+      bus.$emit('send', massage) // 传给一级指标详情
+    },
+    // 二级点击事件
+    click_twolevel() {
+      const level = "2";
+      this.$emit("backLevel", level);
+    },
+    // 三级点击事件
+    click_threelevel() {
+      const level = "3";
+      this.$emit("backLevel", level);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.display {
+  margin-top: 2vh;
+  width: 40.3vw;
+  height: 52vh;
+  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: 40vw;
+  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;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageOne.vue b/src/views/systemManagement/safeIndex/components/indexmassageOne.vue
new file mode 100644
index 0000000..affd47c
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageOne.vue
@@ -0,0 +1,180 @@
+<!-- 一级指标详细信息展示 -->
+<template>
+  <div class="massage_body">
+    <div class="massage_form">
+      <div class="form_title">
+        {{ this.form_data.sumTitle }}&nbsp;&nbsp;&nbsp;=
+      </div>
+      <div class="form_space"></div>
+      <el-form ref="form" :model="form" class="levelform">
+        <el-form-item>
+          <label slot="label"
+            >{{
+              this.form_data.calculation[0].indexName
+            }}&nbsp;&nbsp;&nbsp;×</label
+          >
+          <el-input v-model="this.form_data.calculation[0].rate"></el-input>
+        </el-form-item>
+        <el-form-item v-for="item in this.form_data_for" :key="item.sort">
+          <label slot="label"
+            >+&nbsp;&nbsp;&nbsp;{{ item.indexName }}&nbsp;&nbsp;&nbsp;×</label
+          >
+          <el-input v-model="item.rate"></el-input>
+        </el-form-item>
+      </el-form>
+      <div v-if="btn_flag" class="massage_btn">
+        <el-button @click="change_form">修改</el-button>
+      </div>
+      <div v-else class="massage_btn_two">
+        <el-button>保 存</el-button>
+        <el-button @click="cancel_form">取 消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/assets/js/eventBus.js";
+import { safeCalculation } from "@/api/systemManagement/safeIndex";
+export default {
+  name: "IndexmassageOne",
+  data() {
+    return {
+      btn_flag: true,
+      form: {},
+      form_data: {}, // 表单名以及需要遍历出form-item内容
+      form_data_for: [], // form-item除数组第一的遍历
+    };
+  },
+  created() {
+    safeCalculation({ safeRuleId: 3, levelIndex: 1 }).then((res) => {
+      this.form_data = res.data.ruleDetail;
+      this.form_data_for = res.data.ruleDetail.calculation.filter(
+        (element, index) => index > 0
+      );
+    });
+  },
+  mounted() {
+    bus.$on("send", (data) => {
+      console.log(data, "data");
+      const params = {
+        safeRuleId: data.safeRuleId,
+        levelIndex: data.level,
+      };
+      safeCalculation(params).then((res) => {
+        console.log("res1", res);
+        this.form_data = res.data.ruleDetail;
+        this.form_data_for = res.data.ruleDetail.calculation.filter(
+          (element, index) => index > 0
+        );
+      });
+    });
+  },
+  methods: {
+    // 修改表单
+    change_form() {
+      this.btn_flag = false;
+    },
+    // 取消修改
+    cancel_form() {
+      this.btn_flag = true;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.levelform.el-form {
+  width: 27vw;
+  height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+// /deep/.text_form.el-form {
+//   height: 10vh;
+//   margin-top: 3vh;
+//   display: flex;
+//   flex-wrap: wrap;
+//   .el-form-item {
+//     display: flex;
+//     .el-form-item__label {
+//       font-size: 18px;
+//       color: #fff;
+//     }
+//   }
+// }
+/deep/.el-input__inner {
+  width: 3vw;
+  border-radius: 0px;
+  font-size: 16px;
+  background: #3c4b4a;
+  color: #fff;
+}
+/deep/.text_form {
+  .el-form-item {
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          width: 3vw;
+          border: 0px;
+          border-radius: 0px;
+          background: rgba(165, 42, 42, 0);
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.massage_body {
+  margin-top: 2vh;
+  width: 43.3vw;
+  height: 52vh;
+  border: 0.1px solid #4d8f89;
+  .massage_form {
+    display: flex;
+    margin-top: 1vh;
+    margin-left: 0.6vw;
+    width: 42vw;
+    height: 22vh;
+    color: #fff;
+    border-radius: 4px;
+    background: rgba(31, 45, 49, 0.4);
+    border: 0.5px solid #485f6c;
+    .form_title {
+      width: 5vw;
+      height: 22vh;
+      line-height: 3.8vh;
+      font-size: 18px;
+      text-align: right;
+    }
+    .form_space {
+      width: 1vw;
+      height: 22vh;
+    }
+  }
+  .massage_btn,
+  .massage_btn_two {
+    width: 10vw;
+    height: 14vh;
+    text-align: center;
+    line-height: 14vh;
+    .el-button {
+      width: 4vw;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      color: #34e1b3;
+      filter: brightness(150%);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageThree.vue b/src/views/systemManagement/safeIndex/components/indexmassageThree.vue
new file mode 100644
index 0000000..f3e3d77
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageThree.vue
@@ -0,0 +1,14 @@
+<!-- 三级指标详细信息展示 -->
+<template>
+    <div>789</div>
+  </template>
+  <script>
+  export default {
+    name: "indexmassageThree",
+    data() {
+      return {};
+    },
+  };
+  </script>
+  <style lang="less" scoped>
+  </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue b/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue
new file mode 100644
index 0000000..0765e73
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue
@@ -0,0 +1,14 @@
+<!-- 二级指标详细信息展示 -->
+<template>
+    <div>456</div>
+  </template>
+  <script>
+  export default {
+    name: "indexmassageTwo",
+    data() {
+      return {};
+    },
+  };
+  </script>
+  <style lang="less" scoped>
+  </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/index.vue b/src/views/systemManagement/safeIndex/index.vue
index 8eafc36..cf13ef4 100644
--- a/src/views/systemManagement/safeIndex/index.vue
+++ b/src/views/systemManagement/safeIndex/index.vue
@@ -8,28 +8,305 @@
     </div>
     <div class="cardBody">
       <div class="synthesize_index">
-        <span>综合指数算法</span>
-        <div class="index"></div>
+        <span>企业综合指数</span>
+        <div class="index">
+          <div class="index_title">综合指数算法 =</div>
+          <div class="index_space"></div>
+          <!-- 综合指数算法表单 -->
+          <div class="index_form">
+            <el-form v-if="!btn_flag" ref="form" :model="form" class="form">
+              <el-form-item label="内部治安管理 ×" prop="rate_one">
+                <label slot="label"
+                  >内部治安管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_one"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防疫安全 ×" prop="rate_two">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防疫安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_two"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 人员安全 ×" prop="rate_three">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;人员安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_three"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 道路交通安全秩序管理 ×" prop="rate_four">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;道路交通安全秩序管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_four"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防攻击安全管理 ×" prop="rate_five">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防攻击安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_five"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 网络安全管理 ×" prop="rate_six">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;网络安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_six"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 消防安全 ×" prop="rate_seven">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;消防安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_seven"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 危化运输安全 ×" prop="rate_eight">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;危化运输安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_eight"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 列管物品 ×" prop="rate_nine">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;列管物品&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_nine"></el-input>
+              </el-form-item>
+            </el-form>
+            <el-form
+              v-else
+              ref="text_form"
+              :model="form"
+              class="text_form"
+              :disabled="disabled"
+            >
+              <el-form-item label="内部治安管理 ×" prop="rate_one">
+                <label slot="label"
+                  >内部治安管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_one"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防疫安全 ×" prop="rate_two">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防疫安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_two"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 人员安全 ×" prop="rate_three">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;人员安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_three"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 道路交通安全秩序管理 ×" prop="rate_four">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;道路交通安全秩序管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_four"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防攻击安全管理 ×" prop="rate_five">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防攻击安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_five"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 网络安全管理 ×" prop="rate_six">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;网络安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_six"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 消防安全 ×" prop="rate_seven">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;消防安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_seven"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 危化运输安全 ×" prop="rate_eight">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;危化运输安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_eight"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 列管物品 ×" prop="rate_nine">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;列管物品&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_nine"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="index_btn">
+            <div class="btn_one" v-if="btn_flag">
+              <el-button @click="change_form">修 改</el-button>
+            </div>
+            <div v-else class="btn_two">
+              <el-button :loading="btn_loading" @click="save_form"
+                >保 存</el-button
+              >
+              <el-button @click="cancel_form">取 消</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="index_all">
+        <div class="index_table">
+          <div class="table_title">指标分值配置</div>
+          <IndexTable @back="back" ref="indexTable"></IndexTable>
+        </div>
+        <div class="index_massage">
+          <div class="table_title"></div>
+          <IndexmassageOne v-if="this.level ==='1'" ref="indexmassageOne"></IndexmassageOne>
+          <IndexmassageTwo v-else-if="this.level === '2'" ref="indexmassageTwo"></IndexmassageTwo>
+          <IndexmassageThree v-else-if="this.level === '3'" ref="indexmassageThree"></IndexmassageThree>
+        </div>
       </div>
     </div>
   </el-card>
 </template>
 <script>
-import { safeCalculation } from "@/api/systemManagement/safeIndex";
+import {
+  safeCalculation,
+  saveSafeCalculation,
+} from "@/api/systemManagement/safeIndex";
+import IndexTable from "./components/indexTable";
+import IndexmassageOne from "./components/indexmassageOne";
+import IndexmassageTwo from "./components/indexmassageTwo";
+import IndexmassageThree from "./components/indexmassageThree";
 export default {
   name: "SafeIndex",
+  components: {
+    IndexTable,
+    IndexmassageOne,
+    IndexmassageTwo,
+    IndexmassageThree
+  },
   data() {
     return {
-      safeRuleId: "1",
-      levelIndex: "0",
+      btn_flag: true,
+      btn_loading: false,
+      id: "",
+      level: "1", // 右下展示几级指标页面
+      safeRuleId: "",
+      form: {
+        rate_one: "",
+        rate_two: "",
+        rate_three: "",
+        rate_four: "",
+        rate_five: "",
+        rate_six: "",
+        rate_seven: "",
+        rate_eight: "",
+        rate_nine: "",
+      }, // 综合指数计算表单数据
+      disabled: true,
     };
   },
   created() {
-    safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then(res =>{
-        console.log('res',res);
-    })
+    this.get_data();
+  },
+  methods: {
+    // 修改综合指数
+    change_form() {
+      this.btn_flag = false;
+    },
+    // 保存综合指数
+    save_form() {
+      // 求总和
+      this.btn_loading = true;
+      const all_data =
+        Number(this.form.rate_one) +
+        Number(this.form.rate_two) +
+        Number(this.form.rate_three) +
+        Number(this.form.rate_four) +
+        Number(this.form.rate_five) +
+        Number(this.form.rate_six) +
+        Number(this.form.rate_seven) +
+        Number(this.form.rate_eight) +
+        Number(this.form.rate_nine);
+      console.log("all_data", all_data);
+      if (
+        Number(this.form.rate_one) > 0 &&
+        Number(this.form.rate_two) > 0 &&
+        Number(this.form.rate_three) > 0 &&
+        Number(this.form.rate_four) > 0 &&
+        Number(this.form.rate_five) > 0 &&
+        Number(this.form.rate_six) > 0 &&
+        Number(this.form.rate_seven) > 0 &&
+        Number(this.form.rate_eight) > 0 &&
+        Number(this.form.rate_nine) > 0 &&
+        all_data === 1
+      ) {
+        const obj = {
+          calculation: [
+            { indexName: "内部治安管理", rate: this.form.rate_one, sort: "1" },
+            { indexName: "防疫安全", rate: this.form.rate_two, sort: "2" },
+            { indexName: "人员安全", rate: this.form.rate_three, sort: "3" },
+            {
+              indexName: "道路交通安全秩序管理",
+              rate: this.form.rate_four,
+              sort: "4",
+            },
+            {
+              indexName: "防攻击安全管理",
+              rate: this.form.rate_five,
+              sort: "5",
+            },
+            { indexName: "网络安全管理", rate: this.form.rate_six, sort: "6" },
+            { indexName: "消防安全", rate: this.form.rate_seven, sort: "7" },
+            {
+              indexName: "危化运输安全",
+              rate: this.form.rate_eight,
+              sort: "8",
+            },
+            { indexName: "列管物品", rate: this.form.rate_nine, sort: "9" },
+          ],
+          sumTitle: "综合指数算法",
+        };
+        const params = {
+          calculationRule: JSON.stringify(obj),
+          id: this.id,
+          safeRuleId: this.safeRuleId,
+        };
+        console.log("params", params);
+        saveSafeCalculation(params)
+          .then((res) => {
+            console.log(res);
+            this.btn_loading = false;
+            this.btn_flag = true;
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        this.$message.warning("保存失败,各指标占比应大于等于0且总和应等于1");
+      }
+    },
+    // 取消修改综合指数 text_form
+    cancel_form() {
+      // 未保存则恢复数据
+      this.get_data();
+      this.btn_flag = true;
+    },
+    get_data() {
+      // 获取综合指数计算表单数据
+      safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then((res) => {
+        console.log("res", res.data.calculationRule);
+        console.log("res", JSON.parse(res.data.calculationRule));
+        this.form.rate_one = res.data.ruleDetail.calculation[0].rate;
+        this.form.rate_two = res.data.ruleDetail.calculation[1].rate;
+        this.form.rate_three = res.data.ruleDetail.calculation[2].rate;
+        this.form.rate_four = res.data.ruleDetail.calculation[3].rate;
+        this.form.rate_five = res.data.ruleDetail.calculation[4].rate;
+        this.form.rate_six = res.data.ruleDetail.calculation[5].rate;
+        this.form.rate_seven = res.data.ruleDetail.calculation[6].rate;
+        this.form.rate_eight = res.data.ruleDetail.calculation[7].rate;
+        this.form.rate_nine = res.data.ruleDetail.calculation[8].rate;
+        this.id = res.data.id;
+        this.safeRuleId = res.data.safeRuleId;
+      });
+    },
+    back(back) {
+        this.level = back.level
+    },
   },
-  methods: {},
 };
 </script>
 <style lang="less" scoped>
@@ -53,22 +330,134 @@ export default {
     }
   }
 }
+/deep/.form.el-form {
+  height: 10vh;
+  margin-top: 3vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+/deep/.text_form.el-form {
+  height: 10vh;
+  margin-top: 3vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+/deep/.el-input__inner {
+  width: 3vw;
+  border-radius: 0px;
+  font-size: 16px;
+  background: #3c4b4a;
+  color: #fff;
+}
+/deep/.text_form {
+  .el-form-item {
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          width: 3vw;
+          border: 0px;
+          border-radius: 0px;
+          background: rgba(165, 42, 42, 0);
+          color: #fff;
+        }
+      }
+    }
+  }
+}
 /* 综合指数算法 */
 .synthesize_index {
   span {
     font-size: 18px;
     color: #fff;
   }
-  width: 168.5vh;
+  width: 85vw;
   height: 19vh;
   .index {
+    display: flex;
     margin-top: 1.5vh;
-    width: 168.5vh;
-    height: 14vh;
+    width: 85vw;
+    height: 16vh;
     color: #fff;
     border-radius: 4px;
     background: rgba(31, 45, 49, 0.4);
     border: 0.5px solid #485f6c;
+    .index_title {
+      text-align: right;
+      line-height: 9.8vh;
+      font-size: 18px;
+      width: 10vw;
+      height: 14vh;
+    }
+    .index_space {
+      width: 1vw;
+      height: 14vh;
+    }
+    .index_form {
+      width: 64vw;
+      height: 14vh;
+    }
+    .index_btn {
+      width: 10vw;
+      height: 14vh;
+      text-align: center;
+      line-height: 14vh;
+      .el-button {
+        width: 4vw;
+        border: 1px solid #4a6072;
+        color: #fff;
+        border-radius: 0px !important;
+        background: #323f43;
+      }
+      .el-button:focus,
+      .el-button:hover {
+        color: #34e1b3;
+        filter: brightness(150%);
+      }
+    }
+  }
+}
+.index_all {
+  display: flex;
+  width: 85vw;
+  /* 表格区域 */
+  .index_table {
+    margin-top: 2vh;
+    width: 41vw;
+    height: 58.5vh;
+    //   background: #fff;
+    .table_title {
+      height: 4vh;
+      line-height: 4vh;
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+  .index_massage {
+    margin-top: 2vh;
+    margin-left: 0.5vw;
+    width: 43.5vw;
+    height: 58.5vh;
+    // background: #fff;
+    .table_title {
+      height: 4vh;
+      line-height: 4vh;
+      font-size: 18px;
+      color: rgb(19, 12, 12);
+    }
   }
 }
 </style>
\ No newline at end of file