Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/common/pieChart.vue

@@ -25,7 +25,7 @@ export default {
 
               c: {
                 fontSize: 15,
-                color: "#29EEF3",
+                color: "#4ADEFE",
                 // padding: [5,0]
               },
             },

src/components/monitor/detailedTable.vue

@@ -1,120 +1,119 @@
-<template>
-  <div>
-    <table width="100%" border="1" class="t1">
-      <thead>
-      <th width="20%">测点编号</th>
-      <th width="30%">安装位置</th>
-      <th width="20%">设备类型</th>
-      <th width="30%">工程单位</th>
-      </thead>
-      <tr v-for="(item,index) in tableData" :key="index" @click="tableClick(item)">
-        <td>{{ item.serialNumber }}</td>
-        <td>{{ item.name }}</td>
-        <td>{{ item.deviceType }}</td>
-        <td>{{ item.measurementUnit }}</td>
-      </tr>
-    </table>
+
+
+  <template>
+  <!-- 采煤工作面设备 的 故障记录 -->
+  <div class="table-wrapper main">
+    <el-table :data="tableData">
+      <el-table-column
+        prop="serialNumber"
+        label="测点编号"
+        width="85"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="place"
+        label="安装位置"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="real_time"
+        label="实时值"
+        width="80"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="dataquality"
+        label="数据质量"
+        width="85"
+      >
+      </el-table-column>
+    </el-table>
   </div>
 </template>
-
 <script>
 export default {
-  name: "detailedTable",
   data() {
     return {
-        tableData:  [],
-        selectData: [],
-        bottomData: {
-          monitorId:          '',//	string	区域测点ID
-          areaId:             '',//	string	区域ID
-          name:               '',//	string	测点名称
-          serialNumber:       '',//	string	测点编号
-          deviceType:         '',//	string	设备类型
-          measurementUnit:    '',//	string	测量单位
-          samplingFrequency:  '',//	string	测量频率
-      }
-    }
+      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:'良好'
+          }
+      ],
+    };
   },
-
   methods: {
-    //初始化数据
-    getTableData() {
-      let _data = {};
-      this.tableData=[]
-      this.$get("index/areas/" + sessionStorage.getItem('areaId') + "/monitors", _data).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
-    },
-    parentHandleclick(data) {
-      let _data = {};
-      this.tableData=[]
-      this.$get("index/areas/" + data + "/monitors", _data).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
+    headerStyle({ row, column, rowIndex, columnIndex }) {
+      return "tableStyle";
     },
-    tableClick(data) {
-      // 当点击时候触发父组件方法，传入当前data值
-      this.$emit('fatherMethod',data); //fatherMethod父组件方法
+    tableRowStyle({ row, rowIndex }) {
+      return "background-color:#ecf5ff";
     },
-  }
-}
+  },
+};
 </script>
-
-<style scoped>
-table {
-  table-layout: fixed;
-  empty-cells: show;
-  border-collapse: collapse;
-  margin: 0 auto;
-}
-
-table.t1 tr:nth-child(odd) {
-  background-color: #312D4A;
+<style lang='scss' scoped>
+.main {
+  padding: 6px;
+  // border:3px solid #96c2f1;
+  height: 200px;
+  // margin-top: -20px;
+  padding-left: 40px;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
 }
-
-table.t1 tr:nth-child(even) {
-  background-color: #100C2A;
+.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;
 }
-
-td {
-  border: 0px;
-  height: 30px;
-  text-align: center;
-  font-size: 14px;
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
 }
-
-table.t1 {
-  border: 1px solid #312D4A;
-  color: white;
-
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
 }
-
-table.t1 th {
-  border: 0px;
-  height: 30px;
-  padding: 0 2px 0;
-  background-color: #312D4A;
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
   font-size: 16px;
-  font-weight: 500;
 }
-
-table.t1 td, table.t1 th {
-  border: 0px;
-  padding: 0 5px 0;
-  text-align: center;
-
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
 }
-
-table.t1 tr.a1 {
-  background-color: #f5fafe;
+.title {
+  margin-left: -10px;
+  font-size: 16px;
+  color: #4ADEFE;
 }
-
 </style>

src/components/monitor/detailedView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div style="margin: 15px;text-align: right">
+  <div class="border">
+    <div style="text-align: right;padding-top:15px">
       <span class="bottom_01" :style="{backgroundColor:chooseColor==='30'? '#2b85e4':''}"
             @click="chooseDate('30')">实时</span>
       <span class="bottom_01" :style="{backgroundColor:chooseColor==='1'? '#2b85e4':''}"
@@ -174,10 +174,15 @@ export default {
 </script>
 
 <style scoped>
+.border{
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
 .bottom_01 {
   padding: 5px 10px;
   border: #2d8cf0 1px solid;
-  margin: 5px 10px;
+  margin: 10px 10px;
   border-radius: 10px;
+  color: #fff;
 }
 </style>

src/components/monitor/fenxiang.vue

@@ -0,0 +1,111 @@
+<template>
+  <!-- 分项得分柱状图 -->
+  <div
+    id="bar"
+    style="height: 100px; width: 300px;margin-top:2px;margin:0px auto"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "2%",
+          top: "10%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          left: "right",
+          icon: "rect",
+          textStyle: {
+            color: "#fff",
+          },
+          data: ["人员分", "设备分", "安全分"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisLine: {
+              show: true,
+            },
+            data: ["人员分", "设备分", "安全分"],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "得分",
+            type: "bar",
+            barWidth: "25%",
+            data: [
+              {
+                value: 90,
+                itemStyle: {
+                  color: "#FF6666",
+                },
+              },
+              {
+                value: 87,
+                itemStyle: {
+                  color: "#FFFF66",
+                },
+              },
+              {
+                value: 92,
+                itemStyle: {
+                  color: "#99CC66",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(document.getElementById("bar"));
+    this.setBar();
+  },
+  methods: {
+    setBar() {
+      this.myChart.setOption(this.option);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/components/monitor/left.vue

@@ -1,226 +1,118 @@
 <template>
   <div>
-    <div class="left_004">
-      <div class="left_003" style="font-weight: 800;font-size: 20px;">监测区域</div>
-      <div class="left_003">
-        <div class="sel_wrap">
-          <select class="select" id="c_city" v-model="selectValue"    @change="changeProduct($event)">
-            <!-- 使用了一个option标签来选择区域 -->
-            <option value="a">请选择监测区域</option>
-            <option v-for="(item,index) in selectData" :key="index" :value="index">{{item.name}}</option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <div style="width: 90%;border: white 1px solid;margin: 0 auto;">
+
+    <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">
+      <!-- 使用for循环输出selectData 左列为属性，右列为具体值 -->
+      <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>
     </div>
-    <br/>
-    <br/>
+    <br />
+    <br />
 
-    <div style="width: 90%;border: white 1px solid;margin: 0 auto; ">
+    <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-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>
-          <!-- <Progress :percent="bottomData.totalScore" :stroke-width="20" :status="bottomData.totalScore>50?'':'wrong'">
-            <Icon type="checkmark-circled"></Icon>
-            <span style="font-size: 16px;" >{{bottomData.totalScore}}分</span>
-          </Progress> -->
+          <el-progress
+            :percentage="80"
+            :format="format"
+          ></el-progress>
         </el-col>
       </el-row>
-      <div style="padding: 10px;">分项得分</div>
-      <div id="zaihai" style="width: 90%;height: 150px;"> </div>
+      <!-- <div style="padding: 10px;">分项得分</div> -->
+      <fenxiang></fenxiang>
     </div>
 
   </div>
 </template>
 
 <script>
+import fenxiang from "./fenxiang.vue";
 export default {
   name: "left",
   data() {
     return {
-      selectValue:'a',
+      selectValue: "a",
       // 基本信息区域
       leftData: [
         {
-          name: '名称', 
-          value: ''
-        },{
-          name: '面积', 
-          value: ''
-        },{
-          name: '人员数量', 
-          value: ''
-        },{
-          name: '设备数量', 
-          value: ''
-        },{
-          name: '工作用途', 
-          value: ''
-        }
+          name: "名称",
+          value: "原煤仓二层分站",
+        },
+        {
+          name: "面积",
+          value: "3000m2",
+        },
+        {
+          name: "人员数量",
+          value: "1",
+        },
+        {
+          name: "设备数量",
+          value: "10",
+        },
+        {
+          name: "工作用途",
+          value: "上仓皮带入口",
+        },
+      ],
+      //  安全评分使用进度条区域数据
+      viewData: [
+        {
+          value: 30,
+          itemStyle: {
+            color: "#1c42e3",
+          },
+        },
+        {
+          value: 60,
+          itemStyle: {
+            color: "#00a93e",
+          },
+        },
+        {
+          value: 90,
+          itemStyle: {
+            color: "#a90000",
+          },
+        },
       ],
-    //  安全评分使用进度条区域数据
-     bottomData:{
-       totalScore:0,            //  	string	总体评分
-       personnelScore:'',       //		string	人员评分
-       equipmentScore:'',       //		string	设备评分
-       safetyScore:'',          //		string	安全评分
-     },
-      viewData:[ {
-        value: 30,
-        itemStyle: {
-          color: '#1c42e3'
-        }
-      }, {
-        value: 60,
-        itemStyle: {
-          color: '#00a93e'
-        }
-      }, {
-        value: 90,
-        itemStyle: {
-          color: '#a90000'
-        }
-      },],
       // api加载失败时，default值
-      selectData:[{name:'fdf'}],
-    }
+      selectData: [{ name: "fdf" }],
+    };
   },
-  mounted() {
-    this.getTableData();
+  mounted() {},
+  components: {
+    fenxiang,
   },
-  methods:{
-    //初始化数据
-    getTableData() {
-      let _data = { };
-      // 使用axios通过后端提供api请求数据
-      this.$get("index/areas", _data).then(res => {
-        if (res.code === 200) {
-          this.selectData = res.data || [];
-        } else {
-          console.error(res.msg);
-        }
-      });
-    },
-    changeProduct(event) {
-      this.selectValue = event.target.value;                                      //获取当前选中的区域ID，即option对应的ID值
-      this.$emit('fatherMethodData',this.selectData[this.selectValue].areaId);    //fatherMethod父组件方法
-      //'areaUnit'
-      let areaAcreage=this.selectData[this.selectValue].areaUnit ==='面积' ? "㎡" : 'm'
-      this.leftData=[
-        {
-          name: '名称', 
-          value: this.selectData[this.selectValue].name
-        },{
-          name: this.selectData[this.selectValue].areaUnit ==='面积' ? "面积" : '长度', 
-          value: JSON.stringify(this.selectData[this.selectValue].areaAcreage)+areaAcreage
-        },{
-          name: '人员数量', 
-          value: this.selectData[this.selectValue].personnelNumber+'人'
-        },{
-          name: '设备数量', 
-          value: this.selectData[this.selectValue].equipmentNumber+'台'
-        },{
-          name: '工作用途', 
-          value: this.selectData[this.selectValue].workPurpose
-        }
-      ]
-      sessionStorage.setItem("areaId",this.selectData[this.selectValue].areaId)
-      let _data = {
-        areaId:this.selectData[this.selectValue].areaId
-      };
-      this.$get("index/areas/" + sessionStorage.getItem('areaId') + "/scores", _data).then(res => {
-        if (res.code === 200) {
-          this.bottomData=res.data
-          this.viewData=[
-            {
-              value: this.bottomData.personnelScore,
-              itemStyle: {
-                color: '#1c42e3'
-              }
-            },{
-              value: this.bottomData.equipmentScore,
-              itemStyle: {
-                color: '#00a93e'
-              }
-            },{
-              value: this.bottomData.safetyScore,
-              itemStyle: {
-                color: '#a90000'
-              }
-            }
-          ]
-          this.showIview();
-        } else {
-          console.error(res.msg);
-        }
-      });
-    },
-    //eCharts
-    showIview() {
-      let myChart = this.$echarts.init(
-          document.getElementById("zaihai"), 'dark'
-      );
-      myChart.setOption(
-          {
-            darkMode: true,
-            backgroundColor: '#100C2A',
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              }
-            },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '2%',
-              top:'10%',
-              containLabel: true
-            },
-            xAxis: [
-              {
-                type: 'category',
-                data: ['人员分', '设备分', '安全分',],
-                axisTick: {
-                  alignWithLabel: true
-                }
-              }
-            ],
-            yAxis: [
-              {
-                type: 'value'
-              }
-            ],
-            series: [
-              {
-                name: '得分',
-                type: 'bar',
-                barWidth: '30%',
-                data:this.viewData
-              }
-            ]
-          },
-          true
-      );
-      myChart.resize();
-    }
-  }
-}
+  methods: {},
+};
 </script>
 
 <style scoped>
@@ -233,18 +125,24 @@ export default {
   text-align: right;
   font-size: 16px;
   padding: 5px;
+  color: #F3DB5C;
 }
 .left_002 {
   display: grid;
-  color: #2db7f5;
+  color: #4ADEFE;
   grid-template-columns: 1fr 1fr;
 }
-.left_002:nth-child(odd){
+.left_003 {
+  color: #4ADEFE;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+/* .left_002:nth-child(odd){
   background-color:#312D4A;
 }
 .left_002:nth-child(even){
   background-color:#100C2A;
-}
+} */
 .left_003 {
   text-align: left;
   font-size: 16px;
@@ -259,12 +157,13 @@ export default {
 }
 
 .left_tile {
-  border-bottom: white 1px solid;
+  border-bottom: #5ddcf8 1px solid;
   height: 40px;
   font-size: 18px;
   line-height: 2;
   padding: 5px;
   font-weight: 500;
+  color: #4ADEFE;
 }
 
 .sel_wrap {
@@ -275,7 +174,6 @@ export default {
   cursor: pointer;
   position: relative;
   _filter: alpha(opacity=0);
-
 }
 
 .sel_wrap label {
@@ -295,4 +193,7 @@ export default {
   color: white;
   background-color: #312D4A;
 }
+.el-progress__text {
+  color: #F3DB5C;
+}
 </style>

src/components/monitor/rightTable.vue

@@ -2,8 +2,7 @@
   <div>
     <div class="left_004">
       <div class="left_003" style="font-weight: 800;font-size: 20px;">区域隐患</div>
-      <div class="left_003">
-      </div>
+
     </div>
     <table width="90%" border="1" class="t1">
       <thead>
@@ -107,6 +106,7 @@ export default {
   grid-template-columns: 1fr 1fr;
   border-bottom: white 1px solid;
   margin-bottom: 15px;
+  color: #4ADEFE;
 }
 
 table {
@@ -128,7 +128,6 @@ td {
 }
 
 table.t1 {
-  border: 1px solid #312D4A;
   color: white;
 }
 
@@ -136,7 +135,6 @@ table.t1 th {
   border: 0px;
   height: 30px;
   padding: 0 2px 0;
-  background-color: #312D4A;
   font-size: 16px;
   font-weight: 500;
 }
@@ -146,16 +144,9 @@ table.t1 td, table.t1 th {
   padding: 0 1em 0;
   text-align: center;
 }
-
 table.t1 tr.a1 {
   background-color: #f5fafe;
 }
 
-table.t1 tr:nth-child(odd) {
-  background-color: #312D4A;
-}
 
-table.t1 tr:nth-child(even) {
-  background-color: #100C2A;
-}
 </style>

src/components/monitor/rightTable1.vue

@@ -0,0 +1,126 @@
+  <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/views/monitor/configImg/configImg.vue

@@ -10,11 +10,94 @@
       >
       </el-option>
     </el-select>
-    <div class="middle"><safety-assess></safety-assess></div>
+    <el-row class="progress" :gutter="20">
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <left></left>
+        </div>
+      </el-col>
+      <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>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <rightTable1></rightTable1>
+        </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>
   </div>
 </template>
 
 <script>
+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 rate from "@/components/monitor/rate";
 import safetyAssess from '@/views/monitor/configImg/safetyAssess'
 import SafetyAssess from './safetyAssess.vue';
 export default {
@@ -42,6 +125,11 @@ export default {
     };
   },
   components: {
+    detailedView,
+    detailedTable,
+    left,
+    rightTable1,
+    rate,
     safetyAssess
   },
   methods: {
@@ -86,4 +174,17 @@ export default {
   width: 450px;
   height: 450px;
 }
+.el-progress__text {
+   color: #F3DB5C; 
+}
+.progress{
+  margin-left: 5px;
+}
+.progress .el-col{
+  margin-bottom: 10px;
+}
+.center{
+    background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
 </style>

src/views/monitor/configImg/safetyAssess.vue

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