فهرست منبع

皮带能效分析初步完成v1

jie 3 سال پیش
والد
کامیت
dcd74ded67

BIN
src/assets/img/009belt.gif


BIN
src/assets/img/012belt.gif


+ 3 - 3
src/router/index.js

@@ -577,11 +577,11 @@ const router = new Router({
           hidden: false,
         },
         {
-          path: "/beam_tube_inspection",
-          name: "束管检测",
+          path: "/beam_tube_inspection",  //app_belt_energy_analysis
+          name: "皮带能效分析",
           id: 203,
           component: () =>
-            import("../views/app_beam_tube_inspection/beamTubeInspection.vue"),
+            import("../views/app_beam_tube_inspection/test.vue"),
           hidden: false,
         },
         {

+ 45 - 0
src/views/app_beam_tube_inspection/albox.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="class1">
+
+  <el-select v-model="value" placeholder="请选择算法">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "albox",
+  data() {
+    return {
+      options: [{
+        value: '选项1',
+        label: 'k-means算法'
+      }, {
+        value: '选项2',
+        label: 'DBSCAN算法'
+      }, {
+        value: '选项3',
+        label: 'OPTICS算法'
+      }, {
+        value: '选项4',
+        label: 'Agglomerative算法'
+      }, ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.class1{
+  column-rule-color: #00aaff;
+
+}
+
+</style>

+ 134 - 3
src/views/app_beam_tube_inspection/beamTubeInspection.vue

@@ -1,13 +1,144 @@
+<!--<template>-->
+<!--  <div>beamTubeInspection</div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--export default {-->
+<!--  name: "beamTubeInspection"-->
+<!--}-->
+<!--</script>-->
+
+<!--<style scoped>-->
+
+<!--</style>-->
+
+
+
+<!--<template>-->
+<!--  <div class="box">-->
+<!--    <el-col :span="13">-->
+<!--      <img src="@/assets/img/conveyor.gif" alt="图片" align="middle">-->
+<!--    </el-col>-->
+<!--    <el-col :span="11">-->
+<!--      <mailTable style="margin-top: 10px;margin-left: 10px;" :tableData="propertyTableData" :tableStyle="{ width:'310px'}"></mailTable>-->
+<!--    </el-col>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import mailTable from "@/views/tableComponent";-->
+<!--export default {-->
+<!--  name: "beltCoalQuantity",-->
+<!--  data() {-->
+<!--    return {-->
+<!--      propertyTableData: [{-->
+<!--        key: '名称',-->
+<!--        value: '值'-->
+<!--      }, {-->
+<!--        key: '设备名称',-->
+<!--        value: '高压6A系统'-->
+<!--      }, {-->
+<!--        key: '设备编码',-->
+<!--        value: '60LAC72'-->
+<!--      }, {-->
+<!--        key: 'KKS编码',-->
+<!--        value: '60LAC72'-->
+<!--      }, {-->
+<!--        key: '状态',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '状态日期',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '机组编码',-->
+<!--        value: '#6'-->
+<!--      }, {-->
+<!--        key: '所属专业',-->
+<!--        value: '锅炉'-->
+<!--      }, {-->
+<!--        key: '分类编码',-->
+<!--        value: '给水泵'-->
+<!--      }, {-->
+<!--        key: '型号',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '序列号',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '位置编码',-->
+<!--        value: '高压6A系统'-->
+<!--      }, {-->
+<!--        key: '制造商',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '出厂日期',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '安装日期',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '保修到期日期',-->
+<!--        value: ''-->
+<!--      }, {-->
+<!--        key: '形式',-->
+<!--        value: '多级离心泵'-->
+<!--      }, {-->
+<!--        key: '配用功率',-->
+<!--        value: '1950'-->
+<!--      }, {-->
+<!--        key: '配套电机',-->
+<!--        value: 'ABB(AMA 500L2L B5F)'-->
+<!--      }, {-->
+<!--        key: '转速',-->
+<!--        value: '2980'-->
+<!--      }, {-->
+<!--        key: '杨程',-->
+<!--        value: '16000'-->
+<!--      }, {-->
+<!--        key: '流量',-->
+<!--        value: '350'-->
+<!--      }]-->
+<!--    }-->
+<!--  },-->
+<!--  components: {-->
+<!--    mailTable-->
+<!--  }-->
+<!--}-->
+<!--</script>-->
+<!--<style scoped>-->
+<!--/* .box {-->
+<!--    width: 600px;-->
+<!--    height: 600px;-->
+<!--    border: 1px solid red;-->
+<!--    /* background: require("@/assets/img/scenery.gif");-->
+
+<!--background: require('@/assets/img/100.png');-->
+<!--}-->
+<!--*/-->
+<!--</style>-->
+
+
+
+<!--分开-->
+
 <template>
-  <div>beamTubeInspection</div>
+  <div>
+<!--    <data-board title="1号压风机"></data-board>-->
+    <dataBoard title="1号压风机" v-if="activeName == '1'"></dataBoard>
+
+  </div>
 </template>
 
 <script>
+import dataBoard from "@/views/compressed/dataBoard/dataBoard"
 export default {
-  name: "beamTubeInspection"
+  comments:{
+    dataBoard
+  }
+
 }
 </script>
 
 <style scoped>
 
-</style>
+</style>

+ 878 - 0
src/views/app_beam_tube_inspection/dataBoard.vue

@@ -0,0 +1,878 @@
+<!--<template>-->
+<!--  <div class="main">-->
+<!--&lt;!&ndash;    <div class="header">&ndash;&gt;-->
+<!--&lt;!&ndash;      <div class="select-veido">&ndash;&gt;-->
+<!--&lt;!&ndash;        <el-select&ndash;&gt;-->
+<!--&lt;!&ndash;          style="margin-top: 10px"&ndash;&gt;-->
+<!--&lt;!&ndash;          v-model="currentComId"&ndash;&gt;-->
+<!--&lt;!&ndash;          placeholder="请选择"&ndash;&gt;-->
+<!--&lt;!&ndash;          @change="selectChart"&ndash;&gt;-->
+<!--&lt;!&ndash;          :popper-append-to-body="false"&ndash;&gt;-->
+<!--&lt;!&ndash;        >&ndash;&gt;-->
+<!--&lt;!&ndash;          <el-option&ndash;&gt;-->
+<!--&lt;!&ndash;            v-for="item in comOptions"&ndash;&gt;-->
+<!--&lt;!&ndash;            :key="item.id"&ndash;&gt;-->
+<!--&lt;!&ndash;            :label="item.label"&ndash;&gt;-->
+<!--&lt;!&ndash;            :value="item.id"&ndash;&gt;-->
+<!--&lt;!&ndash;          >&ndash;&gt;-->
+<!--&lt;!&ndash;          </el-option>&ndash;&gt;-->
+<!--&lt;!&ndash;        </el-select>&ndash;&gt;-->
+<!--&lt;!&ndash;      </div>&ndash;&gt;-->
+<!--&lt;!&ndash;    </div>&ndash;&gt;-->
+<!--    <div class="top">-->
+<!--      <el-row :gutter="10">-->
+<!--        <el-col :span="8">-->
+<!--          <div class="top_left">-->
+
+
+<!--&lt;!&ndash;            <water-storage title="负载曲线" ></water-storage>&ndash;&gt;-->
+<!--            <fuzai title="负载曲线"></fuzai>-->
+
+<!--            &lt;!&ndash; 电机电流 &ndash;&gt;-->
+<!--&lt;!&ndash;            <oneline&ndash;&gt;-->
+<!--&lt;!&ndash;              ref="current"&ndash;&gt;-->
+<!--&lt;!&ndash;              :id="80"&ndash;&gt;-->
+<!--&lt;!&ndash;              title="电机电流"&ndash;&gt;-->
+<!--&lt;!&ndash;              unit="A"&ndash;&gt;-->
+<!--&lt;!&ndash;              type="dianjidianliu_after"&ndash;&gt;-->
+<!--&lt;!&ndash;            ></oneline>&ndash;&gt;-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="8">-->
+<!--          <div class="top_center">-->
+<!--            &lt;!&ndash; 三相绕组温度 &ndash;&gt;-->
+<!--&lt;!&ndash;            <threeline&ndash;&gt;-->
+<!--&lt;!&ndash;              ref="winding"&ndash;&gt;-->
+<!--&lt;!&ndash;              :id="80"&ndash;&gt;-->
+<!--&lt;!&ndash;              title="三相绕组温度"&ndash;&gt;-->
+<!--&lt;!&ndash;              unit="°C"&ndash;&gt;-->
+<!--&lt;!&ndash;              :type="windingType"&ndash;&gt;-->
+<!--&lt;!&ndash;              :legend="windingLegand"&ndash;&gt;-->
+<!--&lt;!&ndash;            ></threeline>&ndash;&gt;-->
+<!--&lt;!&ndash;            <water-storage title="效率曲线"></water-storage>&ndash;&gt;-->
+<!--                <xiaolv title="效率曲线"></xiaolv>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="8">-->
+<!--          <div class="top_right">-->
+<!--            &lt;!&ndash; 电机振动 &ndash;&gt;-->
+<!--&lt;!&ndash;            <oneline&ndash;&gt;-->
+<!--&lt;!&ndash;              ref="virbrate"&ndash;&gt;-->
+<!--&lt;!&ndash;              :id="92"&ndash;&gt;-->
+<!--&lt;!&ndash;              title="电机振动"&ndash;&gt;-->
+<!--&lt;!&ndash;              unit="mm/s"&ndash;&gt;-->
+<!--&lt;!&ndash;              type="zhendong_after"&ndash;&gt;-->
+<!--&lt;!&ndash;            ></oneline>&ndash;&gt;-->
+
+<!--&lt;!&ndash;            <water-storage title="吨煤能耗曲线"></water-storage>&ndash;&gt;-->
+<!--            <dunmei title="吨煤能耗曲线"></dunmei>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--      </el-row>-->
+
+<!--    </div>-->
+<!--    <div class="center">-->
+<!--      <el-row :gutter="10">-->
+<!--        <el-col :span="8">-->
+<!--          <div class="center_left">-->
+<!--            &lt;!&ndash; 压风机及风包压力 &ndash;&gt;-->
+<!--&lt;!&ndash;            <twoline2&ndash;&gt;-->
+<!--&lt;!&ndash;              ref="pressure"&ndash;&gt;-->
+<!--&lt;!&ndash;              :id=[81,82]&ndash;&gt;-->
+<!--&lt;!&ndash;              title="压风机及风包压力"&ndash;&gt;-->
+<!--&lt;!&ndash;              unit="Mpa"&ndash;&gt;-->
+<!--&lt;!&ndash;              :type="pressureType"&ndash;&gt;-->
+<!--&lt;!&ndash;              :legend="pressureLegand"&ndash;&gt;-->
+<!--&lt;!&ndash;            ></twoline2>&ndash;&gt;-->
+<!--&lt;!&ndash;            <water-storage title="输入功率曲线"></water-storage>&ndash;&gt;-->
+<!--                <shuru title="输入功率曲线"></shuru>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="8">-->
+<!--          <div class="center_center">-->
+<!--            <div class="title1" style="width: 100%">工况分析</div>-->
+<!--            <albox style="margin-left: 400px;color: gray"></albox>-->
+<!--            <div class="title1" style="width: 100%">区域状态:<span style="color: #f3db5c;font-size: 20px">{{work.info}}</span>-->
+<!--&lt;!&ndash;              <radartu></radartu>&ndash;&gt;-->
+<!--&lt;!&ndash;              <RadarChart></RadarChart>&ndash;&gt;-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="8">-->
+<!--          <div class="center_right">-->
+<!--            &lt;!&ndash; 电机前后轴温 &ndash;&gt;-->
+<!--&lt;!&ndash;            <twoline&ndash;&gt;-->
+<!--&lt;!&ndash;              ref="bearing"&ndash;&gt;-->
+<!--&lt;!&ndash;              :id="80"&ndash;&gt;-->
+<!--&lt;!&ndash;              title="电机前后轴温"&ndash;&gt;-->
+<!--&lt;!&ndash;              unit="°C"&ndash;&gt;-->
+<!--&lt;!&ndash;              :type="bearingType"&ndash;&gt;-->
+<!--&lt;!&ndash;              :legend="bearingLegand"&ndash;&gt;-->
+<!--&lt;!&ndash;            ></twoline>&ndash;&gt;-->
+<!--&lt;!&ndash;            <water-storage title="当前负载与额定负载占比曲线"></water-storage>&ndash;&gt;-->
+<!--            <dangqian title="当前负载与额定负载占比曲线"></dangqian>-->
+
+<!--          </div>-->
+<!--        </el-col>-->
+<!--      </el-row>-->
+
+<!--    </div>-->
+
+
+
+<!--    <div class="bottom">-->
+<!--&lt;!&ndash;&lt;!&ndash;      <el-row :gutter="130">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        <el-col :span="12">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          <div class="bottom_left">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            &lt;!&ndash; 报警记录 &ndash;&gt;&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            <fault-alarm></fault-alarm>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        </el-col>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        <el-col :span="12">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          <div class="bottom_right">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            &lt;!&ndash; 操作记录 &ndash;&gt;&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            <running-msg></running-msg>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        </el-col>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;      </el-row>&ndash;&gt;&ndash;&gt;-->
+
+
+<!--&lt;!&ndash;&lt;!&ndash;      <el-row :gutter="10">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        <el-row :span="4">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          <div class="myleft">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            <div class="mycenter">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;              <span class="title">工作面信息</span>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;              <ul>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                <li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                  设备能力:<span class="content">{{ workInfo.capacity }}bt</span>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                </li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                <li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                  区域人数:<span class="content">{{ workInfo.areaPeople }}人</span>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                </li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                <li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                  完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                </li>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;              </ul>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;            </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;          </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;        </el-row>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;      </el-row>&ndash;&gt;&ndash;&gt;-->
+
+
+
+<!--      <span class="title1">头部驱动电机1</span>-->
+
+<!--      <div class="myleft">-->
+<!--            <div class="mycenter">-->
+<!--                <span class="title">变频器</span>-->
+<!--                <ul>-->
+<!--                  <li>-->
+<!--                    频率:<span class="content">{{ transducer1.frequency }}Hz</span>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    电压:<span class="content">{{ transducer1.voltage }}kV</span>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    转速:<span class="content">{{ transducer1.speed }}r/min</span>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    功率:<span class="content">{{ transducer1.power}}kW</span>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    电流:<span class="content">{{ transducer1.electricity }}A</span>-->
+<!--                  </li>-->
+<!--&lt;!&ndash;                  <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                    完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                  </li>&ndash;&gt;-->
+<!--&lt;!&ndash;                  <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                    完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                  </li>&ndash;&gt;-->
+<!--                </ul>-->
+<!--            </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">电机</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              电流:<span class="content">{{ motor1.electricity }}A</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              功率:<span class="content">{{ motor1.power}}KW</span>-->
+<!--            </li>-->
+<!--            <li >-->
+<!--              后轴温度:<span class="content">{{ motor1.temperature_back}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              前轴温度:<span class="content">{{ motor1.temperature_front}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组A相温度:<span class="content">{{ motor1.temperature_a}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组B相温度:<span class="content">{{ motor1.temperature_b}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组C相温度:<span class="content">{{ motor1.temperature_c}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              自由端径向水平振动:<span class="content">{{ motor1.vibrate_ziyou }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              驱动端径向水平振动:<span class="content">{{ motor1.vibrate_qudong }}mm/s</span>-->
+<!--            </li>-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              振动:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">减速器</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              油温:<span class="content">{{ reducer1.temperature }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              油压:<span class="content">{{ reducer1.pressure }}Mpa</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              输入轴径向水平振动:<span class="content">{{ reducer1.vibrate_level }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              输入轴径向垂直振动:<span class="content">{{ reducer1.vibrate_vertical }}mm/s</span>-->
+<!--            </li>-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">滚筒</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              东侧温度:<span class="content">{{ roller1.temperature_east }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              西侧温度:<span class="content">{{ roller1.temperature_west }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              东侧振动:<span class="content">{{ roller1.vibrate_east }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              西侧振动:<span class="content">{{ roller1.vibrate_west }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              张力:<span class="content">{{ roller1.strain }}KG</span>-->
+<!--            </li>-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+
+
+<!--      <div class="myleft">-->
+<!--&lt;!&ndash;        <img src="@/assets/img/004pidai.png" class="pidai" style="z-index: 2;position: absolute" /><br>&ndash;&gt;-->
+<!--        <img src="@/assets/img/009belt.gif" class="pidai" style="z-index: 2;position: absolute;margin-left: 0px; " /><br>-->
+<!--&lt;!&ndash;        <img src="@/assets/img/conveyor.gif" alt="图片" align="middle">&ndash;&gt;-->
+
+<!--&lt;!&ndash;        <div class="mycenter">&ndash;&gt;-->
+<!--&lt;!&ndash;          <span class="title">工作面信息</span>&ndash;&gt;-->
+<!--&lt;!&ndash;          <ul>&ndash;&gt;-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              设备能力:<span class="content">{{ workInfo.capacity }}bt</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              区域人数:<span class="content">{{ workInfo.areaPeople }}人</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--&lt;!&ndash;            <li>&ndash;&gt;-->
+<!--&lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            </li>&ndash;&gt;-->
+<!--&lt;!&ndash;          </ul>&ndash;&gt;-->
+<!--&lt;!&ndash;        </div>&ndash;&gt;-->
+<!--      </div>-->
+<!--&lt;!&ndash;      <div class="bottom_tu">&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;              <div class="myleft">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                <div class="mycenter" style="height: 340px" >&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;                  <span class="title">皮带速度</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                  <img src="@/assets/img/004pidai.png" class="pidai" style="z-index: 2;position: absolute" />&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;              </div>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;      </div>&ndash;&gt;-->
+
+<!--&lt;!&ndash;      <div class="myleft">&ndash;&gt;-->
+<!--&lt;!&ndash;        <div class="mycenter" style="height: 340px" >&ndash;&gt;-->
+<!--&lt;!&ndash;          <span class="title">皮带速度</span>&ndash;&gt;-->
+<!--&lt;!&ndash;          <img src="@/assets/img/004pidai.png" class="pidai" />&ndash;&gt;-->
+<!--&lt;!&ndash;        </div>&ndash;&gt;-->
+<!--&lt;!&ndash;      </div>&ndash;&gt;-->
+
+<!--    </div>-->
+<!--    <div class="bottom" style="margin-top:0px">-->
+<!--      <span class="title1">头部驱动电机2</span>-->
+
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">变频器</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              频率:<span class="content">{{ transducer1.frequency }}Hz</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              电压:<span class="content">{{ transducer1.voltage }}V</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              转速:<span class="content">{{ transducer1.speed }}r/min</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              功率:<span class="content">{{ transducer1.power}}kW</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              电流:<span class="content">{{ transducer1.electricity }}A</span>-->
+<!--            </li>-->
+<!--            &lt;!&ndash;                  <li>&ndash;&gt;-->
+<!--            &lt;!&ndash;                    完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--            &lt;!&ndash;                  </li>&ndash;&gt;-->
+<!--            &lt;!&ndash;                  <li>&ndash;&gt;-->
+<!--            &lt;!&ndash;                    完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--            &lt;!&ndash;                  </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">电机</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              电流:<span class="content">{{ motor1.electricity }}A</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              功率:<span class="content">{{ motor1.power}}W</span>-->
+<!--            </li>-->
+<!--            <li >-->
+<!--              后轴温度:<span class="content">{{ motor1.temperature_back}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              前轴温度:<span class="content">{{ motor1.temperature_front}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组A相温度:<span class="content">{{ motor1.temperature_a}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组B相温度:<span class="content">{{ motor1.temperature_b}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              绕组C相温度:<span class="content">{{ motor1.temperature_c}}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              自由端径向水平振动:<span class="content">{{ motor1.vibrate_ziyou }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              驱动端径向水平振动:<span class="content">{{ motor1.vibrate_qudong }}mm/s</span>-->
+<!--            </li>-->
+<!--            &lt;!&ndash;            <li>&ndash;&gt;-->
+<!--            &lt;!&ndash;              振动:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--            &lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">减速器</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              油温:<span class="content">{{ reducer1.temperature }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              油压:<span class="content">{{ reducer1.pressure }}Mpa</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              输入轴径向水平振动:<span class="content">{{ reducer1.vibrate_level }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              输入轴径向垂直振动:<span class="content">{{ reducer1.vibrate_vertical }}mm/s</span>-->
+<!--            </li>-->
+<!--            &lt;!&ndash;            <li>&ndash;&gt;-->
+<!--            &lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--            &lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <div class="mycenter">-->
+<!--          <span class="title">滚筒</span>-->
+<!--          <ul>-->
+<!--            <li>-->
+<!--              东侧温度:<span class="content">{{ roller1.temperature_east }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              西侧温度:<span class="content">{{ roller1.temperature_west }}℃</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              东侧振动:<span class="content">{{ roller1.vibrate_east }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              西侧振动:<span class="content">{{ roller1.vibrate_west }}mm/s</span>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              张力:<span class="content">{{ roller1.strain }}KG</span>-->
+<!--            </li>-->
+<!--            &lt;!&ndash;            <li>&ndash;&gt;-->
+<!--            &lt;!&ndash;              完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--            &lt;!&ndash;            </li>&ndash;&gt;-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="myleft">-->
+<!--        <br><br>-->
+<!--        <br><br>-->
+<!--        <span class="title1" style="width: 50%;margin-left: 40px;">皮带速度: {{ belt.speed}}m/s</span><br>-->
+<!--      </div>-->
+<!--    </div>-->
+
+
+<!--&lt;!&ndash;&lt;!&ndash;grid测试&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;    <div class="grid">&ndash;&gt;-->
+<!--&lt;!&ndash;      <div >&ndash;&gt;-->
+<!--&lt;!&ndash;        <span class="title1">头部驱动电机1</span>&ndash;&gt;-->
+<!--&lt;!&ndash;      </div>&ndash;&gt;-->
+<!--&lt;!&ndash;      <div >项目2&ndash;&gt;-->
+<!--&lt;!&ndash;              <div class="myleft">&ndash;&gt;-->
+<!--&lt;!&ndash;                    <div class="mycenter">&ndash;&gt;-->
+<!--&lt;!&ndash;                        <span class="title">工作面信息</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                        <ul>&ndash;&gt;-->
+<!--&lt;!&ndash;                          <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                            设备能力:<span class="content">{{ workInfo.capacity }}bt</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                          </li>&ndash;&gt;-->
+<!--&lt;!&ndash;                          <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                            区域人数:<span class="content">{{ workInfo.areaPeople }}人</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                          </li>&ndash;&gt;-->
+<!--&lt;!&ndash;                          <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                            完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                          </li>&ndash;&gt;-->
+<!--&lt;!&ndash;                          <li>&ndash;&gt;-->
+<!--&lt;!&ndash;                            完成率:<span class="content">{{ workInfo.completionRate }}%</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                          </li>&ndash;&gt;-->
+<!--&lt;!&ndash;                        </ul>&ndash;&gt;-->
+<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
+<!--&lt;!&ndash;              </div>&ndash;&gt;-->
+
+
+
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import oneline from "@/common/oneline";-->
+<!--import twoline from "@/common/twoline";-->
+<!--import threeline from "@/common/threeline";-->
+<!--// import faultAlarm from "./faultAlarm";-->
+<!--// import runningMsg from "./runningMsg";-->
+<!--// import runningMsg1 from "./runningMsg1";-->
+<!--// import twoline2 from "./twoline2";-->
+<!--// import waterStorage from "@/views/mining/envTest/waterStorage";-->
+<!--import waterStorage from "@/views/app_beam_tube_inspection/waterStorage";-->
+<!--import fuzai from "@/views/app_beam_tube_inspection/picture/fuzai";-->
+<!--import dunmei from "@/views/app_beam_tube_inspection/picture/dunmei";-->
+<!--import dangqian from "@/views/app_beam_tube_inspection/picture/dangqian";-->
+<!--import shuru from "@/views/app_beam_tube_inspection/picture/shuru";-->
+<!--import xiaolv from "@/views/app_beam_tube_inspection/picture/xiaolv";-->
+<!--import albox from "@/views/app_beam_tube_inspection/albox";-->
+<!--import radartu from "@/views/app_beam_tube_inspection/picture/radartu";-->
+<!--import RadarChart from "@/views/app_beam_tube_inspection/picture/RadarChart";-->
+<!--export default {-->
+
+<!--  data() {-->
+<!--    return {-->
+<!--      workInfo: {-->
+<!--        capacity: 12,-->
+<!--        areaPeople: 10,-->
+<!--        completionRate: 90,-->
+<!--      },-->
+<!--      work:{-->
+<!--        info:"带式输送机运行相对稳定,效率处于较高水平",-->
+<!--        info1:"带式输送机运行相对稳定,效率处于较高水平",-->
+<!--        info2:"带式输送机轻载,效率处于适中水平",-->
+<!--        info3:"带式输送机载荷较高,效率处于相对较低水平",-->
+<!--        info4:"单位煤流载荷量相对较小,效率处于更低水平",-->
+
+<!--      },-->
+
+
+
+<!--      transducer1:{-->
+<!--        frequency: 30.1, //Hz-->
+<!--        voltage: 6,       //-->
+<!--        power: 0,-->
+<!--        electricity: 142.4,-->
+<!--        speed:1500,-->
+<!--      },-->
+<!--      motor1:{-->
+<!--        electricity: 142.4,-->
+<!--        power: 1250,-->
+<!--        temperature_back: 40.2,-->
+<!--        temperature_front: 58.4,-->
+<!--        temperature_a: 76.5,-->
+<!--        temperature_b: 76.9,-->
+<!--        temperature_c: 73.9,-->
+<!--        vibrate_ziyou: 0,-->
+<!--        vibrate_qudong: 0,-->
+<!--      },-->
+<!--      reducer1:{-->
+<!--        temperature: 58.2, //℃-->
+<!--        pressure: 1.27,  //Mpa-->
+<!--        vibrate_level: 3.82,-->
+<!--        vibrate_vertical: 0,-->
+
+<!--      },-->
+<!--      roller1:{-->
+<!--        temperature_west: 46.3,  //℃-->
+<!--        temperature_east: 49, //℃-->
+<!--        vibrate_west: 0.07,  //mm/s-->
+<!--        vibrate_east: 0.04,  //mm/s-->
+<!--        strain: 11750,  //KG-->
+<!--      },-->
+<!--      belt:{-->
+<!--        speed: 4.33,  //m/s-->
+<!--      },-->
+
+
+<!--      //分开-->
+<!--      currentComId: this.title,-->
+<!--      comOptions: [-->
+<!--        {-->
+<!--          id: "1",-->
+<!--          label: "1号压风机",-->
+<!--        },-->
+<!--        {-->
+<!--          id: "2",-->
+<!--          label: "2号压风机",-->
+<!--        },-->
+<!--        {-->
+<!--          id: "3",-->
+<!--          label: "3号压风机",-->
+<!--        },-->
+<!--      ],-->
+<!--      windingType: [-->
+<!--        "dianjiraozuwenduu_after",-->
+<!--        "dianjiraozuwenduv_after",-->
+<!--        "dianjiraozuwenduw_after",-->
+<!--      ],-->
+<!--      windingLegand: ["U1相温度", "V1相温度", "W1相温度"],-->
+<!--      vibrateType: ["xzhou_after", "yzhou_after", "zzhou_after"],-->
+<!--      vibrateLegand: ["X轴振动", "Y轴振动", "Z轴振动"],-->
+<!--      pressureType: ["gongqiyali_after", "fengbaoyali_after"],-->
+<!--      pressureLegand: ["压风机压力", "风包压力"],-->
+<!--      temperatureType: ["paiqiwendu_after", "fengbaowendu_after"],-->
+<!--      temperatureLegand: ["压风机温度", "风包温度"],-->
+<!--      bearingType: ["dianjiqianzhouwendu_after", "dianjihouzhouwendu_after"],-->
+<!--      bearingLegand: ["电机前轴温", "电机后轴温"],-->
+<!--    };-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    let interval = setInterval(() => {-->
+<!--      let x=Math.random();-->
+<!--      if(x>0.75){-->
+<!--        this.work.info = this.work.info1;-->
+<!--      }-->
+<!--      else if(x>0.5){-->
+<!--        this.work.info = this.work.info2;-->
+<!--      }-->
+<!--      else if(x>0.25){-->
+<!--        this.work.info = this.work.info3;-->
+<!--      }-->
+<!--      else{-->
+<!--        this.work.info = this.work.info4;-->
+<!--      }-->
+<!--      // this.workInfo.capacity = this.getRandomNum(0, 20);-->
+<!--      // this.workInfo.areaPeople = this.getRandomNum(0, 30);-->
+<!--      // this.workInfo.completionRate = this.getRandomNum(50, 100);-->
+<!--      //-->
+<!--      // this.safeState.area = Math.random() > 0.5 ? "安全" : "报警";-->
+<!--      // let warning = this.getRandomNum(0, 2);-->
+<!--      // this.safeState.warning =-->
+<!--      //     warning === 2 ? "中部" : warning === 1 ? "底部" : "上部";-->
+<!--      // this.safeState.danger = this.getRandomNum(0, 6);-->
+<!--      //-->
+<!--      // this.workCycle.state = Math.random() > 0.5 ? "正在生产" : "停止生产";-->
+
+<!--    }, 3000);-->
+<!--    this.$once("hook:beforeDestroy", () => {-->
+<!--      clearInterval(interval);-->
+<!--    });-->
+<!--  },-->
+<!--  props: ["title"],-->
+<!--  methods: {-->
+<!--    selectChart(val) {-->
+<!--      console.log("val", val);-->
+<!--      this.$bus.$emit("changeCompressedId", String(val));-->
+<!--      this.$refs.current.idChange(val);-->
+<!--      this.$refs.winding.idChange(val);-->
+<!--      this.$refs.vibrate.idChange(val);-->
+<!--      this.$refs.pressure.idChange(val);-->
+<!--      this.$refs.temperature.idChange(val);-->
+<!--      this.$refs.bearing.idChange(val);-->
+<!--      //   this.$refs.faultAlarm.idChange(val);-->
+<!--      //   this.$refs.runningMsg.idChange(val);-->
+<!--    },-->
+<!--  },-->
+<!--  components: {-->
+<!--    // oneline,-->
+<!--    // twoline,-->
+<!--    // threeline,-->
+<!--    // faultAlarm,-->
+<!--    // runningMsg,-->
+<!--    // runningMsg1,-->
+<!--    // twoline2,-->
+<!--    waterStorage,-->
+<!--    fuzai,-->
+<!--    dunmei,-->
+<!--    dangqian,-->
+<!--    shuru,-->
+<!--    xiaolv,-->
+<!--    albox,-->
+<!--    radartu,-->
+<!--    RadarChart,-->
+<!--  },-->
+<!--};-->
+<!--</script>-->
+
+<!--<style lang="less">-->
+<!--.myleft {-->
+<!--  margin-top: 5px;-->
+<!--  width: 20%;-->
+<!--  height: 100%;-->
+<!--  margin-left: 15px;-->
+<!--  //margin-top: -30px;-->
+<!--  //display: flex;-->
+<!--  //justify-content: space-around;-->
+<!--  position: relative;-->
+<!--  z-index: 1;-->
+<!--}-->
+<!--.title1 {-->
+<!--  //border-bottom: #5ddcf8 1px solid;-->
+<!--  height: 40px;-->
+<!--  width: 5%;-->
+<!--  font-size: 25px;-->
+<!--  line-height: 2;-->
+<!--  padding: 5px;-->
+<!--  font-weight: 500;-->
+<!--  color: #4adefe;-->
+<!--  margin-left: 20px;-->
+<!--}-->
+<!--.content1{-->
+<!--  height: 240px;-->
+<!--  margin-left: 0px;-->
+<!--  margin-bottom: 15px;-->
+<!--  color: #f3db5c;-->
+<!--  right: 100px;-->
+<!--  position: absolute;-->
+<!--}-->
+<!--.mycenter {-->
+<!--  height: 240px;-->
+<!--  margin-left: 0px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--  margin-bottom: 15px;-->
+<!--  .title {-->
+<!--    border-bottom: #5ddcf8 1px solid;-->
+<!--    height: 40px;-->
+<!--    width: 100%;-->
+<!--    font-size: 22px;-->
+<!--    line-height: 2;-->
+<!--    padding: 5px;-->
+<!--    font-weight: 500;-->
+<!--    color: #4adefe;-->
+<!--    margin-left: 20px;-->
+<!--  }-->
+<!--  .content {-->
+<!--    color: #f3db5c;-->
+<!--    right: 70px;-->
+<!--    position: absolute;-->
+<!--  }-->
+<!--  ul {-->
+<!--    margin-top: 10px;-->
+<!--    margin-left: -12px;-->
+<!--  }-->
+<!--  li {-->
+<!--    width: 120%;-->
+<!--    height: 100%;-->
+<!--    color: #4adefe;-->
+<!--    display: flex;-->
+<!--    /* flex-direction: column; */-->
+<!--    font-size: 18px;-->
+<!--    position: relative;-->
+<!--    margin-top: -10px;-->
+<!--    line-height: 30px;-->
+<!--    padding-left: 0px;-->
+<!--  }-->
+<!--  .start {-->
+<!--    /* margin-left: 40px; */-->
+<!--    width: 20px;-->
+<!--    height: 20px;-->
+<!--    background-color: #009966;-->
+<!--    border-radius: 50%;-->
+<!--    position: absolute;-->
+<!--    right: 100px;-->
+<!--  }-->
+
+<!--  .stop {-->
+<!--    /* margin: left: 40px; */-->
+<!--    width: 20px;-->
+<!--    height: 20px;-->
+<!--    background-color: #ff6666;-->
+<!--    border-radius: 50%;-->
+<!--    position: absolute;-->
+<!--    right: 100px;-->
+<!--  }-->
+<!--}-->
+
+<!--</style>-->
+<!--<style scoped>-->
+<!--.pidai{-->
+<!--  display: inline;-->
+<!--  margin-left: 50px;-->
+<!--}-->
+<!--.grid {-->
+<!--  display: grid;-->
+<!--  grid-template-columns: repeat(6, 1fr);-->
+<!--  grid-gap: 10px;-->
+<!--  /*margin-top: -30px;*/-->
+<!--  /*justify-content: space-around;*/-->
+
+<!--}-->
+<!--.span-row-2{grid-row: span 2 / auto;}-->
+
+<!--.bottom_tu{-->
+<!--    position: absolute;-->
+<!--    z-index: 2;-->
+<!--}-->
+
+
+
+
+
+<!--/*分开*/-->
+<!--.select-veido .el-select {-->
+<!--  width: 140px;-->
+<!--  margin-left: 10px;-->
+<!--}-->
+<!--.select-veido >>> .el-input&#45;&#45;small .el-input__inner {-->
+<!--  background: none;-->
+<!--  color: #4adefe;-->
+<!--  font-size: 20px;-->
+<!--}-->
+<!--.select-veido >>> .el-input__inner {-->
+<!--  border: 0;-->
+<!--}-->
+<!--.select-veido >>> .el-scrollbar {-->
+<!--  background: rgba(255, 255, 255, 1);-->
+<!--  border: 0;-->
+<!--}-->
+<!--.main {-->
+<!--  width: 100%;-->
+<!--  position: relative;-->
+<!--  height: 1090px;-->
+<!--  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),-->
+<!--    linear-gradient(-->
+<!--      to top,-->
+<!--      rgba(255, 255, 255, 0.4) 0%,-->
+<!--      rgba(0, 0, 0, 0.25) 200%-->
+<!--    );-->
+<!--  /* 正片叠底模式。 */-->
+<!--  background-blend-mode: multiply;-->
+<!--  /* background-color: antiquewhite; */-->
+<!--}-->
+<!--.header {-->
+<!--  margin: 0 auto;-->
+<!--  position: relative;-->
+<!--  width: 100%;-->
+<!--  height: 10%;-->
+<!--  max-width: 1920px;-->
+<!--  background: url("../../../src/assets/img/gas/header.png") center no-repeat;-->
+<!--  box-sizing: border-box;-->
+<!--}-->
+<!--.select-veido {-->
+<!--  margin: 0;-->
+<!--  padding: 0;-->
+<!--  line-height: 50px;-->
+<!--  text-align: center;-->
+<!--  font-size: 22px;-->
+<!--  color: #ffffff;-->
+<!--}-->
+<!--.top {-->
+<!--  height: 25%;-->
+<!--}-->
+<!--.top_left {-->
+<!--  margin-top: 20px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--  height: 230px;-->
+<!--}-->
+<!--.top_center {-->
+<!--  margin-top: 20px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--  height: 230px;-->
+<!--}-->
+<!--.top_right {-->
+<!--  margin-top: 20px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--  height: 230px;-->
+<!--}-->
+
+<!--.center {-->
+<!--  height: 30%;-->
+<!--}-->
+<!--.center_left {-->
+<!--  width: 100%;-->
+<!--  height: 230px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--}-->
+<!--.center_center {-->
+<!--  width: 100%;-->
+<!--  height: 230px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--}-->
+<!--.center_right {-->
+<!--  width: 100%;-->
+<!--  height: 230px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--}-->
+
+
+<!--.bottom {-->
+<!--  /* height: 30%; */-->
+<!--  /* display: inline; */-->
+<!--  /* height: 400px; */-->
+<!--  margin-top: -70px;-->
+<!--  display: flex;-->
+<!--  justify-content: space-around;-->
+<!--  /*position: relative;*/-->
+<!--  /*z-index: 1;*/-->
+<!--}-->
+<!--.bottom_left {-->
+<!--  width: 500px;-->
+<!--  height: 210px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--}-->
+<!--.bottom_right {-->
+<!--  width: 500px;-->
+<!--  height: 210px;-->
+<!--  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;-->
+<!--  background-size: 100%;-->
+<!--}-->
+<!--</style>-->

+ 640 - 0
src/views/app_beam_tube_inspection/dataBoardtest.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="main">
+
+    <div class="top">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="top_left">
+            <fuzai title="负载曲线"></fuzai>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_center">
+                <xiaolv title="效率曲线"></xiaolv>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_right">
+            <dunmei title="吨煤能耗曲线"></dunmei>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="center">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="center_left">
+                <shuru title="输入功率曲线"></shuru>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_center">
+            <div class="title2" style="width: 100%">工况分析</div>
+            <albox style="margin-left: 400px;color: gray"></albox>
+            <div class="title2" style="width: 100%">区域状态:<span style="color: #f3db5c;font-size: 20px">{{work.info}}</span>
+<!--              <radartu></radartu>-->
+<!--              <RadarChart></RadarChart>-->
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_right">
+            <dangqian title="当前负载与额定负载占比曲线"></dangqian>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="bottom">
+      <span class="title1">头部驱动电机1</span>
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">电机</span>
+          <ul>
+            <li>
+              电流:<span class="content">{{ motor1.electricity }}A</span>
+            </li>
+            <li>
+              功率:<span class="content">{{ motor1.power}}KW</span>
+            </li>
+            <li >
+              前/后轴温度:<span class="content">{{ motor1.temperature_front}}/{{ motor1.temperature_back}}℃</span>
+            </li>
+
+            <li>
+              绕组A/B/C相温度:<span class="content">{{ motor1.temperature_a}}/{{ motor1.temperature_b}}/{{ motor1.temperature_c}}℃</span>
+            </li>
+
+            <li>
+              水平/垂直振动:<span class="content">{{ motor1.level }}/{{ motor1.vertical }}mm/s</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+            <div class="mycenter">
+                <span class="title">变频器</span>
+                <ul>
+                  <li>
+                    频率:<span class="content">{{ transducer1.frequency }}Hz</span>
+                  </li>
+                  <li>
+                    电压:<span class="content">{{ transducer1.voltage }}kV</span>
+                  </li>
+                  <li>
+                    转速:<span class="content">{{ transducer1.speed }}r/min</span>
+                  </li>
+                  <li>
+                    功率:<span class="content">{{ transducer1.power}}kW</span>
+                  </li>
+                  <li>
+                    电流:<span class="content">{{ transducer1.electricity }}A</span>
+                  </li>
+                </ul>
+            </div>
+      </div>
+
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">减速器</span>
+          <ul>
+            <li>
+              油温:<span class="content">{{ reducer1.temperature }}℃</span>
+            </li>
+            <li>
+              油压:<span class="content">{{ reducer1.pressure }}Mpa</span>
+            </li>
+            <li>
+              水平振动:<span class="content">{{ reducer1.vibrate_level }}mm/s</span>
+            </li>
+            <li>
+              垂直振动:<span class="content">{{ reducer1.vibrate_vertical }}mm/s</span>
+            </li>
+
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">滚筒</span>
+          <ul>
+            <li>
+              东侧温度:<span class="content">{{ roller1.temperature_east }}℃</span>
+            </li>
+            <li>
+              西侧温度:<span class="content">{{ roller1.temperature_west }}℃</span>
+            </li>
+            <li>
+              东侧振动:<span class="content">{{ roller1.vibrate_east }}mm/s</span>
+            </li>
+            <li>
+              西侧振动:<span class="content">{{ roller1.vibrate_west }}mm/s</span>
+            </li>
+            <li>
+              张力:<span class="content">{{ roller1.strain }}KG</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+
+      <div class="myleft">
+
+        <div class="title2" style="width: 100%">皮带速度:<span style="color: #f3db5c;margin-left: 30px;">{{ belt.speed}}m/s</span></div>
+
+      </div>
+    </div>
+    <div class="bottom" style="margin-top:0px">
+      <span class="title1">头部驱动电机2</span>
+
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">电机</span>
+          <ul>
+            <li>
+              电流:<span class="content">{{ motor1.electricity }}A</span>
+            </li>
+            <li>
+              功率:<span class="content">{{ motor1.power}}KW</span>
+            </li>
+            <li >
+              前/后轴温度:<span class="content">{{ motor1.temperature_front}}/{{ motor1.temperature_back}}℃</span>
+            </li>
+
+            <li>
+              绕组A/B/C相温度:<span class="content">{{ motor1.temperature_a}}/{{ motor1.temperature_b}}/{{ motor1.temperature_c}}℃</span>
+            </li>
+
+            <li>
+              水平/垂直振动:<span class="content">{{ motor1.level }}/{{ motor1.vertical }}mm/s</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">变频器</span>
+          <ul>
+            <li>
+              频率:<span class="content">{{ transducer1.frequency }}Hz</span>
+            </li>
+            <li>
+              电压:<span class="content">{{ transducer1.voltage }}V</span>
+            </li>
+            <li>
+              转速:<span class="content">{{ transducer1.speed }}r/min</span>
+            </li>
+            <li>
+              功率:<span class="content">{{ transducer1.power}}kW</span>
+            </li>
+            <li>
+              电流:<span class="content">{{ transducer1.electricity }}A</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">减速器</span>
+          <ul>
+            <li>
+              油温:<span class="content">{{ reducer1.temperature }}℃</span>
+            </li>
+            <li>
+              油压:<span class="content">{{ reducer1.pressure }}Mpa</span>
+            </li>
+            <li>
+              水平振动:<span class="content">{{ reducer1.vibrate_level }}mm/s</span>
+            </li>
+            <li>
+              垂直振动:<span class="content">{{ reducer1.vibrate_vertical }}mm/s</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+        <div class="mycenter">
+          <span class="title">滚筒</span>
+          <ul>
+            <li>
+              东侧温度:<span class="content">{{ roller1.temperature_east }}℃</span>
+            </li>
+            <li>
+              西侧温度:<span class="content">{{ roller1.temperature_west }}℃</span>
+            </li>
+            <li>
+              东侧振动:<span class="content">{{ roller1.vibrate_east }}mm/s</span>
+            </li>
+            <li>
+              西侧振动:<span class="content">{{ roller1.vibrate_west }}mm/s</span>
+            </li>
+            <li>
+              张力:<span class="content">{{ roller1.strain }}KG</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="myleft">
+        <img src="@/assets/img/012belt.gif" class="pidai" style="z-index: 2;position: absolute;margin-left: 0px; margin-top: -200px;" /><br>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import waterStorage from "@/views/app_beam_tube_inspection/waterStorage";
+import fuzai from "@/views/app_beam_tube_inspection/picture/fuzai";
+import dunmei from "@/views/app_beam_tube_inspection/picture/dunmei";
+import dangqian from "@/views/app_beam_tube_inspection/picture/dangqian";
+import shuru from "@/views/app_beam_tube_inspection/picture/shuru";
+import xiaolv from "@/views/app_beam_tube_inspection/picture/xiaolv";
+import albox from "@/views/app_beam_tube_inspection/albox";
+import radartu from "@/views/app_beam_tube_inspection/picture/radartu";
+import RadarChart from "@/views/app_beam_tube_inspection/picture/RadarChart";
+export default {
+
+  data() {
+    return {
+      workInfo: {
+        capacity: 12,
+        areaPeople: 10,
+        completionRate: 90,
+      },
+      work:{
+        info:"带式输送机运行相对稳定,效率处于较高水平",
+        info1:"带式输送机运行相对稳定,效率处于较高水平",
+        info2:"带式输送机轻载,效率处于适中水平",
+        info3:"带式输送机载荷较高,效率处于相对较低水平",
+        info4:"单位煤流载荷量相对较小,效率处于更低水平",
+
+      },
+
+
+
+      transducer1:{
+        frequency: 30.1, //Hz
+        voltage: 6,       //
+        power: 1500,
+        electricity: 142.4,
+        speed:1500,
+      },
+      motor1:{
+        electricity: 142.4,
+        power: 1250,
+        temperature_back: 40.2,
+        temperature_front: 58.4,
+        temperature_a: 76.5,
+        temperature_b: 76.9,
+        temperature_c: 73.9,
+        level: 18,
+        vertical: 20,
+      },
+      reducer1:{
+        temperature: 58.2, //℃
+        pressure: 1.27,  //Mpa
+        vibrate_level: 3.82,
+        vibrate_vertical: 5.12,
+
+      },
+      roller1:{
+        temperature_west: 46.3,  //℃
+        temperature_east: 49, //℃
+        vibrate_west: 0.07,  //mm/s
+        vibrate_east: 0.04,  //mm/s
+        strain: 11750,  //KG
+      },
+      belt:{
+        speed: 4.33,  //m/s
+      },
+
+
+      //分开
+      currentComId: this.title,
+      comOptions: [
+        {
+          id: "1",
+          label: "1号压风机",
+        },
+        {
+          id: "2",
+          label: "2号压风机",
+        },
+        {
+          id: "3",
+          label: "3号压风机",
+        },
+      ],
+      windingType: [
+        "dianjiraozuwenduu_after",
+        "dianjiraozuwenduv_after",
+        "dianjiraozuwenduw_after",
+      ],
+      windingLegand: ["U1相温度", "V1相温度", "W1相温度"],
+      vibrateType: ["xzhou_after", "yzhou_after", "zzhou_after"],
+      vibrateLegand: ["X轴振动", "Y轴振动", "Z轴振动"],
+      pressureType: ["gongqiyali_after", "fengbaoyali_after"],
+      pressureLegand: ["压风机压力", "风包压力"],
+      temperatureType: ["paiqiwendu_after", "fengbaowendu_after"],
+      temperatureLegand: ["压风机温度", "风包温度"],
+      bearingType: ["dianjiqianzhouwendu_after", "dianjihouzhouwendu_after"],
+      bearingLegand: ["电机前轴温", "电机后轴温"],
+    };
+  },
+  mounted() {
+    let interval = setInterval(() => {
+      let x=Math.random();
+      if(x>0.75){
+        this.work.info = this.work.info1;
+      }
+      else if(x>0.5){
+        this.work.info = this.work.info2;
+      }
+      else if(x>0.25){
+        this.work.info = this.work.info3;
+      }
+      else{
+        this.work.info = this.work.info4;
+      }
+
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+  props: ["title"],
+  methods: {
+    selectChart(val) {
+      console.log("val", val);
+      this.$bus.$emit("changeCompressedId", String(val));
+      this.$refs.current.idChange(val);
+      this.$refs.winding.idChange(val);
+      this.$refs.vibrate.idChange(val);
+      this.$refs.pressure.idChange(val);
+      this.$refs.temperature.idChange(val);
+      this.$refs.bearing.idChange(val);
+      //   this.$refs.faultAlarm.idChange(val);
+      //   this.$refs.runningMsg.idChange(val);
+    },
+  },
+  components: {
+    waterStorage,
+    fuzai,
+    dunmei,
+    dangqian,
+    shuru,
+    xiaolv,
+    albox,
+    radartu,
+    RadarChart,
+
+  },
+};
+</script>
+
+<style lang="less">
+.myleft {
+  margin-top: 5px;
+  width: 20%;
+  height: 100%;
+  margin-left: 15px;
+  //margin-top: -30px;
+  //display: flex;
+  //justify-content: space-around;
+  position: relative;
+  z-index: 1;
+}
+.title1 {
+  //border-bottom: #5ddcf8 1px solid;
+
+  height: 40px;
+  width: 5%;
+  font-size: 25px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+  color: #4adefe;
+  margin-left: 20px;
+  margin-top: 25px;
+}
+.title2 {
+  //border-bottom: #5ddcf8 1px solid;
+
+  height: 40px;
+  width: 5%;
+  font-size: 25px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+  color: #4adefe;
+  margin-left: 20px;
+}
+.content1{
+  height: 240px;
+  margin-left: 0px;
+  margin-bottom: 15px;
+  color: #f3db5c;
+  right: 100px;
+  position: absolute;
+}
+.mycenter {
+  height: 240px;
+  margin-left: 0px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  margin-bottom: 15px;
+  .title {
+    border-bottom: #5ddcf8 1px solid;
+    height: 40px;
+    width: 100%;
+    font-size: 22px;
+    line-height: 2;
+    padding: 5px;
+    font-weight: 500;
+    color: #4adefe;
+    margin-left: 20px;
+  }
+  .content {
+    color: #f3db5c;
+    right: 70px;
+    position: absolute;
+  }
+  ul {
+    margin-top: 10px;
+    margin-left: -12px;
+  }
+  li {
+    width: 120%;
+    height: 100%;
+    color: #4adefe;
+    display: flex;
+    /* flex-direction: column; */
+    font-size: 18px;
+    position: relative;
+    margin-top: -10px;
+    line-height: 50px;   //30
+    padding-left: 0px;
+  }
+  .start {
+    /* margin-left: 40px; */
+    width: 20px;
+    height: 20px;
+    background-color: #009966;
+    border-radius: 50%;
+    position: absolute;
+    right: 100px;
+  }
+
+  .stop {
+    /* margin: left: 40px; */
+    width: 20px;
+    height: 20px;
+    background-color: #ff6666;
+    border-radius: 50%;
+    position: absolute;
+    right: 100px;
+  }
+}
+
+</style>
+<style scoped>
+.pidai{
+  display: inline;
+  margin-left: 50px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 10px;
+  /*margin-top: -30px;*/
+  /*justify-content: space-around;*/
+
+}
+.span-row-2{grid-row: span 2 / auto;}
+
+.bottom_tu{
+    position: absolute;
+    z-index: 2;
+}
+
+
+
+
+
+/*分开*/
+.select-veido .el-select {
+  width: 140px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+  color: #4adefe;
+  font-size: 20px;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+.select-veido >>> .el-scrollbar {
+  background: rgba(255, 255, 255, 1);
+  border: 0;
+}
+.main {
+  width: 100%;
+  position: relative;
+  height: 1090px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
+  /* background-color: antiquewhite; */
+}
+.header {
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+  height: 10%;
+  max-width: 1920px;
+  background: url("../../../src/assets/img/gas/header.png") center no-repeat;
+  box-sizing: border-box;
+}
+.select-veido {
+  margin: 0;
+  padding: 0;
+  line-height: 50px;
+  text-align: center;
+  font-size: 22px;
+  color: #ffffff;
+}
+.top {
+  height: 25%;
+}
+.top_left {
+  margin-top: 20px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 230px;
+}
+.top_center {
+  margin-top: 20px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 230px;
+}
+.top_right {
+  margin-top: 20px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 230px;
+}
+
+.center {
+  height: 30%;
+}
+.center_left {
+  width: 100%;
+  height: 230px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_center {
+  width: 100%;
+  height: 230px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_right {
+  width: 100%;
+  height: 230px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+
+
+.bottom {
+  /* height: 30%; */
+  /* display: inline; */
+  /* height: 400px; */
+  margin-top: -70px;
+  display: flex;
+  justify-content: space-around;
+  /*position: relative;*/
+  /*z-index: 1;*/
+}
+.bottom_left {
+  width: 500px;
+  height: 210px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom_right {
+  width: 500px;
+  height: 210px;
+  background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+</style>

+ 163 - 0
src/views/app_beam_tube_inspection/myleft.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <div style="width: 100%; margin: 0 auto" class="left_003">
+      <span class="left_tile">基本信息</span>
+      <!-- 使用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: 100%; margin: 0 auto" class="left_003">
+      <span class="left_tile">区域评分</span>
+      <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>
+      <el-row style="margin-top:20px">
+        <scoreImg ref="scoreImg"></scoreImg>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import scoreImg from "@/components/monitor/scoreImg";
+export default {
+  name: "left",
+  data() {
+    return {
+      percentage: 70,
+      // 基本信息区域
+      leftData: [
+        {  
+          name: "名   称",
+          value: "原煤仓二层分站",
+        },
+        {
+          name: "面  积",
+          value: "3000m2",
+        },
+        {
+          name: "人员数量",
+          value: "1",
+        },
+        {
+          name: "设备数量",
+          value: "10",
+        },
+        {
+          name: "工作用途",
+          value: "上仓皮带入口",
+        },
+      ],
+    };
+  },
+  mounted() {
+    let interval = setInterval(() => {
+      this.percentage = this.getRandomNum(70, 100);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+  components: {
+    scoreImg,
+  },
+  methods: {
+    // 获取两个参数,一个是leftData 下拉选框可以选择的区域,一个是viewData 区域评分对应的柱状图数据
+    dataChange(leftData) {
+      // 将选择区域数据给基本信息表格
+      this.leftData = leftData;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.left_001 {
+  text-align: left;
+  font-size: 16px;
+  padding: 5px;
+}
+.left_006 {
+  text-align: right;
+  font-size: 16px;
+  padding: 5px;
+  color: #f3db5c;
+}
+.left_002 {
+  display: grid;
+  color: #4adefe;
+  grid-template-columns: 1fr 1fr;
+}
+.left_003 {
+  color: #4adefe;
+  background: url(../../../src/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;
+  padding: 10px;
+}
+
+.left_004 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: white 1px solid;
+  margin-bottom: 15px;
+}
+
+.left_tile {
+  border-bottom: #5ddcf8 1px solid;
+  height: 40px;
+  font-size: 18px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+  color: #4adefe;
+}
+
+.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;
+}
+.left_003 >>> .el-progress__text {
+  color: #f3db5c;
+}
+</style>

+ 142 - 0
src/views/app_beam_tube_inspection/picture/RadarChart.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div id="radar"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  props: {
+    ShabitList: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      textList: [], // 线条类型
+      nameList: [], // 选项标题
+      aveList: [], // 平均线
+      uList: [], // 你的得分
+      avgNum: 0 // 综合得分
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.radarBtn()
+    })
+    this.radarData()
+  },
+  methods: {
+    radarData() {
+      let txt = ''
+      this.ShabitList.textName.forEach(t => {
+        txt += t.text + ','
+      })
+      this.textList = (txt.substring(0, txt.length - 1)).split(',')
+      // 数据
+      let names = ''
+      let avg = ''
+      let u = ''
+      let sum = 0
+      this.ShabitList.content.forEach(c => {
+        names += c.name + ','
+        avg += c.avgValue + ','
+        u += c.uValue + ','
+        sum += c.uValue
+      })
+      this.avgNum = sum.toFixed(1)
+      this.aveList = (avg.substring(0, avg.length - 1)).split(',')
+      this.uList = (u.substring(0, u.length - 1)).split(',')
+      names.substring(0, names.length - 1).split(',').forEach(n => {
+        this.nameList.push({name: n})
+      })
+    },
+    radarBtn() {
+      let myChart = echarts.init(document.getElementById('radar'))
+      let option = {
+        title: {
+          text: '综合得分:' + this.avgNum + '分',
+          left: 'center'
+        },
+        legend: {
+          orient: 'vertical',
+          data: this.textList,
+          left: 'left',
+          top: '30px',
+          itemGap: 25,
+          textStyle: { // 图例文字的样式
+            fontSize: 14
+          }
+        },
+        radar: {
+          // 设置雷达图中间射线的颜色
+          axisLine: {
+            lineStyle: {
+              color: '#999',
+              fontSize: 30
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          indicator: this.nameList,
+          // 雷达图背景的颜色,在这儿随便设置了一个颜色,完全不透明度为0,就实现了透明背景
+          splitArea: {
+            areaStyle: {
+              color: '#f8f8f8' // 图表背景的颜色
+            }
+          }
+        },
+        series: [{
+          type: 'radar',
+          data: [
+            {
+              value: this.aveList,
+              name: '平均线',
+              // 设置区域边框和区域的颜色
+              itemStyle: {
+                color: '#043B6B'
+              },
+              label: {
+                show: true,
+                fontSize: 16,
+                formatter: function (params) {
+                  return params.value
+                }
+              }
+            },
+            {
+              value: this.uList,
+              name: '你的得分',
+              // 设置区域边框和区域的颜色
+              itemStyle: {
+                color: '#ce764c'
+              },
+              label: {
+                show: true,
+                fontSize: 16,
+                formatter: function (params) {
+                  return params.value
+                }
+              }
+            }
+          ]
+        }]
+      }
+      myChart.setOption(option)
+      // 让图表跟随屏幕自动的去适应
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#radar{
+  width: 220mm;
+  height: 130mm;
+  margin: 0 auto;
+}
+</style>

+ 243 - 0
src/views/app_beam_tube_inspection/picture/dangqian.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 230px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "8%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1,
+            min:0.8,
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+          },
+        ],
+        title: {
+          text: this.title,
+          // left: 100,
+          // top: 10,
+          padding: [15, 162],
+          // x:'center',
+          // y:'top',
+          // textAlign:'center',
+          margin:0,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 22,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 102, 102,.3)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 102, 102, 0)",
+                      },
+                    ],
+                    false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+
+            tooltip: {
+              show: true,
+            },
+            data: [0.85, 0.9, 0.86, 0.89, 0.93],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+
+    var first = 1;
+    if(first){
+      var xData=[];
+      var data1 = [];
+      for (let i = 0; i < 5; i++) {
+        let now =new Date();
+        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000);
+        data1.push(this.getRandomNumWithDecimals(0.8, 1));
+      }
+      first = 0;
+    }
+
+    let interval = setInterval(() => {
+      let temp = [];
+      // for (let i = 0; i < 5; i++) {
+      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
+      // }
+      xData.shift();
+      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+      data1.shift();
+      data1.push(this.getRandomNumWithDecimals(0.8, 1));
+      this.myChart.setOption({
+        xAxis:[{
+          data:xData
+        }],
+        series: [
+          {
+            data: data1,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

+ 243 - 0
src/views/app_beam_tube_inspection/picture/dunmei.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 230px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+              "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "8%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1600,
+            min:900,
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+          },
+        ],
+        title: {
+          text: this.title,
+          // left: 100,
+          // top: 10,
+          padding: [15, 243],
+          // x:'center',
+          // y:'top',
+          // textAlign:'center',
+          margin:0,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 22,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 102, 102,.3)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 102, 102, 0)",
+                      },
+                    ],
+                    false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+
+            tooltip: {
+              show: true,
+            },
+            data: [1000, 1200, 1500, 1035, 1600],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+
+    var first = 1;
+    if(first){
+      var xData=[];
+      var data1 = [];
+      for (let i = 0; i < 5; i++) {
+        let now =new Date();
+        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000);
+        data1.push(this.getRandomNumWithDecimals(900, 1600));
+      }
+      first = 0;
+    }
+
+    let interval = setInterval(() => {
+      let temp = [];
+      // for (let i = 0; i < 5; i++) {
+      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
+      // }
+      xData.shift();
+      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+      data1.shift();
+      data1.push(this.getRandomNumWithDecimals(900, 1600));
+      this.myChart.setOption({
+        xAxis:[{
+          data:xData
+        }],
+        series: [
+          {
+            data: data1,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

+ 248 - 0
src/views/app_beam_tube_inspection/picture/fuzai.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 230px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+              "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "8%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1600,
+            min:900,
+            boundaryGap: [0, "100%"],
+            // name: this.unit,
+            name:"单位(KW)",
+            nameTextStyle: {
+              color: "#fff",
+              nameLocation: "start",
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+          },
+        ],
+        title: {
+          text: this.title,
+          // left: 100,
+          // top: 10,
+          padding: [15, 264],
+          // x:'center',
+          // y:'top',
+          // textAlign:'center',
+          margin:0,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 22,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 102, 102,.3)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 102, 102, 0)",
+                      },
+                    ],
+                    false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+
+            tooltip: {
+              show: true,
+            },
+            data: [900, 1300, 1400, 1200, 1600],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+
+    var first = 1;
+    if(first){
+      var xData=[];
+      var data1 = [];
+      for (let i = 0; i < 5; i++) {
+        let now =new Date();
+        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000);
+        data1.push(this.getRandomNumWithDecimals(900, 1600));
+      }
+      first = 0;
+    }
+
+    let interval = setInterval(() => {
+      let temp = [];
+      // for (let i = 0; i < 5; i++) {
+      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
+      // }
+      xData.shift();
+      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+      data1.shift();
+      data1.push(this.getRandomNumWithDecimals(900, 1600));
+      this.myChart.setOption({
+        xAxis:[{
+          data:xData
+        }],
+        series: [
+          {
+            data: data1,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

+ 128 - 0
src/views/app_beam_tube_inspection/picture/radartu.vue

@@ -0,0 +1,128 @@
+<template>
+<div class="bac">
+  <div ref="lei"></div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "radartu",
+  data(){
+    return {
+      myChart: null,
+      option : {
+        title: {
+          text: 'Multiple Radar'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          left: 'center',
+          data: [
+            'A Software',
+            'A Phone',
+            'Another Phone',
+            'Precipitation',
+            'Evaporation'
+          ]
+        },
+        radar: [
+          {
+            indicator: [
+              { text: 'Brand', max: 100 },
+              { text: 'Content', max: 100 },
+              { text: 'Usability', max: 100 },
+              { text: 'Function', max: 100 }
+            ],
+            center: ['25%', '40%'],
+            radius: 80
+          },
+          {
+            indicator: [
+              { text: 'Look', max: 100 },
+              { text: 'Photo', max: 100 },
+              { text: 'System', max: 100 },
+              { text: 'Performance', max: 100 },
+              { text: 'Screen', max: 100 }
+            ],
+            radius: 80,
+            center: ['50%', '60%']
+          },
+          {
+            indicator: (function () {
+              var res = [];
+              for (var i = 1; i <= 12; i++) {
+                res.push({ text: i + '月', max: 100 });
+              }
+              return res;
+            })(),
+            center: ['75%', '40%'],
+            radius: 80
+          }
+        ],
+        series: [
+          {
+            type: 'radar',
+            tooltip: {
+              trigger: 'item'
+            },
+            areaStyle: {},
+            data: [
+              {
+                value: [60, 73, 85, 40],
+                name: 'A Software'
+              }
+            ]
+          },
+          {
+            type: 'radar',
+            radarIndex: 1,
+            areaStyle: {},
+            data: [
+              {
+                value: [85, 90, 90, 95, 95],
+                name: 'A Phone'
+              },
+              {
+                value: [95, 80, 95, 90, 93],
+                name: 'Another Phone'
+              }
+            ]
+          },
+          {
+            type: 'radar',
+            radarIndex: 2,
+            areaStyle: {},
+            data: [
+              {
+                name: 'Precipitation',
+                value: [
+                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
+                ]
+              },
+              {
+                name: 'Evaporation',
+                value: [
+                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.lei);
+    this.option&&this.myChart.setOption(this.option);
+  }
+}
+</script>
+
+<style scoped>
+.bac{
+  background-color: white;
+  width: 300px;
+}
+</style>

+ 248 - 0
src/views/app_beam_tube_inspection/picture/shuru.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 230px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+              "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "8%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1700,
+            min:1200,
+            boundaryGap: [0, "100%"],
+            // name: this.unit,
+            name:"单位(KW)",
+            nameTextStyle: {
+              color: "#fff",
+              nameLocation: "start",
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+          },
+        ],
+        title: {
+          text: this.title,
+          // left: 100,
+          // top: 10,
+          padding: [15, 243],
+          // x:'center',
+          // y:'top',
+          // textAlign:'center',
+          margin:0,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 22,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 102, 102,.3)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 102, 102, 0)",
+                      },
+                    ],
+                    false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+
+            tooltip: {
+              show: true,
+            },
+            data: [1300, 1400, 1200, 1700, 1500],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+
+    var first = 1;
+    if(first){
+      var xData=[];
+      var data1 = [];
+      for (let i = 0; i < 5; i++) {
+        let now =new Date();
+        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000);
+        data1.push(this.getRandomNumWithDecimals(1200, 1700));
+      }
+      first = 0;
+    }
+
+    let interval = setInterval(() => {
+      let temp = [];
+      // for (let i = 0; i < 5; i++) {
+      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
+      // }
+      xData.shift();
+      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+      data1.shift();
+      data1.push(this.getRandomNumWithDecimals(1200, 1700));
+      this.myChart.setOption({
+        xAxis:[{
+          data:xData
+        }],
+        series: [
+          {
+            data: data1,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

+ 244 - 0
src/views/app_beam_tube_inspection/picture/xiaolv.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 230px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+              "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "8%",
+          bottom: "1%",
+          containLabel: true,
+
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1,
+            min:0.9,
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+          },
+        ],
+        title: {
+          text: this.title,
+          // left: 100,
+          // top: 10,
+          padding: [15, 264],
+          // x:'center',
+          // y:'top',
+          // textAlign:'center',
+          margin:0,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 22,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "rgba(255, 102, 102,.3)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255, 102, 102, 0)",
+                      },
+                    ],
+                    false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+
+            tooltip: {
+              show: true,
+            },
+            data: [0.92, 0.91, 0.95, 0.96, 0.94],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+
+    var first = 1;
+    if(first){
+      var xData=[];
+      var data1 = [];
+      for (let i = 0; i < 5; i++) {
+        let now =new Date();
+        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+        now = new Date(+now - 2000);
+        data1.push(this.getRandomNumWithDecimals(0.9, 1));
+      }
+      first = 0;
+    }
+
+    let interval = setInterval(() => {
+      let temp = [];
+      // for (let i = 0; i < 5; i++) {
+      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
+      // }
+      xData.shift();
+      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+      data1.shift();
+      data1.push(this.getRandomNumWithDecimals(0.9, 1));
+      this.myChart.setOption({
+        xAxis:[{
+          data:xData
+        }],
+        series: [
+          {
+            data: data1,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

+ 49 - 0
src/views/app_beam_tube_inspection/test.vue

@@ -0,0 +1,49 @@
+<template>
+  <data-board title="1号压风机"></data-board>
+<!--  <qu-tu title="工作区蓄水性"></qu-tu>-->
+</template>
+
+<script>
+import systemData from "@/views/compressed/systemData";
+import dataStandard from "@/views/compressed/dataStandard/dataStandard";
+
+
+import dataBoard from "@/views/app_beam_tube_inspection/dataBoardtest";
+// import dataBoard from "@/views/app_beam_tube_inspection/dataBoard";
+
+import configImg from "@/views/compressed/configImg/configImg";
+
+// import waterStorage from "@/views/mining/envTest/waterStorage";
+import quTu from "@/views/app_beam_tube_inspection/waterStorage";
+export default {
+  name: "compressed",
+  data() {
+    return {
+      //activeName: "third",
+      activeName: '1'
+    };
+  },
+  methods: {
+    handleClick(tab, event) {},
+  },
+   mounted() {
+    this.$bus.$on("changeCompressedId", (val) => {
+      console.log(val);
+      this.activeName = val;
+    });
+    this.$once("hook:beforeDestroy", () => {
+      this.$bus.$off("changeCompressedId");
+    });
+  },
+  components: {
+    dataStandard,
+    dataBoard,
+    configImg,
+    systemData,
+    quTu,
+  },
+};
+</script>
+
+
+

+ 177 - 0
src/views/app_beam_tube_inspection/waterStorage.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div ref="testLine" style="width: 600px; height: 200px"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ */
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}:${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            max:1,
+            min:0,
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["2022-08-11", "2022-08-11", "2022-08-11", "2022-08-11", "2022-08-11"],
+          },
+        ],
+        title: {
+          text: this.title,
+          left: 100,
+          top: 10,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 18,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            tooltip: {
+              show: true,
+            },
+            data: [0.4, 0.5, 0.2, 0.1, 0.7],       //初始数据
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    let interval = setInterval(() => {
+      let temp = [];
+      for (let i = 0; i < 5; i++) {
+        console.log("@@@", this.getRandomNumWithDecimals(0, 1));
+        temp.push(this.getRandomNumWithDecimals(0, 1));
+      }
+      this.myChart.setOption({
+        series: [
+          {
+            data: temp,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>