odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 新增echarts(折线图)下方滚动条型缩放组件

Browse Source
This commit is contained in:
odjbin
2024-02-27 16:59:15 +08:00
parent bc3e7ddaea
commit 2a8cb0d389
5 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/styles/index.scss
View File

@@ -295,25 +295,25 @@ body,
#container {
flex: 1;
height: 1160px;
height: 1200px;
//width: 1300px;
}
#containerFan {
flex: 1;
height: 1160px;
height: 1200px;
//width: 1300px;
}
#containerBad {
flex: 1;
height: 1160px;
height: 1200px;
//width: 1300px;
}
#containerWind {
flex: 1;
height: 1160px;
height: 1200px;
//width: 1300px;
}
#containerWindDirection {

14
src/components/content/airInfo/AirInfo.vue
View File

@@ -200,7 +200,7 @@ const initChart = (type, values) => {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
bottom: 170, // 底边距
containLabel: true,
},
//提示框组件
@@ -233,7 +233,17 @@ const initChart = (type, values) => {
},
dataZoom: [{
type: 'inside'
}],
},
{
type: 'slider',
top: 1050,
height: 100,
textStyle: {
fontSize: 45,
color: '#fffff'
}
}
],
//X轴
xAxis: {
type: 'category',

14
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -181,7 +181,7 @@ const initChart = (type, values) => {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
bottom: 170, // 底边距
containLabel: true,
},
//提示框组件
@@ -218,7 +218,17 @@ const initChart = (type, values) => {
},
dataZoom: [{
type: 'inside'
}],
},
{
type: 'slider',
top: 1050,
height: 100,
textStyle: {
fontSize: 45,
color: '#fffff'
}
}
],
//X轴
xAxis: {
type: "category",

55
src/components/content/fanInfo/FanInfo.vue
View File

@@ -55,16 +55,18 @@
<!-- 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}">
<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>-->
<!-- <span v-if="item.showTooltip">-->
<!-- 正在输入中...-->
<!-- </span>-->
</div>
</div>
@@ -347,7 +349,7 @@ const getBasicData = (data) => {
autoMode: item.autoMode,//自动模式
breakdown: item.breakdown,//故障
running: item.running,//启动,
showTooltip:false,
showTooltip: false,
frequencyFeedback: item.frequencyFeedback,
frequencySetting: item.frequencySetting
}
@@ -506,7 +508,7 @@ const initChart = (type, valueA, valueB, valueC) => {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
bottom: 170, // 底边距
containLabel: true,
},
//提示框组件
@@ -528,22 +530,7 @@ const initChart = (type, valueA, valueB, valueC) => {
`;
}
return res
// return content;
},
// formatter: function (params) {
// let content = `
// <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
// <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
// <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
// <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[1].name}</div>
// <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
// <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[2].name}</div>
// <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[2].value}</span></div>
//
// </div>`;
// return content;
// },
},
toolbox: {
show: false,
@@ -555,8 +542,18 @@ const initChart = (type, valueA, valueB, valueC) => {
}
},
dataZoom: [{
type: 'inside'
}],
type: 'inside',
},
{
type: 'slider',
top: 1050,
height: 100,
textStyle: {
fontSize: 45,
color: '#fffff'
}
}
],
//X轴
xAxis: {
type: 'category',
@@ -900,9 +897,11 @@ input[type="number"] {
margin-top: 10px;
display: flex;
flex-direction: column;
.changeMargin{
.changeMargin {
}
> div:first-child {
display: flex;
@@ -910,12 +909,14 @@ input[type="number"] {
white-space: pre;
margin-right: 14px;
}
:deep(.is-focus) {
.el-input__inner {
font-weight: normal!important;
color: #fff!important;
font-weight: normal !important;
color: #fff !important;
}
}
:deep(.el-input__wrapper) {
width: 160px;
height: 44px;

34
src/components/content/windPressure/WindPressureList.vue
View File

@@ -3,7 +3,7 @@
<div class="name">风压</div>
<div v-if="wpList==null||wpList.length===0" class="showNull">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div>
<div v-else class="list">
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
@@ -15,7 +15,7 @@
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<div class="loading"></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
@@ -69,12 +69,12 @@ watch(() => props.winData, (now) => {
getScreenInfo(now.windPressureSensorList)
}, {deep: true});
const getWindInfo = (equipmentId,type='day') => {
const getWindInfo = (equipmentId, type = 'day') => {
isVisited.value = true
showLoading.value=true
getEchartsInfo(equipmentId,type).then(res => {
showLoading.value = true
getEchartsInfo(equipmentId, type).then(res => {
if (res?.code === 1000) {
showLoading.value=false
showLoading.value = false
nextTick(() => {
initChart(res.data.dates, res.data.values)
})
@@ -83,18 +83,18 @@ const getWindInfo = (equipmentId,type='day') => {
}
const handleOpenChart = (item) => {
selectTimeButton.value=2
selectTimeButton.value = 2
getWindInfo(item.equipmentId)
windSort.value = item.equipmentName
windSortId.value = item.equipmentId
}
const timeSelect = (index) => {
if (index === 0) {
getWindInfo(windSortId.value,'years')
getWindInfo(windSortId.value, 'years')
} else if (index === 1) {
getWindInfo(windSortId.value,'month')
getWindInfo(windSortId.value, 'month')
} else if (index === 2) {
getWindInfo(windSortId.value,'day')
getWindInfo(windSortId.value, 'day')
}
};
const getScreenInfo = (now) => {
@@ -136,7 +136,7 @@ const initChart = (type, values) => {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
bottom: 170, // 底边距
containLabel: true,
},
//提示框组件
@@ -169,7 +169,17 @@ const initChart = (type, values) => {
},
dataZoom: [{
type: 'inside'
}],
},
{
type: 'slider',
top: 1050,
height: 100,
textStyle: {
fontSize: 45,
color: '#fffff'
}
}
],
//X轴
xAxis: {
type: 'category',