安全监控页面

src/common/pieChart.vue

@@ -20,12 +20,12 @@ export default {
             rich: {
               a: {
                 fontSize: 18,
-                color: "#29EEF3",
+                color: "#F3DB5C",
               },
 
               c: {
                 fontSize: 15,
-                color: "#29EEF3",
+                color: "#4ADEFE",
                 // padding: [5,0]
               },
             },

src/components/monitor/left.vue

@@ -2,7 +2,7 @@
   <div>
 
     <div
-      style="width: 90%;margin: 0 auto;"
+      style="width:100%;margin: 0 auto;"
       class="left_003"
     >
       <h1 class="left_tile">
@@ -22,7 +22,7 @@
     <br />
 
     <div
-      style="width: 90%;margin: 0 auto; "
+      style="width: 100%;margin: 0 auto; "
       class="left_003"
     >
       <p class="left_tile">

src/components/monitor/rightTable1.vue

@@ -1,30 +1,30 @@
   <template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
-    <span class="title">故障记录</span>
+    <span class="title">区域隐患</span>
     <el-table :data="tableData">
       <el-table-column
         prop="name"
         label="隐患名称"
-        width="85"
+        width="80"
       >
       </el-table-column>
       <el-table-column
         prop="time"
         label="发生时间"
-        width="180"
+        width="80"
       >
       </el-table-column>
       <el-table-column
         prop="rank"
         label="级别"
-        width="80"
+        width="70"
       >
       </el-table-column>
       <el-table-column
         prop="result"
         label="处理结果"
-        width="85"
+        width="80"
       >
       </el-table-column>
     </el-table>
@@ -70,7 +70,7 @@ export default {
 .main {
   padding: 6px;
   // border:3px solid #96c2f1;
-  height: 200px;
+  height: 400px;
   // margin-top: -20px;
   padding-left: 40px;
   background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
@@ -104,18 +104,23 @@ export default {
   background-color: transparent !important;
   border: none;
   color: #4ADEFE;
-  font-size: 16px;
+  font-size: 14px;
 }
 .table-wrapper ::v-deep .el-table td,
 .el-table th.is-leaf {
   background-color: transparent !important;
   color: #F3DB5C;
-  font-size: 15px;
+  font-size: 13px;
   border: none;
 }
 .title {
-  margin-left: -10px;
+  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,14 +10,70 @@
       >
       </el-option>
     </el-select>
-    <el-row>
+    <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="grid-content bg-purple-light"></div>
+      <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">
@@ -117,4 +173,17 @@ export default {
   width: 500px;
   height: 500px;
 }
+.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,7 +1,9 @@
 <template>
-  <div>
-    <h2>总体安全评价</h2>
-    <el-row :gutter="20">
+  <div style="margin-left:-20px">
+    <span class="title">总体安全评价
+    </span>
+    <!-- <h2>总体安全评价</h2> -->
+    <el-row>
       <el-col :span="8"
         ><div class="grid-content bg-purple">
           <pieChart id="pieChart1" :value="85" title="灾害评分" /></div
@@ -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>