安全监控前端

package.json

@@ -31,6 +31,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-service": "^3.0.4",
+    "less": "^4.1.2",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

src/components/monitor/detailedTable.vue

@@ -0,0 +1,120 @@
+<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>
+  </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	测量频率
+      }
+    }
+  },
+
+  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);
+        }
+      });
+    },
+    tableClick(data) {
+      // 当点击时候触发父组件方法，传入当前data值
+      this.$emit('fatherMethod',data); //fatherMethod父组件方法
+    },
+  }
+}
+</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;
+}
+
+table.t1 tr:nth-child(even) {
+  background-color: #100C2A;
+}
+
+td {
+  border: 0px;
+  height: 30px;
+  text-align: center;
+  font-size: 14px;
+}
+
+table.t1 {
+  border: 1px solid #312D4A;
+  color: white;
+
+}
+
+table.t1 th {
+  border: 0px;
+  height: 30px;
+  padding: 0 2px 0;
+  background-color: #312D4A;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+table.t1 td, table.t1 th {
+  border: 0px;
+  padding: 0 5px 0;
+  text-align: center;
+
+}
+
+table.t1 tr.a1 {
+  background-color: #f5fafe;
+}
+
+</style>

src/components/monitor/detailedView.vue

@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <div style="margin: 15px;text-align: right">
+      <span class="bottom_01" :style="{backgroundColor:chooseColor==='30'? '#2b85e4':''}"
+            @click="chooseDate('30')">实时</span>
+      <span class="bottom_01" :style="{backgroundColor:chooseColor==='1'? '#2b85e4':''}"
+            @click="chooseDate('1')">近1天</span>
+      <span class="bottom_01" :style="{backgroundColor:chooseColor==='10'? '#2b85e4':''}"
+            @click="chooseDate('10')">近10天</span>
+      <span class="bottom_01" :style="{backgroundColor:chooseColor==='20'? '#2b85e4':''}"
+            @click="chooseDate('20')">近20天</span>
+    </div>
+    <div id="transactionFlowView" style="height:180px;width: 100%;margin-bottom: 10px;"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "detailedView",
+  data() {
+    return {
+      begin:        this.formatDate(new Date()),	//是	string	开始时间
+      end:          this.formatDate(new Date()),  //是	string	截止日期
+      timer:        '',
+      monitorId:    '',
+      chooseColor:  '30',
+      viewNum:      [],
+      viewData:     [],
+      type:         'second',
+      days:         ''
+    }
+  },
+  destroyed() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+  methods: {
+    formatDate(value) {
+      let date = new Date(value);
+      let y = date.getFullYear();
+      let MM = date.getMonth() + 1;
+      MM = MM < 10 ? ('0' + MM) : MM;
+      let d = date.getDate();
+      d = d < 10 ? ('0' + d) : d;
+      let h = date.getHours();
+      h = h < 10 ? ('0' + h) : h;
+      let m = date.getMinutes();
+      m = m < 10 ? ('0' + m) : m;
+      let s = date.getSeconds();
+      s = s < 10 ? ('0' + s) : s;
+      return d;
+    },
+    chooseDate(data) {
+      // 选中先清除定时器
+      clearInterval(this.timer);
+      // startDate，endDate
+      switch (data) {
+        case '1':
+          this.type = 'hour';
+          this.end = this.formatDate(new Date());
+          this.begin = this.formatDate(new Date());
+          break
+        case '10':
+          this.end = this.formatDate(new Date());
+          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 11));
+          this.days='10'
+          this.type = 'day';
+          break
+        case '20':
+          this.end = this.formatDate(new Date());
+          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 21));
+          this.days='20'
+          this.type = 'day';
+          break
+        case '30':
+          this.end = this.formatDate(new Date());
+          this.begin = this.formatDate(new Date());
+          this.type = 'second'
+          break
+      }
+      this.chooseColor = data;
+
+        if(this.type === 'second'){
+          clearInterval(this.timer);
+          // 如果选中的type是为实时的话，每1s执行一次
+          this.timer = setInterval(() => {
+            this.getTableData();
+          }, 1000)
+        }else {
+          this.getTableData();
+        }
+    },
+    getTableData() {
+      let _data = {
+        monitorId:    this.monitorId,   //是	string	区域测点ID
+        begin:        this.begin,	      //是	string	开始时间
+        end:          this.end,         //是	string	截止日期
+        type:         this.type,
+        days:         this.days
+      };
+      this.$get("index/monitors/measuring/record/monitors", _data).then(res => {
+        if (res.code === 200) {
+          this.viewData = res.data.keys || [];
+          this.viewNum = res.data.values || [];
+          this.showIview()
+        } else {
+          console.error(res.msg);
+        }
+      });
+    },
+    parentHandleclick(e) {
+      this.monitorId = e.monitorId
+      clearInterval(this.timer);
+      if(this.type === 'second'){
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+          // 选中second实时，定时调用getTableData()方法,显示数据
+          this.getTableData();
+        }, 1000)
+      }else {
+        // 选中其他，静态显示
+        this.getTableData();
+      }
+    },
+    showIview() {
+      let myChart = this.$echarts.init(
+        // echarts绑定到指定id元素上
+          document.getElementById("transactionFlowView"), 'dark'
+      );
+      myChart.setOption(
+          {
+            darkMode: true,
+            backgroundColor: '#100C2A',
+            tooltip: {
+              trigger: 'axis'
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '5%',
+              top:'15%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {
+                  show: false,
+                }
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: this.viewData,
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [
+              {
+                name: '测点监测值',
+                type: 'line',
+                stack: 'Total',
+                data: this.viewNum
+              },
+            ]
+          },
+          true
+      );
+      myChart.resize();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bottom_01 {
+  padding: 5px 10px;
+  border: #2d8cf0 1px solid;
+  margin: 5px 10px;
+  border-radius: 10px;
+}
+</style>

src/components/monitor/left.vue

@@ -0,0 +1,298 @@
+<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;">
+      <h1 class="left_tile">
+        基本信息
+      </h1>
+      <!-- 使用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/>
+
+    <div style="width: 90%;border: white 1px solid;margin: 0 auto; ">
+      <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">
+        
+          <!-- <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-col>
+      </el-row>
+      <div style="padding: 10px;">分项得分</div>
+      <div id="zaihai" style="width: 90%;height: 150px;"> </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "left",
+  data() {
+    return {
+      selectValue:'a',
+      // 基本信息区域
+      leftData: [
+        {
+          name: '名称', 
+          value: ''
+        },{
+          name: '面积', 
+          value: ''
+        },{
+          name: '人员数量', 
+          value: ''
+        },{
+          name: '设备数量', 
+          value: ''
+        },{
+          name: '工作用途', 
+          value: ''
+        }
+      ],
+    //  安全评分使用进度条区域数据
+     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'}],
+    }
+  },
+  mounted() {
+    this.getTableData();
+  },
+  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();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.left_001 {
+  text-align: left;
+  font-size: 16px;
+  padding: 5px;
+}
+.left_006 {
+  text-align: right;
+  font-size: 16px;
+  padding: 5px;
+}
+.left_002 {
+  display: grid;
+  color: #2db7f5;
+  grid-template-columns: 1fr 1fr;
+}
+.left_002:nth-child(odd){
+  background-color:#312D4A;
+}
+.left_002:nth-child(even){
+  background-color:#100C2A;
+}
+.left_003 {
+  text-align: left;
+  font-size: 16px;
+  padding: 10px;
+}
+
+.left_004 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: white 1px solid;
+  margin-bottom: 15px;
+}
+
+.left_tile {
+  border-bottom: white 1px solid;
+  height: 40px;
+  font-size: 18px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+}
+
+.sel_wrap {
+  height: 40px;
+  color: #a1a1a1;
+  font-size: 16px;
+  border: 1px solid #E4E4E4;
+  cursor: pointer;
+  position: relative;
+  _filter: alpha(opacity=0);
+
+}
+
+.sel_wrap label {
+  padding-left: 10px;
+  font-size: 16px;
+  z-index: 2;
+  color: #a1a1a1;
+  line-height: 40px;
+  height: 40px;
+  display: block;
+}
+
+.sel_wrap .select {
+  width: 100%;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  background-color: #312D4A;
+}
+</style>

src/components/monitor/rate.vue

@@ -0,0 +1,76 @@
+<!-- 产量信息 饼状图-->
+<template>
+    <div class="com-chart" ref="output"></div>
+</template>
+<script>
+    export default {
+        name: "output",
+        data() {
+            return {
+                myChart: null
+
+            }
+        },
+        mounted() {
+            this.initCharts();
+            this.updateChart();
+        },
+        methods: {
+            // 初始化图表
+            initCharts() {
+                this.myChart = this.$echarts.init(this.$refs.output)
+
+            },
+            // 更新图表
+            updateChart() {
+                const option = {
+                    // title: {
+                    //     text: '产量信息',
+                    //     // padding: [20, 20, 25, 25],
+                    //     textStyle: {
+                    //         fontSize: 15,
+                    //         fontWeight: 'bold'
+                    //     }
+                    // },
+                    color: ["#0097e3", "#aac1d3"],
+                    tooltip: {
+                        trigger: "item",
+                        formatter: "{a} <br/>{b}: {c} ({d}%)"
+                    },
+
+                    series: [{
+                        name: "产量信息",
+                        type: "pie",
+                        // 这个radius可以修改饼形图的大小
+                        // radius 第一个值是内圆的半径 第二个值是外圆的半径
+                        radius: ["50%", "80%"],
+                        center: ["50%", "50%"],
+                        avoidLabelOverlap: false,
+                        // 图形上的文字
+                        label: {
+                            show: false,
+                            position: "center"
+                        },
+                        // 链接文字和图形的线是否显示
+                        labelLine: {
+                            show: false
+                        },
+                        data: [{
+                            value: 198,
+                            name: "已完成"
+                        }, {
+                            value: 16,
+                            name: "未完成"
+                        }]
+                    }]
+                };
+                this.myChart.setOption(option);
+            }
+        }
+    }
+</script>
+<style scoped>
+    .com-chart {
+        height: 80px;
+    }
+</style>

src/components/monitor/rightTable.vue

@@ -0,0 +1,161 @@
+<template>
+  <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>
+      <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>
+
+  </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();
+  },
+  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);
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.left_003 {
+  text-align: left;
+  font-size: 16px;
+  padding: 10px;
+}
+
+.left_004 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: white 1px solid;
+  margin-bottom: 15px;
+}
+
+table {
+  table-layout: fixed;
+  empty-cells: show;
+  border-collapse: collapse;
+  margin: 0 auto;
+}
+
+table.hovertable tr {
+  background-color: #d4e3e5;
+}
+
+td {
+  border: 0px;
+  height: 30px;
+  text-align: center;
+  font-size: 14px;
+}
+
+table.t1 {
+  border: 1px solid #312D4A;
+  color: white;
+}
+
+table.t1 th {
+  border: 0px;
+  height: 30px;
+  padding: 0 2px 0;
+  background-color: #312D4A;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+table.t1 td, table.t1 th {
+  border: 0px;
+  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/views/monitor/monitor.vue

@@ -8,6 +8,9 @@
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
+      <el-tab-pane label="组态图" name="zutai">
+        <zutai></zutai>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -16,6 +19,7 @@
 <script>
     import systemData from "./systemData";
     import dataStandard from "./dataStandard";
+    import zutai from "./zutai";
     export default {
         name: "monitor",
       data() {
@@ -31,7 +35,8 @@
         },
         components: {
           systemData,
-          dataStandard
+          dataStandard,
+          zutai
         }
     }
 </script>

src/views/monitor/zutai.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="detaild">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div class="home">
+          <left @fatherMethodData="fatherMethodData"></left>
+        </div>
+      </el-col>
+      <el-col span="8">
+        <div class="home">
+          <div style="width: 100%;text-align: center;margin: 30px;font-size: 18px;font-weight: 600;">总体安全评价</div>
+          <div style="width: 97%;height: 200px; border: #dcdee2 1px solid;margin: 40px 10px;">
+            <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;text-align: center;margin-top: 20px;">
+              <div>
+                <div style="margin-bottom:10px">人员评分</div>
+                <rate></rate>
+              </div>
+              <div>
+                <div style="margin-bottom:10px">设备评分</div>
+                <rate></rate>
+              </div>
+              <div>
+                <div style="margin-bottom:10px">灾害评分</div>
+                <rate></rate>
+              </div>
+            </div>
+          </div>
+          <!-- 进度条显示灾害评分 -->
+          <div style="width:97%;height: 250px; border: #dcdee2 1px solid;margin: 10px;line-height: 2.5;padding: 10px;">
+            <el-row :gutter="10">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                水害评分
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="95" :stroke-width="20">
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">95分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                火灾评分
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="90" :stroke-width="20" >
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">90分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                矿压灾害
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="88" :stroke-width="20">
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">88分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+            <el-row :gutter="16">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                粉尘
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="90" :stroke-width="20">
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">90分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                通风情况
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="95" :stroke-width="20">
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">95分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col
+                span="4"
+                style="text-align: center"
+              >
+                瓦斯状况
+              </el-col>
+              <el-col span="20">
+                <!-- <Progress :percent="90" :stroke-width="20">
+                  <Icon type="checkmark-circled"></Icon>
+                  <span  style="font-size: 16px;">90分</span>
+                </Progress> -->
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+      <el-col span="8">
+        <div class="home">
+          <right-table ref="rightTable"></right-table>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 下半部分区域显示 -->
+    <div class="bottom_01">
+      <el-row :gutter="16">
+        <el-col span="12">
+          <div style="width: 100%;text-align: center;margin: 10px;font-size: 16px;font-weight: 600;">情况明细表</div>
+          <div class="bottom_02">
+            <detailed-table
+              ref="detailedTable"
+              @fatherMethod="fatherMethod"
+            ></detailed-table>
+          </div>
+        </el-col>
+        <el-col span="12">
+          <div style="width: 100%;text-align: center;margin: 10px;font-size: 16px;font-weight: 600;">情况明细图</div>
+          <div class="bottom_02">
+            <detailed-view ref="mychild"></detailed-view>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import detailedView from "@/components/monitor/detailedView";
+import detailedTable from "@/components/monitor/detailedTable";
+import left from "@/components/monitor/left";
+import rightTable from "@/components/monitor/rightTable";
+import rate from "@/components/monitor/rate";
+export default {
+  data() {
+    return {
+      fullHeight: document.documentElement.clientHeight,
+    };
+  },
+  components: {
+    detailedView,
+    detailedTable,
+    left,
+    rightTable,
+    rate,
+  },
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        const that = this;
+        setTimeout(function () {
+          that.timer = false;
+        }, 400);
+      }
+    },
+  },
+  mounted() {
+    this.getBodyHeight();
+  },
+  methods: {
+    //data传送
+    fatherMethod(data) {
+      //调用子组件的方法，点击左侧区域的测点，展示右侧特定曲线图
+      this.$refs.mychild.parentHandleclick(data);
+    },
+    fatherMethodData(data) {
+      this.$refs.detailedTable.parentHandleclick(data);
+      this.$refs.rightTable.parentHandleclick(data);
+    },
+
+    getBodyHeight() {
+      //动态获取浏览器高度
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.detaild {
+  background-color: #100C2A;
+  color: white;
+}
+.home {
+  border: #dcdee2 1px solid;
+  height: 600px;
+}
+
+.bottom_01 {
+  margin-top: 10px;
+  border: #dcdee2 1px solid;
+}
+
+.bottom_02 {
+  margin: 10px;
+  border: #dcdee2 1px solid;
+  height: 250px;
+  width: 97%;
+  padding: 5px;
+}
+</style>