平安指数开发

src/api/systemManagement/safeIndex/index.js

@@ -0,0 +1,9 @@
+// 平安指数模块接口
+import request from '@/utils/request'
+export function safeCalculation(params) {
+    return request({
+        url: '/safety/system/tbSafeCalculationRule/getCalculationRule',
+        method: 'post',
+        params
+    })
+}

src/views/systemManagement/safeIndex/index.vue

@@ -0,0 +1,74 @@
+<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="synthesize_index">
+        <span>综合指数算法</span>
+        <div class="index"></div>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { safeCalculation } from "@/api/systemManagement/safeIndex";
+export default {
+  name: "SafeIndex",
+  data() {
+    return {
+      safeRuleId: "1",
+      levelIndex: "0",
+    };
+  },
+  created() {
+    safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then(res =>{
+        console.log('res',res);
+    })
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  border: 0px;
+  height: 89vh; /* 控制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);
+    }
+  }
+}
+/* 综合指数算法 */
+.synthesize_index {
+  span {
+    font-size: 18px;
+    color: #fff;
+  }
+  width: 168.5vh;
+  height: 19vh;
+  .index {
+    margin-top: 1.5vh;
+    width: 168.5vh;
+    height: 14vh;
+    color: #fff;
+    border-radius: 4px;
+    background: rgba(31, 45, 49, 0.4);
+    border: 0.5px solid #485f6c;
+  }
+}
+</style>