feat : 新增echarts中指定日期展示及细节优化

This commit is contained in:
2024-02-28 18:08:44 +08:00
parent 59aa2a92d1
commit ea4f72780f
19 changed files with 810 additions and 438 deletions

View File

@@ -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") {

View File

@@ -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;
}
}

View File

@@ -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;
}
//用伪元素标记阈值

View File

@@ -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;
//}
}
}
}
}

View File

@@ -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 = {}