完善了安全监控组态图

src/common/pieChart.vue

@@ -5,6 +5,8 @@
 <script>
 export default {
   data() {
+    // 角度，用来做简单的动画效果的
+    this.angle = 0;
     return {
       // chart对象
       chart: null,
@@ -306,12 +308,6 @@ export default {
     };
   },
   props: {
-    // 角度，用来做简单的动画效果的
-    angle: {
-      type: Number, //类型
-      // required: true, //必要性
-      default: 0, //默认值
-    },
     value: {
       type: Number,
       required: true, //必要性

src/components/monitor/detailedTable.vue

@@ -4,29 +4,13 @@
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
     <el-table :data="tableData">
-      <el-table-column
-        prop="serialNumber"
-        label="测点编号"
-        width="85"
-      >
+      <el-table-column prop="serialNumber" label="测点编号" width="85">
       </el-table-column>
-      <el-table-column
-        prop="place"
-        label="安装位置"
-        width="180"
-      >
+      <el-table-column prop="place" label="安装位置" width="180">
       </el-table-column>
-      <el-table-column
-        prop="real_time"
-        label="实时值"
-        width="80"
-      >
+      <el-table-column prop="real_time" label="实时值" width="80">
       </el-table-column>
-      <el-table-column
-        prop="dataquality"
-        label="数据质量"
-        width="85"
-      >
+      <el-table-column prop="dataQuality" label="数据质量" width="85">
       </el-table-column>
     </el-table>
   </div>
@@ -36,21 +20,24 @@ export default {
   data() {
     return {
       tableData: [
-         {serialNumber:'1',
-          place:'原煤仓二层分站',
-          real_time:'18.3',
-          dataquality:'良好'
-          },
-          {serialNumber:'2',
-          place:'原煤仓二层分站',
-          real_time:'17.2',
-          dataquality:'良好'
-          },
-          {serialNumber:'3',
-          place:'碟子沟通风机房',
-          real_time:'18.3',
-          dataquality:'良好'
-          }
+        {
+          serialNumber: "1",
+          place: "原煤仓二层分站",
+          real_time: "18.3",
+          dataQuality: "良好",
+        },
+        {
+          serialNumber: "2",
+          place: "原煤仓二层分站",
+          real_time: "17.2",
+          dataQuality: "良好",
+        },
+        {
+          serialNumber: "3",
+          place: "碟子沟通风机房",
+          real_time: "18.3",
+          dataQuality: "良好",
+        },
       ],
     };
   },
@@ -101,19 +88,19 @@ export default {
 .table-wrapper ::v-deep .el-table th {
   background-color: transparent !important;
   border: none;
-  color: #4ADEFE;
+  color: #4adefe;
   font-size: 16px;
 }
 .table-wrapper ::v-deep .el-table td,
 .el-table th.is-leaf {
   background-color: transparent !important;
-  color: #F3DB5C;
+  color: #f3db5c;
   font-size: 15px;
   border: none;
 }
 .title {
   margin-left: -10px;
   font-size: 16px;
-  color: #4ADEFE;
+  color: #4adefe;
 }
 </style>

src/components/monitor/left.vue

@@ -1,19 +1,9 @@
 <template>
   <div>
-
-    <div
-      style="width:100%;margin: 0 auto;"
-      class="left_003"
-    >
-      <h1 class="left_tile">
-        基本信息
-      </h1>
+    <div style="width: 100%; margin: 0 auto" class="left_003">
+      <h1 class="left_tile">基本信息</h1>
       <!-- 使用for循环输出selectData 左列为属性，右列为具体值 -->
-      <div
-        v-for="(item,index) in leftData"
-        :key="index"
-        class="left_002"
-      >
+      <div v-for="(item, index) in leftData" :key="index" class="left_002">
         <div class="left_001">{{ item.name }}</div>
         <div class="left_006">{{ item.value }}</div>
       </div>
@@ -21,44 +11,28 @@
     <br />
     <br />
 
-    <div
-      style="width: 100%;margin: 0 auto; "
-      class="left_003"
-    >
-      <p class="left_tile">
-        区域评分
-      </p>
-      <el-row
-        :gutter="16"
-        style="margin-top: 10px;"
-      >
-        <el-col
-          span="4"
-          style="text-align: center"
-        >
-          总分
-        </el-col>
-        <el-col span="20">
-          <el-progress
-            :percentage="80"
-            :format="format"
-          ></el-progress>
+    <div style="width: 100%; margin: 0 auto" class="left_003">
+      <p class="left_tile">区域评分</p>
+      <el-row :gutter="16" style="margin-top: 10px">
+        <el-col :span="4" style="text-align: center"> 总分 </el-col>
+        <el-col :span="20">
+          <el-progress :percentage="percentage"></el-progress>
         </el-col>
       </el-row>
-      <!-- <div style="padding: 10px;">分项得分</div> -->
-      <fenxiang></fenxiang>
+      <el-row style="margin-top:20px">
+        <scoreImg ref="scoreImg"></scoreImg>
+      </el-row>
     </div>
-
   </div>
 </template>
 
 <script>
-import fenxiang from "./fenxiang.vue";
+import scoreImg from "@/components/monitor/scoreImg";
 export default {
   name: "left",
   data() {
     return {
-      selectValue: "a",
+      percentage: 80,
       // 基本信息区域
       leftData: [
         {
@@ -82,36 +56,19 @@ export default {
           value: "上仓皮带入口",
         },
       ],
-      //  安全评分使用进度条区域数据
-      viewData: [
-        {
-          value: 30,
-          itemStyle: {
-            color: "#1c42e3",
-          },
-        },
-        {
-          value: 60,
-          itemStyle: {
-            color: "#00a93e",
-          },
-        },
-        {
-          value: 90,
-          itemStyle: {
-            color: "#a90000",
-          },
-        },
-      ],
-      // api加载失败时，default值
-      selectData: [{ name: "fdf" }],
     };
   },
-  mounted() {},
   components: {
-    fenxiang,
+    scoreImg,
+  },
+  methods: {
+    // 获取两个参数，一个是leftData，一个是viewData
+    dataChange(leftData, viewData, percentage) {
+      this.leftData = leftData;
+      this.percentage = percentage;
+      this.$refs.scoreImg.dataChange(viewData);
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -125,15 +82,15 @@ export default {
   text-align: right;
   font-size: 16px;
   padding: 5px;
-  color: #F3DB5C;
+  color: #f3db5c;
 }
 .left_002 {
   display: grid;
-  color: #4ADEFE;
+  color: #4adefe;
   grid-template-columns: 1fr 1fr;
 }
 .left_003 {
-  color: #4ADEFE;
+  color: #4adefe;
   background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
@@ -163,14 +120,14 @@ export default {
   line-height: 2;
   padding: 5px;
   font-weight: 500;
-  color: #4ADEFE;
+  color: #4adefe;
 }
 
 .sel_wrap {
   height: 40px;
   color: #a1a1a1;
   font-size: 16px;
-  border: 1px solid #E4E4E4;
+  border: 1px solid #e4e4e4;
   cursor: pointer;
   position: relative;
   _filter: alpha(opacity=0);
@@ -191,9 +148,9 @@ export default {
   height: 40px;
   font-size: 16px;
   color: white;
-  background-color: #312D4A;
+  background-color: #312d4a;
 }
-.el-progress__text {
-  color: #F3DB5C;
+.left_003 >>> .el-progress__text {
+  color: #f3db5c;
 }
 </style>

src/components/monitor/rightTable.vue

@@ -1,152 +1,123 @@
-<template>
-  <div>
-    <div class="left_004">
-      <div class="left_003" style="font-weight: 800;font-size: 20px;">区域隐患</div>
-
-    </div>
-    <table width="90%" border="1" class="t1">
-      <thead>
-      <th width="20%">隐患名称</th>
-      <th width="20%">发生时间</th>
-      <th width="20%">级别</th>
-      <th width="20%">处理结果</th>
-      <th width="20%">完成时间</th>
-      </thead>
-      <tr v-for="(item,index) in tableData" :key="index">
-        <td>{{ item.description }}</td>
-        <td>{{item.addTime}}</td>
-        <td>{{item.level}}</td>
-        <td>{{item.handleState?'已处理':'未处理'}}</td>
-        <td>{{item.handleTime}}</td>
-      </tr>
-
-    </table>
-
+  <template>
+  <!-- 采煤工作面设备 的 故障记录 -->
+  <div class="table-wrapper main">
+    <span class="title">区域隐患</span>
+    <el-table :data="tableData">
+      <el-table-column
+        prop="name"
+        label="隐患名称"
+        width="80"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        label="发生时间"
+        width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="rank"
+        label="级别"
+        width="70"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="result"
+        label="处理结果"
+        width="80"
+      >
+      </el-table-column>
+    </el-table>
   </div>
 </template>
-
 <script>
 export default {
-  name: "rightTable",
   data() {
     return {
-      viewData: {
-        areaId: '',//	string	区域ID
-        description: '',//	string	隐患描述
-        level: '',//	string	隐患级别
-        addTime: '',//	string	添加时间
-        addUserName: '',//	string	添加人
-        handleState: '',//	boolean	处理状态
-        handleTime: '',//string	处理时间
-        handleUserName: '',//	string	处理人
-        handleMethod: '',//string	处理方式
-      },
-      tableData: [],
-      statusValue: 'a',
-    }
-  },
-  mounted() {
-   // this.getTableData();
+      tableData: [
+        {
+          name: "瓦斯报警",
+          time: "2021-1-14 17:04:36",
+          rank:"一级",
+          result:'未处理'
+        },
+        {
+          name: "设备过热",
+          time: "2021-1-14 17:12:26",
+          rank:"二级",
+          result:'未处理'
+        },
+        {
+          name: "烟雾报警",
+          time: "2021-1-14 17:23:11",
+          rank:"二级",
+          result:'未处理'
+        },
+      ],
+    };
   },
   methods: {
-    //初始化数据
-    getTableData() {
-      let _data = {
-        areaId: sessionStorage.getItem("areaId"),
-        handleState: true
-      };
-      this.$get("index/areas/"+sessionStorage.getItem('areaId')+"/risks", _data).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
-    },
-    parentHandleclick(areaId){
-      let _data = {
-        areaId: areaId,
-        handleState: true
-      };
-      this.$get("index/areas/"+areaId+"/risks", _data).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
-    },
-    changeProduct(event) {
-      this.statusValue = event.target.value; //获取测点ID，即option对应的ID值
-      let _data = {
-        areaId: sessionStorage.getItem("areaId"),
-        handleState: event.target.value
-      };
-      this.$get("index/areas/"+sessionStorage.getItem('areaId')+"/risks", _data).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
+    dataChange(tableData) {
+      this.tableData = tableData;
     }
-  }
-}
+  },
+};
 </script>
-
-<style scoped>
-.left_003 {
-  text-align: left;
-  font-size: 16px;
-  padding: 10px;
+<style lang='scss' scoped>
+.main {
+  padding: 6px;
+  // border:3px solid #96c2f1;
+  height: 400px;
+  // margin-top: -20px;
+  padding-left: 40px;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
 }
-
-.left_004 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-bottom: white 1px solid;
-  margin-bottom: 15px;
-  color: #4ADEFE;
+.table-wrapper {
+  height: 80%;
+  // margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
 }
-
-table {
-  table-layout: fixed;
-  empty-cells: show;
-  border-collapse: collapse;
-  margin: 0 auto;
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
 }
-
-table.hovertable tr {
-  background-color: #d4e3e5;
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
 }
-
-td {
-  border: 0px;
-  height: 30px;
-  text-align: center;
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
   font-size: 14px;
 }
-
-table.t1 {
-  color: white;
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 13px;
+  border: none;
 }
-
-table.t1 th {
-  border: 0px;
-  height: 30px;
-  padding: 0 2px 0;
-  font-size: 16px;
+.title {
+  border-bottom: #5ddcf8 1px solid;
+  height: 40px;
+  width: 100%;;
+  font-size: 18px;
+  line-height: 2;
+  padding: 5px;
   font-weight: 500;
+  color: #4ADEFE;
 }
-
-table.t1 td, table.t1 th {
-  border: 0px;
-  padding: 0 1em 0;
-  text-align: center;
-}
-table.t1 tr.a1 {
-  background-color: #f5fafe;
-}
-
-
 </style>

src/components/monitor/rightTable1.vue

@@ -1,126 +0,0 @@
-  <template>
-  <!-- 采煤工作面设备 的 故障记录 -->
-  <div class="table-wrapper main">
-    <span class="title">区域隐患</span>
-    <el-table :data="tableData">
-      <el-table-column
-        prop="name"
-        label="隐患名称"
-        width="80"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="time"
-        label="发生时间"
-        width="80"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="rank"
-        label="级别"
-        width="70"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="result"
-        label="处理结果"
-        width="80"
-      >
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          name: "瓦斯报警",
-          time: "2021-1-14 17:04:36",
-          rank:"一级",
-          result:'未处理'
-        },
-        {
-          name: "设备过热",
-          time: "2021-1-14 17:12:26",
-          rank:"二级",
-          result:'未处理'
-        },
-        {
-          name: "烟雾报警",
-          time: "2021-1-14 17:23:11",
-          rank:"二级",
-          result:'未处理'
-        },
-      ],
-    };
-  },
-  methods: {
-    headerStyle({ row, column, rowIndex, columnIndex }) {
-      return "tableStyle";
-    },
-    tableRowStyle({ row, rowIndex }) {
-      return "background-color:#ecf5ff";
-    },
-  },
-};
-</script>
-<style lang='scss' scoped>
-.main {
-  padding: 6px;
-  // border:3px solid #96c2f1;
-  height: 400px;
-  // margin-top: -20px;
-  padding-left: 40px;
-  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
-  background-size: 100%;
-}
-.table-wrapper {
-  height: 80%;
-  // margin-top: 10px;
-  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
-    background-color: rgba(9, 12, 14, 0.2);
-    color: #fff;
-  }
-} /* 删除表格下横线 */
-.table-wrapper ::v-deep .el-table::before {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0px;
-  border: none;
-}
-.table-wrapper ::v-deep .el-table,
-.el-table__expanded-cell {
-  background-color: transparent;
-  border: none;
-}
-.table-wrapper ::v-deep .el-table tr {
-  background-color: transparent !important;
-  border: none;
-}
-.table-wrapper ::v-deep .el-table th {
-  background-color: transparent !important;
-  border: none;
-  color: #4ADEFE;
-  font-size: 14px;
-}
-.table-wrapper ::v-deep .el-table td,
-.el-table th.is-leaf {
-  background-color: transparent !important;
-  color: #F3DB5C;
-  font-size: 13px;
-  border: none;
-}
-.title {
-  border-bottom: #5ddcf8 1px solid;
-  height: 40px;
-  width: 100%;;
-  font-size: 18px;
-  line-height: 2;
-  padding: 5px;
-  font-weight: 500;
-  color: #4ADEFE;
-}
-</style>

src/components/monitor/fenxiang.vue → src/components/monitor/scoreImg.vue

@@ -2,7 +2,7 @@
   <!-- 分项得分柱状图 -->
   <div
     id="bar"
-    style="height: 100px; width: 300px;margin-top:2px;margin:0px auto"
+    style="height: 110px; width: 300px; margin-top: 20px; margin: 0px auto"
   ></div>
 </template>
 
@@ -31,7 +31,7 @@ export default {
           left: "right",
           icon: "rect",
           textStyle: {
-            color: "#fff",
+            color: "#4adefe",
           },
           data: ["人员分", "设备分", "安全分"],
         },
@@ -39,7 +39,7 @@ export default {
           {
             type: "category",
             axisLabel: {
-              color: "#fff",
+              color: "#4adefe",
               fontSize: 11,
             },
             axisLine: {
@@ -52,7 +52,7 @@ export default {
           {
             type: "value",
             axisLabel: {
-              color: "#fff",
+              color: "#4adefe",
               fontSize: 11,
             },
             splitLine: {
@@ -69,6 +69,19 @@ export default {
             name: "得分",
             type: "bar",
             barWidth: "25%",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#f3db5c",
+                    fontSize: 12,
+                  },
+                },
+              },
+            },
             data: [
               {
                 value: 90,
@@ -97,11 +110,19 @@ export default {
   mounted() {
     console.log(this.$echarts);
     this.myChart = this.$echarts.init(document.getElementById("bar"));
-    this.setBar();
+    this.myChart.setOption(this.option);
+
   },
+  props: ["personScore"],
   methods: {
-    setBar() {
-      this.myChart.setOption(this.option);
+    dataChange(viewData) {
+      let newOption = {
+        series: {
+          data: [],
+        },
+      };
+      newOption.series.data = viewData;
+    this.myChart.setOption(newOption);
     },
   },
 };

src/views/monitor/configImg/configImg.vue

@@ -13,82 +13,78 @@
     <el-row class="progress" :gutter="20">
       <el-col :span="8">
         <div class="grid-content bg-purple">
-          <left></left>
+          <left ref="left"></left>
         </div>
       </el-col>
-      <el-col :span="8" >
+      <el-col :span="8">
         <div class="center">
           <safetyAssess></safetyAssess>
-           <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                水害评分
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="95" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                火灾评分
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="90" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                矿压灾害
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="88" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                粉尘
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="90" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                通风情况
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="92" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10">
-              <el-col span="4" style="text-align: center;color:#4ADEFE">
-                瓦斯状况
-              </el-col>
-              <el-col span="20">
-                <el-progress :percentage="95" :format="format">
-                </el-progress>
-              </el-col>
-            </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              水害评分
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="95"> </el-progress>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              火灾评分
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="90"> </el-progress>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              矿压灾害
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="88"> </el-progress>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              粉尘
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="90"> </el-progress>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              通风情况
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="92"> </el-progress>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="4" style="text-align: center; color: #4adefe">
+              瓦斯状况
+            </el-col>
+            <el-col :span="20">
+              <el-progress :percentage="95"> </el-progress>
+            </el-col>
+          </el-row>
         </div>
       </el-col>
       <el-col :span="8">
         <div class="grid-content bg-purple">
-          <rightTable1></rightTable1>
+          <rightTable ref="rightTable"></rightTable>
         </div>
       </el-col>
     </el-row>
-    <el-row :gutter="20">
-  <el-col :span="12"><div class="grid-content bg-purple">
-    <detailedTable></detailedTable>
-      </div></el-col>
-  <el-col :span="12"><div class="grid-content bg-purple-light">
-    <detailedView></detailedView>
-    </div></el-col>
-</el-row>
+    <el-row style="margin-top: 0px">
+      <el-col :span="12"
+        ><div class="grid-content bg-purple">
+          <detailedTable></detailedTable></div
+      ></el-col>
+      <el-col :span="12"
+        ><div class="grid-content bg-purple-light">
+          <detailedView></detailedView></div
+      ></el-col>
+    </el-row>
   </div>
 </template>
 
@@ -96,10 +92,9 @@
 import detailedView from "@/components/monitor/detailedView";
 import detailedTable from "@/components/monitor/detailedTable";
 import left from "@/components/monitor/left";
-import rightTable1 from "@/components/monitor/rightTable1";
+import rightTable from "@/components/monitor/rightTable";
 import rate from "@/components/monitor/rate";
-import safetyAssess from '@/views/monitor/configImg/safetyAssess'
-import SafetyAssess from './safetyAssess.vue';
+import safetyAssess from "@/views/monitor/configImg/safetyAssess";
 export default {
   data() {
     return {
@@ -128,13 +123,76 @@ export default {
     detailedView,
     detailedTable,
     left,
-    rightTable1,
+    rightTable,
     rate,
-    safetyAssess
+    safetyAssess,
   },
   methods: {
     selectArea(val) {
-      console.log(123);
+      let leftData = [
+        {
+          name: "名称",
+          value: "原煤仓三层分站",
+        },
+        {
+          name: "面积",
+          value: "2500m2",
+        },
+        {
+          name: "人员数量",
+          value: "5",
+        },
+        {
+          name: "设备数量",
+          value: "15",
+        },
+        {
+          name: "工作用途",
+          value: "上仓皮带出口",
+        },
+      ];
+      let viewData = [
+        {
+          value: 10,
+          itemStyle: {
+            color: "#FF6666",
+          },
+        },
+        {
+          value: 20,
+          itemStyle: {
+            color: "#FFFF66",
+          },
+        },
+        {
+          value: 32,
+          itemStyle: {
+            color: "#99CC66",
+          },
+        },
+      ];
+      let tableData = [
+        {
+          name: "瓦斯报警",
+          time: "2021-12-14 17:04:36",
+          rank:"三级",
+          result:'已处理'
+        },
+        {
+          name: "设备过热",
+          time: "2021-12-14 17:12:26",
+          rank:"三级",
+          result:'已处理'
+        },
+        {
+          name: "烟雾报警",
+          time: "2021-12-14 17:23:11",
+          rank:"三级",
+          result:'已处理'
+        },
+      ];
+      this.$refs.left.dataChange(leftData, viewData, 70);
+      this.$refs.rightTable.dataChange(tableData);
     },
   },
 };
@@ -148,8 +206,7 @@ export default {
   background-image: linear-gradient(
     to right,
     #06133c 0%,
-    #011669 5045
-    #06133c 100%
+    #011669 5045 #06133c 100%
   );
 }
 .detail h2 {
@@ -174,17 +231,21 @@ export default {
   width: 450px;
   height: 450px;
 }
-.el-progress__text {
-   color: #F3DB5C; 
+.center >>> .el-progress__text {
+  color: #f3db5c;
+}
+.center >>> .el-row {
+  margin-top: 20px;
 }
-.progress{
+
+.progress {
   margin-left: 5px;
 }
-.progress .el-col{
+.progress .el-col {
   margin-bottom: 10px;
 }
-.center{
-    background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+.center {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
 </style>

src/views/monitor/configImg/safetyAssess.vue

@@ -1,12 +1,11 @@
 <template>
-  <div style="margin-left:-20px">
-    <span class="title">总体安全评价
-    </span>
+  <div style="margin-left: -20px">
+    <span class="title">总体安全评价</span>
     <!-- <h2>总体安全评价</h2> -->
-    <el-row>
+    <el-row style="margin-left:25px">
       <el-col :span="8"
         ><div class="grid-content bg-purple">
-          <pieChart :value="85" title="灾害评分" /></div
+          <pieChart :value="80" title="灾害评分" /></div
       ></el-col>
       <el-col :span="8"
         ><div class="grid-content bg-purple">
@@ -30,16 +29,15 @@ export default {
 </script>
 
 <style scoped>
-.title{
+.title {
   /* border-bottom: #5ddcf8 1px solid; */
   height: 40px;
-  width: 100%;;
+  width: 100%;
   font-size: 18px;
   line-height: 2;
   padding: 15px;
   margin-left: 25px;
   font-weight: 500;
-  color: #4ADEFE;
+  color: #4adefe;
 }
-
 </style>