|
|
@@ -1,737 +1,793 @@
|
|
|
<template>
|
|
|
- <view class="vent-detail">
|
|
|
- <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
|
|
|
- <view class="vent-content">
|
|
|
- <view class="top-area">
|
|
|
- <view class="top-title">
|
|
|
- <view style="font-weight: bold;">{{ mainTitle || '--' }}</view>
|
|
|
- <view class="title-icon">
|
|
|
- <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" />
|
|
|
- <text class="icon-text">低风险</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="top-card">
|
|
|
- <view class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
- <view class="box-item">
|
|
|
- <view class="box-val">{{ item.value }}</view>
|
|
|
- <view class="box-name">{{ item.name }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="top-card1">
|
|
|
- <view class="card-box" v-for="(item, index) in cardList1" :key="index">
|
|
|
- <view class="box-item">
|
|
|
- <view class="box-val">{{ item.value }}</view>
|
|
|
- <view class="box-name">{{ item.name }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="center-area">
|
|
|
- <view class="top-title">
|
|
|
- <view style="font-weight: bold;">通风信息状态监测</view>
|
|
|
- </view>
|
|
|
- <view class="echartBox">
|
|
|
- <canvas id="myChart" :style="{ width: '100%', height: '180px' }"></canvas>
|
|
|
- </view>
|
|
|
+ <view class="vent-detail">
|
|
|
+ <u-tabs
|
|
|
+ class="devic-box-tab"
|
|
|
+ :current="PageCur"
|
|
|
+ :list="tabList"
|
|
|
+ @click="NavChange"
|
|
|
+ ></u-tabs>
|
|
|
+ <view class="vent-content">
|
|
|
+ <view class="top-area">
|
|
|
+ <view class="top-title">
|
|
|
+ <view style="font-weight: bold">{{ mainTitle || "--" }}</view>
|
|
|
+ <view class="title-icon">
|
|
|
+ <image
|
|
|
+ src="/static/model/alarmTrue.svg"
|
|
|
+ alt=""
|
|
|
+ class="icon-style"
|
|
|
+ />
|
|
|
+ <text class="icon-text">低风险</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-card">
|
|
|
+ <view class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
+ <view class="box-item">
|
|
|
+ <view class="box-val">{{ item.value }}</view>
|
|
|
+ <view class="box-name">{{ item.name }}</view>
|
|
|
</view>
|
|
|
- <view class="bot-area">
|
|
|
- <view class="top-title">
|
|
|
- <view style="font-weight: bold;">通风监控测点信息</view>
|
|
|
- </view>
|
|
|
- <view class="bot-content">
|
|
|
- <view class="card-b" v-for="(item, index) in cardListTf" :key="index">
|
|
|
- <div class="item-l">
|
|
|
- <div class="label-l">{{ item.label }}</div>
|
|
|
- <div class="value-l">{{ item.value }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-r">
|
|
|
- <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
|
|
|
- <span>{{ `${items.label} : ` }}</span>
|
|
|
- <span :class="{
|
|
|
- 'status-f': items.value == 1,
|
|
|
- 'status-l': items.value == 0,
|
|
|
- }">{{ `${items.value}${items.dw}` }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-card1">
|
|
|
+ <view
|
|
|
+ class="card-box"
|
|
|
+ v-for="(item, index) in cardList1"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="box-item">
|
|
|
+ <view class="box-val">{{ item.value }}</view>
|
|
|
+ <view class="box-name">{{ item.name }}</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="center-area">
|
|
|
+ <view class="top-title">
|
|
|
+ <view style="font-weight: bold">通风信息状态监测</view>
|
|
|
+ </view>
|
|
|
+ <view class="echartBox">
|
|
|
+ <canvas
|
|
|
+ id="myChart"
|
|
|
+ :style="{ width: '100%', height: '180px' }"
|
|
|
+ ></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bot-area">
|
|
|
+ <view class="top-title">
|
|
|
+ <view style="font-weight: bold">通风监控测点信息</view>
|
|
|
</view>
|
|
|
+ <view class="bot-content">
|
|
|
+ <view class="card-b" v-for="(item, index) in cardListTf" :key="index">
|
|
|
+ <div class="item-l">
|
|
|
+ <div class="label-l">{{ item.label }}</div>
|
|
|
+ <div class="value-l">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-r">
|
|
|
+ <div
|
|
|
+ class="content-r"
|
|
|
+ v-for="(items, ind) in item.listR"
|
|
|
+ :key="ind"
|
|
|
+ >
|
|
|
+ <span>{{ `${items.label} : ` }}</span>
|
|
|
+ <span
|
|
|
+ :class="{
|
|
|
+ 'status-f': items.value == 1,
|
|
|
+ 'status-l': items.value == 0,
|
|
|
+ }"
|
|
|
+ >{{ `${items.value}${items.dw}` }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import api from "@/api/api";
|
|
|
export default {
|
|
|
- name: 'ventDetail',
|
|
|
- props: {},
|
|
|
- watch: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- mainTitle: '',
|
|
|
- myChart: null,
|
|
|
- timer: '',
|
|
|
- PageCur: "0",
|
|
|
- tabList: [],
|
|
|
- cardList: [
|
|
|
- { name: '进风量(m³/min)', value: 0 },
|
|
|
- { name: '回风量(m³/min)', value: 0 },
|
|
|
- { name: '需风量(m³/min)', value: 0 },
|
|
|
- ],
|
|
|
- cardList1: [
|
|
|
- { name: 'O₂(%)', value: 0 },
|
|
|
- { name: 'CO(%)', value: 0 },
|
|
|
- ],
|
|
|
- //echarts图表数据
|
|
|
- maxY: 0,
|
|
|
- xData: [],
|
|
|
- yDataJ: [],
|
|
|
- yDataH: [],
|
|
|
- yDataX: [],
|
|
|
- cardListTf: [],
|
|
|
- };
|
|
|
+ name: "ventDetail",
|
|
|
+ props: {},
|
|
|
+ watch: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mainTitle: "",
|
|
|
+ myChart: null,
|
|
|
+ timer: "",
|
|
|
+ PageCur: "0",
|
|
|
+ tabList: [],
|
|
|
+ cardList: [
|
|
|
+ { name: "进风量(m³/min)", value: 0 },
|
|
|
+ { name: "回风量(m³/min)", value: 0 },
|
|
|
+ { name: "需风量(m³/min)", value: 0 },
|
|
|
+ ],
|
|
|
+ cardList1: [
|
|
|
+ { name: "O₂(%)", value: 0 },
|
|
|
+ { name: "CO(%)", value: 0 },
|
|
|
+ ],
|
|
|
+ //echarts图表数据
|
|
|
+ maxY: 0,
|
|
|
+ xData: [],
|
|
|
+ yDataJ: [],
|
|
|
+ yDataH: [],
|
|
|
+ yDataX: [],
|
|
|
+ cardListTf: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getTabList();
|
|
|
+ // than.initChart();
|
|
|
+ this.getWindDeviceList();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.myChart.clear();
|
|
|
+ this.myChart.dispose();
|
|
|
+ this.timer = null;
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ NavChange: function (item) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ this.PageCur = item.index;
|
|
|
+ this.mainTitle = this.tabList[this.PageCur].name;
|
|
|
+ this.getMonitor(this.tabList[this.PageCur].deviceID, true);
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getTabList()
|
|
|
- // than.initChart();
|
|
|
- this.getWindDeviceList()
|
|
|
+ getMonitor(deviceID, flag) {
|
|
|
+ let than = this;
|
|
|
+ than.timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await than.getSysWarnList(deviceID, "vent");
|
|
|
+ if (than.timer) {
|
|
|
+ than.timer = null;
|
|
|
+ }
|
|
|
+ than.getMonitor(deviceID);
|
|
|
+ },
|
|
|
+ flag ? 0 : 3000
|
|
|
+ );
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- this.myChart.clear()
|
|
|
- this.myChart.dispose()
|
|
|
- this.timer = null
|
|
|
- clearTimeout(this.timer)
|
|
|
+ //获取顶部tab选项数据
|
|
|
+ getTabList() {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ api
|
|
|
+ .sysTypeWarn({ type: "vent" })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code == 200 && response.data.result.length != 0) {
|
|
|
+ let result = response.data.result;
|
|
|
+ this.tabList = result.map((el) => {
|
|
|
+ //lxh
|
|
|
+ return {
|
|
|
+ name: el.deviceName,
|
|
|
+ warn: "低风险",
|
|
|
+ deviceID: el.deviceID,
|
|
|
+ strtype: el.deviceType,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.mainTitle = this.tabList[0].name;
|
|
|
+ this.getMonitor(this.tabList[0].deviceID, true);
|
|
|
+ } else {
|
|
|
+ reject(response);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log("catch===>response", response);
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- NavChange: function (item) {
|
|
|
- clearTimeout(this.timer)
|
|
|
- this.PageCur = item.index;
|
|
|
- this.mainTitle = this.tabList[this.PageCur].name
|
|
|
- this.getMonitor(this.tabList[this.PageCur].deviceID, true);
|
|
|
- },
|
|
|
- getMonitor(deviceID, flag) {
|
|
|
- let than = this
|
|
|
- than.timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await than.getSysWarnList(deviceID, 'vent');
|
|
|
- if (than.timer) {
|
|
|
- than.timer = null;
|
|
|
- }
|
|
|
- than.getMonitor(deviceID);
|
|
|
- },
|
|
|
- flag ? 0 : 3000
|
|
|
- );
|
|
|
+ formatRoundNum(num) {
|
|
|
+ let interger = Math.ceil(num);
|
|
|
+ let leng = String(interger).length;
|
|
|
+ return (
|
|
|
+ Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //初始化echarts实例
|
|
|
+ initChart() {
|
|
|
+ let canvas = document.getElementById("myChart");
|
|
|
+ this.myChart = this.$echarts.init(canvas);
|
|
|
+ let option = {
|
|
|
+ grid: {
|
|
|
+ top: "24%",
|
|
|
+ left: "0%",
|
|
|
+ bottom: "6%",
|
|
|
+ right: "2%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- //获取顶部tab选项数据
|
|
|
- getTabList() {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- api
|
|
|
- .sysTypeWarn({ type: 'vent' })
|
|
|
- .then((response) => {
|
|
|
- if (response.data.code == 200 && response.data.result.length != 0) {
|
|
|
- let result = response.data.result
|
|
|
- this.tabList = result.map((el) => {//lxh
|
|
|
- return {
|
|
|
- name: el.deviceName,
|
|
|
- warn: '低风险',
|
|
|
- deviceID: el.deviceID,
|
|
|
- strtype: el.deviceType,
|
|
|
- };
|
|
|
- });
|
|
|
- this.mainTitle = this.tabList[0].name
|
|
|
- this.getMonitor(this.tabList[0].deviceID, true);
|
|
|
- } else {
|
|
|
- reject(response);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log("catch===>response", response);
|
|
|
- reject(error);
|
|
|
- });
|
|
|
- });
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ backgroundColor: "rgba(0, 0, 0, .6)",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
},
|
|
|
- formatRoundNum(num) {
|
|
|
- let interger = Math.ceil(num)
|
|
|
- let leng = String(interger).length
|
|
|
- return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
|
|
|
+ legend: {
|
|
|
+ // align: 'center',
|
|
|
+ right: "0%",
|
|
|
+ top: "0%",
|
|
|
+ type: "plain",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0eb4fc",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ // icon:'rect',
|
|
|
+ itemGap: 25,
|
|
|
+ itemWidth: 20,
|
|
|
+ icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "进风量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "回风量",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: "需风量",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- //初始化echarts实例
|
|
|
- initChart() {
|
|
|
- let canvas = document.getElementById('myChart');
|
|
|
- this.myChart = this.$echarts.init(canvas)
|
|
|
- let option = {
|
|
|
- grid: {
|
|
|
- top: '24%',
|
|
|
- left: '0%',
|
|
|
- bottom: '6%',
|
|
|
- right: '2%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- legend: {
|
|
|
- // align: 'center',
|
|
|
- right: '0%',
|
|
|
- top: '0%',
|
|
|
- type: 'plain',
|
|
|
- textStyle: {
|
|
|
- color: '#0eb4fc',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- // icon:'rect',
|
|
|
- itemGap: 25,
|
|
|
- itemWidth: 20,
|
|
|
- icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: '进风量',
|
|
|
- },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ // formatter: '{value}',
|
|
|
+ fontSize: 12,
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: "#b3b8cc",
|
|
|
+ },
|
|
|
+ // formatter: function (params) {
|
|
|
+ // let newParamsName = ref('') // 最终拼接成的字符串
|
|
|
+ // let paramsNameNumber = ref(params.length) // 实际标签的个数
|
|
|
+ // let provideNumber = ref(10) // 每行能显示的字的个数
|
|
|
+ // let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
|
|
|
+ // /**
|
|
|
+ // * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
+ // */
|
|
|
+ // // 条件等同于rowNumber>1
|
|
|
+ // if (paramsNameNumber.value > provideNumber.value) {
|
|
|
+ // /** 循环每一行,p表示行 */
|
|
|
+ // for (var p = 0; p < rowNumber; p++) {
|
|
|
+ // var tempStr = '' // 表示每一次截取的字符串
|
|
|
+ // var start = p * provideNumber.value // 开始截取的位置
|
|
|
+ // var end = start + provideNumber.value // 结束截取的位置
|
|
|
+ // // 此处特殊处理最后一行的索引值
|
|
|
+ // if (p == rowNumber - 1) {
|
|
|
+ // // 最后一次不换行
|
|
|
+ // tempStr = params.substring(start, paramsNameNumber.value)
|
|
|
+ // } else {
|
|
|
+ // // 每一次拼接字符串并换行
|
|
|
+ // tempStr = params.substring(start, end) + '\n'
|
|
|
+ // }
|
|
|
+ // newParamsName.value += tempStr // 最终拼成的字符串
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // // 将旧标签的值赋给新标签
|
|
|
+ // newParamsName.value = params
|
|
|
+ // }
|
|
|
+ // //将最终的字符串返回
|
|
|
+ // return newParamsName.value
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f1f5f6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: this.xData || [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ boundaryGap: false,
|
|
|
+ type: "value",
|
|
|
+ max: this.maxY,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#b3b8cc",
|
|
|
+ },
|
|
|
+ formatter: "{value}",
|
|
|
+ },
|
|
|
+ name: "(m³/min)",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#b3b8cc",
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 0,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f1f5f6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f1f5f6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ boundaryGap: false,
|
|
|
+ type: "value",
|
|
|
+ max: this.maxY,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#b3b8cc",
|
|
|
+ },
|
|
|
+ formatter: "{value}",
|
|
|
+ },
|
|
|
+ name: "(m³/min)",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f1f5f6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f1f5f6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "进风量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: true,
|
|
|
+ symbolSize: 8,
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#19a3df",
|
|
|
+ borderColor: "#a3c8d8",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: "#19a3df",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: this.yDataJ || [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "回风量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: true,
|
|
|
+ symbolSize: 8,
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4fffad",
|
|
|
+ borderColor: "#a3c8d8",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: "#4fffad",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: this.yDataH || [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "需风量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: true,
|
|
|
+ symbolSize: 8,
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#fc8452",
|
|
|
+ borderColor: "#a3c8d8",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: "#fc8452",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data: this.yDataX || [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取选项详情数据
|
|
|
+ getSysWarnList(id, type) {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ api
|
|
|
+ .sysWarn({ sysid: id, type: type })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code == 200) {
|
|
|
+ this.xData = [];
|
|
|
+ this.yDataH = [];
|
|
|
+ this.yDataJ = [];
|
|
|
+ this.yDataX = [];
|
|
|
+ let data = response.data.result;
|
|
|
+ this.cardList[0].value = data.jin || "--";
|
|
|
+ this.cardList[1].value = data.hui || "--";
|
|
|
+ this.cardList[2].value = data.xufengliang || "--";
|
|
|
+ if (data.history.length != 0) {
|
|
|
+ data.history.forEach((v) => {
|
|
|
+ //lxh
|
|
|
+ this.yDataJ.push(parseFloat(v.jin));
|
|
|
+ this.yDataH.push(parseFloat(v.hui));
|
|
|
+ if (
|
|
|
+ this.cardList[2].value &&
|
|
|
+ this.cardList[2].value != "--"
|
|
|
+ ) {
|
|
|
+ this.yDataX.push(this.cardList[2].value);
|
|
|
+ } else {
|
|
|
+ this.yDataX.push(0);
|
|
|
+ }
|
|
|
+ this.xData.push(v.time);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let max1 = this.yDataJ.reduce((acr, cur) => {
|
|
|
+ return acr > cur ? acr : cur;
|
|
|
+ });
|
|
|
+ let max2 = this.yDataH.reduce((acr1, cur1) => {
|
|
|
+ return acr1 > cur1 ? acr1 : cur1;
|
|
|
+ });
|
|
|
+ this.maxY =
|
|
|
+ max1 >= max2
|
|
|
+ ? this.formatRoundNum(max1 * 1.5)
|
|
|
+ : this.formatRoundNum(max2 * 1.5);
|
|
|
+ this.initChart();
|
|
|
+ } else {
|
|
|
+ reject(response);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log("catch===>response", response);
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取通风监控测点信息
|
|
|
+ getWindDeviceList() {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ api
|
|
|
+ .getDeviceVent({ devicetype: "windrect", pagetype: "normal" })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code == 200) {
|
|
|
+ let data = response.data.result;
|
|
|
+ if (data.msgTxt[0].datalist.length != 0) {
|
|
|
+ let list = data.msgTxt[0].datalist;
|
|
|
+ if (list.length > 0) {
|
|
|
+ this.cardListTf = list.map((el) => {
|
|
|
+ //lxh
|
|
|
+ const readData = el.readData;
|
|
|
+ el = Object.assign(el, readData);
|
|
|
+ return {
|
|
|
+ label: "通信状态",
|
|
|
+ value: el.netStatus == "0" ? "断开" : "连接",
|
|
|
+ listR: [
|
|
|
{
|
|
|
- name: '回风量',
|
|
|
+ id: 0,
|
|
|
+ label: "安装位置",
|
|
|
+ dw: "",
|
|
|
+ value: el.strinstallpos,
|
|
|
},
|
|
|
-
|
|
|
+ { id: 1, label: "风量", dw: "(m³/min)", value: el.m3 },
|
|
|
+ { id: 2, label: "风速", dw: "(m/s)", value: el.va },
|
|
|
+ { id: 4, label: "时间", dw: "", value: el.readTime },
|
|
|
{
|
|
|
- name: '需风量'
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisLabel: {
|
|
|
- // formatter: '{value}',
|
|
|
- fontSize: 12,
|
|
|
- margin: 10,
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- // formatter: function (params) {
|
|
|
- // let newParamsName = ref('') // 最终拼接成的字符串
|
|
|
- // let paramsNameNumber = ref(params.length) // 实际标签的个数
|
|
|
- // let provideNumber = ref(10) // 每行能显示的字的个数
|
|
|
- // let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
|
|
|
- // /**
|
|
|
- // * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
- // */
|
|
|
- // // 条件等同于rowNumber>1
|
|
|
- // if (paramsNameNumber.value > provideNumber.value) {
|
|
|
- // /** 循环每一行,p表示行 */
|
|
|
- // for (var p = 0; p < rowNumber; p++) {
|
|
|
- // var tempStr = '' // 表示每一次截取的字符串
|
|
|
- // var start = p * provideNumber.value // 开始截取的位置
|
|
|
- // var end = start + provideNumber.value // 结束截取的位置
|
|
|
- // // 此处特殊处理最后一行的索引值
|
|
|
- // if (p == rowNumber - 1) {
|
|
|
- // // 最后一次不换行
|
|
|
- // tempStr = params.substring(start, paramsNameNumber.value)
|
|
|
- // } else {
|
|
|
- // // 每一次拼接字符串并换行
|
|
|
- // tempStr = params.substring(start, end) + '\n'
|
|
|
- // }
|
|
|
- // newParamsName.value += tempStr // 最终拼成的字符串
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // // 将旧标签的值赋给新标签
|
|
|
- // newParamsName.value = params
|
|
|
- // }
|
|
|
- // //将最终的字符串返回
|
|
|
- // return newParamsName.value
|
|
|
- // }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#f1f5f6',
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: this.xData || [],
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- boundaryGap: false,
|
|
|
- type: 'value',
|
|
|
- max: this.maxY,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- name: '(m³/min)',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 0,
|
|
|
+ id: 3,
|
|
|
+ label: "是否报警",
|
|
|
+ dw: "",
|
|
|
+ value:
|
|
|
+ el.warnFlag == "0"
|
|
|
+ ? "正常"
|
|
|
+ : el.warnFlag == 1
|
|
|
+ ? "报警"
|
|
|
+ : el.warnFlag == 2
|
|
|
+ ? "断开"
|
|
|
+ : "未监测",
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#f1f5f6',
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#f1f5f6',
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- boundaryGap: false,
|
|
|
- type: 'value',
|
|
|
- max: this.maxY,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- name: '(m³/min)',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 10,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#f1f5f6',
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#f1f5f6',
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '进风量',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- showSymbol: true,
|
|
|
- symbolSize: 8,
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
- color: '#19a3df',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#19a3df',
|
|
|
- },
|
|
|
- },
|
|
|
- data: this.yDataJ || [],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '回风量',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- showSymbol: true,
|
|
|
- symbolSize: 8,
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
- color: '#4fffad',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#4fffad',
|
|
|
- },
|
|
|
- },
|
|
|
- data: this.yDataH || [],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '需风量',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- showSymbol: true,
|
|
|
- symbolSize: 8,
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
- color: '#fc8452',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#fc8452',
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- data: this.yDataX || [],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- this.myChart.setOption(option)
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- this.myChart.resize()
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- //获取选项详情数据
|
|
|
- getSysWarnList(id, type) {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- api
|
|
|
- .sysWarn({ sysid: id, type: type })
|
|
|
- .then((response) => {
|
|
|
- if (response.data.code == 200) {
|
|
|
- this.xData = []
|
|
|
- this.yDataH = []
|
|
|
- this.yDataJ = []
|
|
|
- this.yDataX = []
|
|
|
- let data = response.data.result
|
|
|
- this.cardList[0].value = data.jin || '--'
|
|
|
- this.cardList[1].value = data.hui || '--'
|
|
|
- this.cardList[2].value = data.xufengliang || '--'
|
|
|
- if (data.history.length != 0) {
|
|
|
- data.history.forEach((v) => {//lxh
|
|
|
- this.yDataJ.push(parseFloat(v.jin));
|
|
|
- this.yDataH.push(parseFloat(v.hui));
|
|
|
- if (this.cardList[2].value && this.cardList[2].value != '--') {
|
|
|
- this.yDataX.push(this.cardList[2].value);
|
|
|
- } else {
|
|
|
- this.yDataX.push(0);
|
|
|
- }
|
|
|
- this.xData.push(v.time);
|
|
|
- });
|
|
|
- }
|
|
|
- let max1 = this.yDataJ.reduce((acr, cur) => {
|
|
|
- return acr > cur ? acr : cur
|
|
|
- })
|
|
|
- let max2 = this.yDataH.reduce((acr1, cur1) => {
|
|
|
- return acr1 > cur1 ? acr1 : cur1
|
|
|
- })
|
|
|
- this.maxY = max1 >= max2 ? this.formatRoundNum(max1 * 1.5) : this.formatRoundNum(max2 * 1.5)
|
|
|
- this.initChart()
|
|
|
- } else {
|
|
|
- reject(response);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log("catch===>response", response);
|
|
|
- reject(error);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- //获取通风监控测点信息
|
|
|
- getWindDeviceList() {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- api
|
|
|
- .getDeviceVent({ devicetype: 'windrect', pagetype: 'normal' })
|
|
|
- .then((response) => {
|
|
|
- if (response.data.code == 200) {
|
|
|
- let data = response.data.result
|
|
|
- if (data.msgTxt[0].datalist.length != 0) {
|
|
|
- let list = data.msgTxt[0].datalist;
|
|
|
- if (list.length > 0) {
|
|
|
- this.cardListTf = list.map((el) => {//lxh
|
|
|
- const readData = el.readData;
|
|
|
- el = Object.assign(el, readData);
|
|
|
- return {
|
|
|
- label: '通信状态',
|
|
|
- value: el.netStatus == '0' ? '断开' : '连接',
|
|
|
- listR: [
|
|
|
- { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
|
|
|
- { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
|
|
|
- { id: 2, label: '风速', dw: '(m/s)', value: el.va },
|
|
|
- { id: 4, label: '时间', dw: '', value: el.readTime },
|
|
|
- { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
|
|
|
- ],
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- reject(response);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log("catch===>response", response);
|
|
|
- reject(error);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ reject(response);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log("catch===>response", response);
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- computed: {},
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.vent-detail {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .devic-box-tab {
|
|
|
- padding: 0px 10px !important;
|
|
|
- }
|
|
|
+ .devic-box-tab {
|
|
|
+ padding: 0px 10px !important;
|
|
|
+ }
|
|
|
|
|
|
- .vent-content {
|
|
|
- height: 704px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
+ .vent-content {
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 2px;
|
|
|
+
|
|
|
+ .top-card {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ width: 32%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- .top-area {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFF;
|
|
|
- margin-bottom: 2px;
|
|
|
-
|
|
|
- .top-card {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .card-box {
|
|
|
- width: 32%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
|
|
|
+ .card-box:nth-child(1) .box-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 15px;
|
|
|
+ background: url("/static/jinfeng.png") no-repeat center;
|
|
|
+ background-size: 75% 70%;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .card-box:nth-child(2) .box-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 15px;
|
|
|
+ background: url("/static/huifeng.png") no-repeat center;
|
|
|
+ background-size: 75% 70%;
|
|
|
+ }
|
|
|
|
|
|
- .card-box:nth-child(1) .box-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 15px;
|
|
|
- background: url('/static/jinfeng.png') no-repeat center;
|
|
|
- background-size: 75% 70%;
|
|
|
- }
|
|
|
+ .card-box:nth-child(3) .box-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 15px;
|
|
|
+ background: url("/static/xufeng.png") no-repeat center;
|
|
|
+ background-size: 75% 70%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-card1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ width: 49%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- .card-box:nth-child(2) .box-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 15px;
|
|
|
- background: url('/static/huifeng.png') no-repeat center;
|
|
|
- background-size: 75% 70%;
|
|
|
- }
|
|
|
+ .card-box:nth-child(1) .box-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 15px;
|
|
|
+ background: url("/static/O₂.png") no-repeat right;
|
|
|
+ background-size: 40% 80%;
|
|
|
+ }
|
|
|
|
|
|
- .card-box:nth-child(3) .box-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 15px;
|
|
|
- background: url('/static/xufeng.png') no-repeat center;
|
|
|
- background-size: 75% 70%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .card-box:nth-child(2) .box-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 15px;
|
|
|
+ background: url("/static/CO.png") no-repeat right;
|
|
|
+ background-size: 40% 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .top-card1 {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .center-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 220px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
|
|
|
- .card-box {
|
|
|
- width: 49%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
|
|
|
+ .bot-area {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 2px;
|
|
|
|
|
|
- }
|
|
|
+ .bot-content {
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .card-box:nth-child(1) .box-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 15px;
|
|
|
- background: url('/static/O₂.png') no-repeat right;
|
|
|
- background-size: 40% 80%;
|
|
|
- }
|
|
|
+ .card-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ background: url("/static/bot-area.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .label-l {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .card-box:nth-child(2) .box-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 15px;
|
|
|
- background: url('/static/CO.png') no-repeat right;
|
|
|
- background-size: 40% 80%;
|
|
|
- }
|
|
|
+ .value-l {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ color: #0eb4fc;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .item-r {
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .center-area {
|
|
|
- width: 100%;
|
|
|
- height: 220px;
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFF;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
+ .content-r {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .bot-area {
|
|
|
- width: 100%;
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFF;
|
|
|
- margin-bottom: 2px;
|
|
|
-
|
|
|
- .bot-content {
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .card-b {
|
|
|
- width: 100%;
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 5px;
|
|
|
- margin-bottom: 5px;
|
|
|
- background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
|
|
|
-
|
|
|
-
|
|
|
- .item-l {
|
|
|
- position: relative;
|
|
|
- width: 80px;
|
|
|
- height: 100%;
|
|
|
- background: url('/static/bot-area.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .label-l {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 7px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- color: #0eb4fc;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-r {
|
|
|
- width: calc(100% - 100px);
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- /* 不换行 */
|
|
|
- /* 超出部分隐藏 */
|
|
|
- text-overflow: ellipsis;
|
|
|
- /* 使用省略符号 */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .top-title {
|
|
|
- height: 28px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .title-icon {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 90px;
|
|
|
- height: 28px;
|
|
|
- padding: 0px 10px;
|
|
|
- border-radius: 5px;
|
|
|
- background: #d4ecff;
|
|
|
-
|
|
|
- .icon-text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- color: #0eb4fc;
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 不换行 */
|
|
|
+ /* 超出部分隐藏 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 使用省略符号 */
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .box-item .box-val {
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- color: #0eb4fc;
|
|
|
- font-weight: bold;
|
|
|
+ .top-title {
|
|
|
+ height: 28px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 90px;
|
|
|
+ height: 28px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #d4ecff;
|
|
|
+
|
|
|
+ .icon-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0eb4fc;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .box-item .box-name {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .box-item .box-val {
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #0eb4fc;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .icon-style {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
+ .box-item .box-name {
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
+ .icon-style {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
