feat : 新增echarts中指定日期展示及细节优化
This commit is contained in:
@@ -33,6 +33,8 @@
|
||||
<div style="width: 1px;"></div>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
|
||||
<choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@@ -51,7 +53,11 @@ import ItemInfo from "./childComps/ItemInfo.vue";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||||
import * as echarts from 'echarts';
|
||||
import {getEchartsInfo} from "@/api/largeScreen";
|
||||
import ChooseTime from "@/components/ChooseTime/index.vue"
|
||||
import ChooseMonth from "@/components/ChooseMonth/index.vue"
|
||||
|
||||
const dayValue = ref('');
|
||||
const monthValue = ref('');
|
||||
let myEcharts = reactive({});
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
@@ -90,11 +96,18 @@ watch(() => props.airData, (now) => {
|
||||
windSpeed.value = 0
|
||||
}
|
||||
}, {deep: true});
|
||||
|
||||
const getChartInfo = (equipmentId, type = 'day') => {
|
||||
const daySelect = (val) => {
|
||||
dayValue.value = val
|
||||
getChartInfo(openDialogId.value, 'day',val)
|
||||
}
|
||||
const monthSelect = (val) => {
|
||||
monthValue.value = val
|
||||
getChartInfo(openDialogId.value, 'month',val)
|
||||
}
|
||||
const getChartInfo = (equipmentId, type = 'day',time='') => {
|
||||
isWindSpeedVisited.value = true
|
||||
showSpeedLoading.value = true
|
||||
getEchartsInfo(equipmentId, type).then(res => {
|
||||
getEchartsInfo(equipmentId,time, type).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
showSpeedLoading.value = false
|
||||
nextTick(() => {
|
||||
@@ -124,15 +137,20 @@ const handleOpenChart = (id, type) => {
|
||||
getChartInfo(id, 'day')
|
||||
}
|
||||
}
|
||||
|
||||
const timeSelect = (index) => {
|
||||
if (index === 0) {
|
||||
getChartInfo(openDialogId.value, 'years')
|
||||
} else if (index === 1) {
|
||||
getChartInfo(openDialogId.value, 'month')
|
||||
} else if (index === 2) {
|
||||
getChartInfo(openDialogId.value, 'day')
|
||||
const changeDate = (index) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return 'years'
|
||||
case 1:
|
||||
return 'month'
|
||||
case 2:
|
||||
return 'day'
|
||||
}
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
dayValue.value = ''
|
||||
monthValue.value = ''
|
||||
getChartInfo(openDialogId.value, changeDate(index))
|
||||
};
|
||||
|
||||
const changeData = (item) => {
|
||||
@@ -148,8 +166,6 @@ const changeData = (item) => {
|
||||
}
|
||||
const changeIcon = (type) => {
|
||||
switch (type) {
|
||||
case "dust":
|
||||
return 'dust-icon.png';
|
||||
case "oxygen":
|
||||
return 'o2-icon.png';
|
||||
case "temperature":
|
||||
@@ -163,7 +179,7 @@ const getAirInfo = (now) => {
|
||||
let airObj = {}
|
||||
let airArr = []
|
||||
now?.map(item => {
|
||||
if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
|
||||
if (item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
|
||||
airObj = changeData(item)
|
||||
airArr.push(airObj)
|
||||
} else if (item.equipmentType === "windSpeed") {
|
||||
|
||||
@@ -34,6 +34,8 @@
|
||||
<div style="width: 1px"></div>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
|
||||
<choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@@ -52,7 +54,10 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
|
||||
import * as echarts from "echarts";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
|
||||
import {getBadGasEchartsInfo} from "@/api/largeScreen";
|
||||
|
||||
import ChooseTime from "@/components/ChooseTime/index.vue"
|
||||
import ChooseMonth from "@/components/ChooseMonth/index.vue"
|
||||
const dayValue = ref('');
|
||||
const monthValue = ref('');
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
badGasData: Array,
|
||||
@@ -99,14 +104,28 @@ watch(
|
||||
},
|
||||
{deep: true}
|
||||
);
|
||||
const timeSelect = (index) => {
|
||||
if (index === 0) {
|
||||
getBadGasChartInfo('years')
|
||||
} else if (index === 1) {
|
||||
getBadGasChartInfo('month')
|
||||
} else if (index === 2) {
|
||||
getBadGasChartInfo('day')
|
||||
const daySelect = (val) => {
|
||||
dayValue.value = val
|
||||
getBadGasChartInfo('day', val)
|
||||
}
|
||||
const monthSelect = (val) => {
|
||||
monthValue.value = val
|
||||
getBadGasChartInfo('month', val)
|
||||
}
|
||||
const changeDate = (index) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return 'years'
|
||||
case 1:
|
||||
return 'month'
|
||||
case 2:
|
||||
return 'day'
|
||||
}
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
dayValue.value = ''
|
||||
monthValue.value = ''
|
||||
getBadGasChartInfo(changeDate(index))
|
||||
};
|
||||
const getBadGasInfo = (now) => {
|
||||
if (now === null) return;
|
||||
@@ -114,6 +133,7 @@ const getBadGasInfo = (now) => {
|
||||
let windPressureArr = [];
|
||||
now?.map((item) => {
|
||||
if (
|
||||
item.equipmentType === "dust" ||
|
||||
item.equipmentType === "carbonDioxide" ||
|
||||
item.equipmentType === "carbonMonoxide" ||
|
||||
item.equipmentType === "hydrogenSulfide" ||
|
||||
@@ -137,11 +157,11 @@ const changeData = (item) => {
|
||||
unit: item.unit,
|
||||
};
|
||||
};
|
||||
const getBadGasChartInfo = (type) => {
|
||||
const getBadGasChartInfo = (type, time = '') => {
|
||||
isBadGasVisited.value = true
|
||||
showLoading.value = true
|
||||
let id = props.tunnelId
|
||||
getBadGasEchartsInfo(id, type).then(res => {
|
||||
getBadGasEchartsInfo(id, time, type).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
showLoading.value = false
|
||||
nextTick(() => {
|
||||
@@ -232,33 +252,6 @@ const initChart = (type, values) => {
|
||||
//X轴
|
||||
xAxis: {
|
||||
type: "category",
|
||||
// data: [
|
||||
// "00:00",
|
||||
// "01:00",
|
||||
// "02:00",
|
||||
// "03:00",
|
||||
// "04:00",
|
||||
// "05:00",
|
||||
// "06:00",
|
||||
// "07:00",
|
||||
// "08:00",
|
||||
// "09:00",
|
||||
// "10:00",
|
||||
// "11:00",
|
||||
// "12:00",
|
||||
// "13:00",
|
||||
// "14:00",
|
||||
// "15:00",
|
||||
// "16:00",
|
||||
// "17:00",
|
||||
// "18:00",
|
||||
// "19:00",
|
||||
// "20:00",
|
||||
// "21:00",
|
||||
// "22:00",
|
||||
// "23:00",
|
||||
// "24:00",
|
||||
// ],
|
||||
data: type,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
@@ -280,6 +273,19 @@ const initChart = (type, values) => {
|
||||
//配置项
|
||||
series: [
|
||||
{
|
||||
name: "粉尘",
|
||||
// data: [
|
||||
// 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
|
||||
// 69, 25, 31, 49, 81, 63,
|
||||
// ],
|
||||
data: values.dustValues,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},{
|
||||
name: "二氧化碳",
|
||||
// data: [
|
||||
// 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
|
||||
@@ -399,7 +405,7 @@ const initChart = (type, values) => {
|
||||
//height: calc(621px - 45px - 22px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
justify-content: flex-start;
|
||||
padding: 16px 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,11 +122,14 @@ function setPoint() {
|
||||
#gas-info-item {
|
||||
width: 231px;
|
||||
text-align: center;
|
||||
margin-right: 26px;
|
||||
&:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
//旋转定位阈值位于的刻度
|
||||
.point {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
//用伪元素标记阈值
|
||||
|
||||
@@ -5,70 +5,60 @@
|
||||
<div class="loading" v-if="loading===0"></div>
|
||||
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
|
||||
</div>
|
||||
|
||||
<div v-else class="fans">
|
||||
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
|
||||
<div>
|
||||
<!-- echarts -->
|
||||
<div class="echart"></div>
|
||||
<!-- 风机名 -->
|
||||
<div class="fan-name">{{ changeNum(item) }}号风机</div>
|
||||
<!-- 功能 -->
|
||||
<div class="option-nav">
|
||||
<div>
|
||||
<div class="state">
|
||||
<div class="blue-state" :class="{ stopColor: item.breakdown }">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
|
||||
状态:<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
|
||||
<div class="state">
|
||||
<div class="blue-state" :class="{ stopColor: item.breakdown }">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
|
||||
状态:<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<div
|
||||
id="auto"
|
||||
:class="{ active: item.running }"
|
||||
@click="item.running = true;editOperate(item,'启动')"
|
||||
>
|
||||
启动
|
||||
</div>
|
||||
<div class="switch">
|
||||
<div
|
||||
id="auto"
|
||||
:class="{ active: item.running }"
|
||||
@click="item.running = true;editOperate(item,'启动')"
|
||||
>
|
||||
启动
|
||||
</div>
|
||||
<div
|
||||
id="stop"
|
||||
:class="{ active: !item.running }"
|
||||
@click="item.running = false;editOperate(item,'停止')"
|
||||
>
|
||||
停止
|
||||
</div>
|
||||
<div
|
||||
id="stop"
|
||||
:class="{ active: !item.running }"
|
||||
@click="item.running = false;editOperate(item,'停止')"
|
||||
>
|
||||
停止
|
||||
</div>
|
||||
</div>
|
||||
<div class="power">
|
||||
<div class="check-box">
|
||||
<el-radio-group v-model="item.autoMode" @change="changeModel(item)">
|
||||
<el-radio :label="true">自动</el-radio>
|
||||
<el-radio :label="false">手动</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="edit-power" title="输入完成后, 请回车进行修改">
|
||||
<div>
|
||||
<span style="color: white">给定频率</span>
|
||||
<!-- <span class="units"-->
|
||||
<!-- ><input-->
|
||||
<!-- type="number"-->
|
||||
<!-- min="0"-->
|
||||
<!-- v-model="item.frequencySetting"-->
|
||||
<!-- onchange="changeFrequency(item)"-->
|
||||
<!-- :disabled="item.autoMode"-->
|
||||
<!-- /></span>-->
|
||||
<el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
|
||||
title="输入完成后, 请回车进行修改"
|
||||
@change="changeFrequency(item)" @focus="item.showTooltip=true"
|
||||
@blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}">
|
||||
<template #suffix>
|
||||
<span>Hz</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- <span v-if="item.showTooltip">-->
|
||||
<!-- 正在输入中...-->
|
||||
<!-- </span>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="power">
|
||||
<div class="check-box">
|
||||
<el-radio-group v-model="item.autoMode" @change="changeModel(item)">
|
||||
<el-radio :label="true">自动</el-radio>
|
||||
<el-radio :label="false">手动</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="edit-power" title="输入完成后, 请回车进行修改">
|
||||
<span style="color: white">给定频率</span>
|
||||
<!-- <span class="units"-->
|
||||
<!-- ><input-->
|
||||
<!-- type="number"-->
|
||||
<!-- min="0"-->
|
||||
<!-- v-model="item.frequencySetting"-->
|
||||
<!-- onchange="changeFrequency(item)"-->
|
||||
<!-- :disabled="item.autoMode"-->
|
||||
<!-- /></span>-->
|
||||
<el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
|
||||
title="输入完成后, 请回车进行修改" @change="changeFrequency(item)" @focus="item.showTooltip=true"
|
||||
@blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}"
|
||||
@submit="changeFrequency(item)">
|
||||
<template #suffix>
|
||||
<span>Hz</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,6 +97,8 @@
|
||||
<div style="width: 1px;"></div>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
|
||||
<choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@@ -124,6 +116,8 @@
|
||||
import * as echarts from "echarts";
|
||||
import FanInfoItem from "./FanInfoItem.vue";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||||
import ChooseTime from "@/components/ChooseTime/index.vue"
|
||||
import ChooseMonth from "@/components/ChooseMonth/index.vue"
|
||||
import {
|
||||
editFrequency,
|
||||
editFrequencyModelSwitch,
|
||||
@@ -134,6 +128,8 @@ import {ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
const timeList = ref(["年", "月", "日"]);
|
||||
const selectTimeButton = ref(2);
|
||||
const dayValue = ref('');
|
||||
const monthValue = ref('');
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
tunnelId: Number,
|
||||
@@ -206,14 +202,29 @@ watch(() => props.list, (now) => {
|
||||
})
|
||||
handleOnMounted()
|
||||
}, {deep: true});
|
||||
const timeSelect = (index) => {
|
||||
if (index === 0) {
|
||||
getFanInfo(openEquipmentId.value, 'years')
|
||||
} else if (index === 1) {
|
||||
getFanInfo(openEquipmentId.value, 'month')
|
||||
} else if (index === 2) {
|
||||
getFanInfo(openEquipmentId.value, 'day')
|
||||
const daySelect = (val) => {
|
||||
console.log('daySelect')
|
||||
dayValue.value = val
|
||||
getFanInfo(openEquipmentId.value, 'day',val)
|
||||
}
|
||||
const monthSelect = (val) => {
|
||||
monthValue.value = val
|
||||
getFanInfo(openEquipmentId.value, 'month',val)
|
||||
}
|
||||
const changeDate = (index) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return 'years'
|
||||
case 1:
|
||||
return 'month'
|
||||
case 2:
|
||||
return 'day'
|
||||
}
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
dayValue.value = ''
|
||||
monthValue.value = ''
|
||||
getFanInfo(openEquipmentId.value, changeDate(index))
|
||||
};
|
||||
const packageData = (item, type, flag) => {
|
||||
let number = 0
|
||||
@@ -238,49 +249,67 @@ const packageData = (item, type, flag) => {
|
||||
}
|
||||
//启动/停止
|
||||
const editOperate = (item, type) => {
|
||||
ElMessageBox.confirm(`是否${type}该风机?`, '系统提示', {
|
||||
ElMessageBox.confirm(`确认${type}${changeNum(item)}号风机吗?`, '系统提示', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false
|
||||
}).then(() => {
|
||||
const data = packageData(item, item.running)
|
||||
editFrequencyOperationSwitch(data).then(res => {
|
||||
console.log('修改风机启动', res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
item.running = !item.running
|
||||
});
|
||||
}
|
||||
|
||||
const changeFrequency = (item) => {
|
||||
console.log('修改频率')
|
||||
const data = packageData(item, item.frequencySetting, true)
|
||||
editFrequency(data).then(res => {
|
||||
console.log('修改风机频率', res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的频率为${item.frequencySetting}Hz吗?`, '系统提示', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false
|
||||
}).then(() => {
|
||||
const data = packageData(item, item.frequencySetting, true)
|
||||
editFrequency(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
// item.running=!item.running
|
||||
});
|
||||
}
|
||||
const changeModel = (item) => {
|
||||
const data = packageData(item, item.autoMode)
|
||||
editFrequencyModelSwitch(data).then(res => {
|
||||
console.log('修改自动模式', res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
let flag
|
||||
if (item.autoMode) {
|
||||
flag = '自动'
|
||||
} else {
|
||||
flag = '手动'
|
||||
}
|
||||
ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗?`, '系统提示', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false
|
||||
}).then(() => {
|
||||
const data = packageData(item, item.autoMode)
|
||||
editFrequencyModelSwitch(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
item.autoMode = !item.autoMode
|
||||
});
|
||||
}
|
||||
const getFanInfo = (equipmentId, type = 'day') => {
|
||||
const getFanInfo = (equipmentId, type = 'day', time = '') => {
|
||||
isVisited.value = true
|
||||
showLoading.value = true
|
||||
getFanEchartsInfo(equipmentId, type).then(res => {
|
||||
getFanEchartsInfo(equipmentId, time, type).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
showLoading.value = false
|
||||
nextTick(() => {
|
||||
@@ -290,6 +319,7 @@ const getFanInfo = (equipmentId, type = 'day') => {
|
||||
})
|
||||
}
|
||||
const handleOpenChart = (item) => {
|
||||
selectTimeButton.value = 2
|
||||
openEquipmentId.value = item.equipmentId
|
||||
getFanInfo(item.equipmentId, 'day')
|
||||
if (item.equipmentId === 22) {
|
||||
@@ -330,7 +360,6 @@ const getImage = (type) => {
|
||||
}
|
||||
}
|
||||
const changeNum = (item) => {
|
||||
console.log('1号变频器')
|
||||
switch (item.equipmentId) {
|
||||
case 22:
|
||||
return '一';
|
||||
@@ -450,7 +479,7 @@ const handleOnMounted = () => {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: socketData.value[i].frequencySetting,
|
||||
value: socketData.value[i].frequencyFeedback,
|
||||
fontSize: 2100,
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
@@ -543,7 +572,7 @@ const initChart = (type, valueA, valueB, valueC) => {
|
||||
},
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
top: 1050,
|
||||
@@ -809,173 +838,157 @@ input[type="number"] {
|
||||
}
|
||||
|
||||
.option-nav {
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div:first-child {
|
||||
margin-top: 48px;
|
||||
.state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
color: #38cafb;
|
||||
line-height: 35px;
|
||||
gap: 40px;
|
||||
|
||||
.state {
|
||||
flex: 1;
|
||||
.stopColor {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.blue-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
color: #38cafb;
|
||||
line-height: 35px;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
background-color: #3eab3f;
|
||||
padding-left: 10px;
|
||||
border-radius: 8px;
|
||||
margin-left: -5px;
|
||||
|
||||
.stopColor {
|
||||
background-color: red !important;
|
||||
.state-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.blue-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
background-color: #3eab3f;
|
||||
padding-left: 10px;
|
||||
border-radius: 8px;
|
||||
margin-left: -5px;
|
||||
|
||||
.state-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.fan-state {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
width: 165px;
|
||||
height: 45px;
|
||||
border-radius: 22px;
|
||||
border: 2px solid #0f82af;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
color: #127399;
|
||||
line-height: 40px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fan-state {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.power {
|
||||
flex: 1.3;
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
//padding: 0 20px;
|
||||
font-size: 28px;
|
||||
color: #38cafb;
|
||||
line-height: 37px;
|
||||
gap: 40px;
|
||||
width: 165px;
|
||||
height: 45px;
|
||||
border-radius: 22px;
|
||||
border: 2px solid #0f82af;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
color: #127399;
|
||||
line-height: 40px;
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//margin-left: 20px;
|
||||
}
|
||||
|
||||
.edit-power {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.changeMargin {
|
||||
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
|
||||
> span:first-child {
|
||||
white-space: pre;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
:deep(.is-focus) {
|
||||
.el-input__inner {
|
||||
font-weight: normal !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 160px;
|
||||
height: 44px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: 1px solid #38CAFB;
|
||||
transform: none;
|
||||
transition: none;
|
||||
margin-right: 10px;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #38CAFB;
|
||||
}
|
||||
|
||||
|
||||
.el-input__suffix-inner {
|
||||
font-size: 30px;
|
||||
color: #38CAFB;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//.units {
|
||||
// position: relative;
|
||||
//}
|
||||
//
|
||||
//.units::after {
|
||||
// content: "Hz";
|
||||
// position: absolute;
|
||||
// right: 6px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// font-size: 28px;
|
||||
// color: #38cafb;
|
||||
// line-height: 37px;
|
||||
//}
|
||||
//
|
||||
//input {
|
||||
// width: 130px;
|
||||
// height: 44px;
|
||||
// border: 2px solid #0f82af;
|
||||
// background: transparent;
|
||||
// margin-left: 14px;
|
||||
// outline: none;
|
||||
// font-size: 28px;
|
||||
// font-weight: bold;
|
||||
// color: #38cafb;
|
||||
// line-height: 37px;
|
||||
//}
|
||||
& > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.power {
|
||||
flex: 1.3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
//padding: 0 20px;
|
||||
font-size: 28px;
|
||||
color: #38cafb;
|
||||
line-height: 37px;
|
||||
gap: 40px;
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//margin-left: 20px;
|
||||
}
|
||||
|
||||
.edit-power {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
//flex-direction: column;
|
||||
> span:first-child {
|
||||
white-space: pre;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
:deep(.is-focus) {
|
||||
.el-input__inner {
|
||||
font-weight: normal !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 160px;
|
||||
height: 44px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: 1px solid #38CAFB;
|
||||
transform: none;
|
||||
transition: none;
|
||||
margin-right: 10px;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #38CAFB;
|
||||
}
|
||||
|
||||
|
||||
.el-input__suffix-inner {
|
||||
font-size: 30px;
|
||||
color: #38CAFB;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
//.units {
|
||||
// position: relative;
|
||||
//}
|
||||
//
|
||||
//.units::after {
|
||||
// content: "Hz";
|
||||
// position: absolute;
|
||||
// right: 6px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// font-size: 28px;
|
||||
// color: #38cafb;
|
||||
// line-height: 37px;
|
||||
//}
|
||||
//
|
||||
//input {
|
||||
// width: 130px;
|
||||
// height: 44px;
|
||||
// border: 2px solid #0f82af;
|
||||
// background: transparent;
|
||||
// margin-left: 14px;
|
||||
// outline: none;
|
||||
// font-size: 28px;
|
||||
// font-weight: bold;
|
||||
// color: #38cafb;
|
||||
// line-height: 37px;
|
||||
//}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,6 +23,8 @@
|
||||
<div style="width: 1px;"></div>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
|
||||
<choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@@ -41,12 +43,16 @@ import WindPressureItem from "./childComps/WindPressureItem.vue";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||||
import * as echarts from 'echarts';
|
||||
import {getEchartsInfo} from "@/api/largeScreen";
|
||||
import ChooseTime from "@/components/ChooseTime/index.vue"
|
||||
import ChooseMonth from "@/components/ChooseMonth/index.vue"
|
||||
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
winData: Array,
|
||||
loading: Number,
|
||||
});
|
||||
const dayValue = ref('');
|
||||
const monthValue = ref('');
|
||||
const windSort = ref(1)
|
||||
const windSortId = ref(1)
|
||||
const timeList = ref(["年", "月", "日"]);
|
||||
@@ -68,11 +74,18 @@ watch(() => props.list, (now) => {
|
||||
watch(() => props.winData, (now) => {
|
||||
getScreenInfo(now.windPressureSensorList)
|
||||
}, {deep: true});
|
||||
|
||||
const getWindInfo = (equipmentId, type = 'day') => {
|
||||
const daySelect = (val) => {
|
||||
dayValue.value = val
|
||||
getWindInfo(windSortId.value, 'day', val)
|
||||
}
|
||||
const monthSelect = (val) => {
|
||||
monthValue.value = val
|
||||
getWindInfo(windSortId.value, 'month', val)
|
||||
}
|
||||
const getWindInfo = (equipmentId, type = 'day', time = '') => {
|
||||
isVisited.value = true
|
||||
showLoading.value = true
|
||||
getEchartsInfo(equipmentId, type).then(res => {
|
||||
getEchartsInfo(equipmentId, time, type).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
showLoading.value = false
|
||||
nextTick(() => {
|
||||
@@ -88,14 +101,20 @@ const handleOpenChart = (item) => {
|
||||
windSort.value = item.equipmentName
|
||||
windSortId.value = item.equipmentId
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
if (index === 0) {
|
||||
getWindInfo(windSortId.value, 'years')
|
||||
} else if (index === 1) {
|
||||
getWindInfo(windSortId.value, 'month')
|
||||
} else if (index === 2) {
|
||||
getWindInfo(windSortId.value, 'day')
|
||||
const changeDate = (index) => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return 'years'
|
||||
case 1:
|
||||
return 'month'
|
||||
case 2:
|
||||
return 'day'
|
||||
}
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
dayValue.value = ''
|
||||
monthValue.value = ''
|
||||
getWindInfo(windSortId.value, changeDate(index))
|
||||
};
|
||||
const getScreenInfo = (now) => {
|
||||
let windPressureObj = {}
|
||||
|
||||
Reference in New Issue
Block a user