Commit 33ccb761 authored by xinzhedeai's avatar xinzhedeai

图表修改 无数据时优化

parent dda2fde5
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" <el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
<div class="h44 f18 flex-text" <div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"> style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 50%;">监测时间</div> <div class="text-center" style="width: 50%;">监测时间</div>
<div class="text-center" style="width: 50%;">温度(°C)</div> <div class="text-center" style="width: 50%;">湿度(%)</div>
</div> </div>
<div class="" style="height: 300px;overflow-y: scroll;"> <div class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item" <div class="h44 color-theme flex-text f17 ovh bg-list-item"
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -185,11 +185,9 @@ ...@@ -185,11 +185,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.changeSensor({ equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
equipNo: this.sensorLIst[0].equipNo })
})
}
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
...@@ -250,12 +248,49 @@ ...@@ -250,12 +248,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(%RH)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(%RH)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -281,7 +316,7 @@ ...@@ -281,7 +316,7 @@
}); });
console.log('this.createTime', this.createTime.join(','))
// 视频列表 // 视频列表
Axiosx.get(host + '/data/sz/imghistory/shi', { Axiosx.get(host + '/data/sz/imghistory/shi', {
params: { params: {
......
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '8' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
...@@ -317,11 +317,49 @@ ...@@ -317,11 +317,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 15, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 40, top: 10, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -380,11 +418,53 @@ ...@@ -380,11 +418,53 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { // yAxis: {
// splitLine: { show: false },
// axisLabel: { textStyle: { color: '#a3e4f5' } }
//},
yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { bottom: 35, top: 15, left: 35, right: 15 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { bottom: 35, top: 10, left: 35, right: 40 },
series: [ series: [
{ {
name: "人数", name: "人数",
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<!-- 通知公告 --> <!-- 通知公告 -->
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
<div class="mineInfo"> <div class="mineInfo">
<p>矿山名称: {{selectedMine.name}}</p> <p>矿山名称: {{selectedMine.name}}</p>
<p>矿山地址:{{selectedMine.address}}</p> <p>矿山地址:{{selectedMine.address}}</p>
...@@ -62,7 +62,8 @@ ...@@ -62,7 +62,8 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
...@@ -127,8 +128,9 @@ ...@@ -127,8 +128,9 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="mt5" id="line" style="width: 100%;height:400px;"></div> <div class="mt5" id="line" style="width: 100%;height:400px;"></div>
...@@ -179,7 +181,7 @@ ...@@ -179,7 +181,7 @@
<!-- 详情内页公用js --> <!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script> <script src="./static/js/public-detail.js"></script>
<script> <script>
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
...@@ -218,7 +220,7 @@ ...@@ -218,7 +220,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -230,9 +232,9 @@ ...@@ -230,9 +232,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { // 如果列表有值,默认取第1个设备的值 this.changeSensor({
this.changeSensor({equipNo: this.sensorLIst[0].equipNo}) equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
...@@ -270,6 +272,13 @@ ...@@ -270,6 +272,13 @@
itemStyle: { itemStyle: {
color: '#6dd1b9' color: '#6dd1b9'
}, },
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: { markLine: {
silent: true, silent: true,
data: [ data: [
...@@ -299,16 +308,55 @@ ...@@ -299,16 +308,55 @@
} }
}, },
xAxis: { xAxis: {
type: 'category',
data: [], data: [],
show: true, // 显示 X 轴
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: true },
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
color: #dbdbdb; color: #dbdbdb;
} }
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange{ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{
background: transparent; background: transparent;
} }
......
...@@ -62,7 +62,7 @@ var gemhoUtil = { ...@@ -62,7 +62,7 @@ var gemhoUtil = {
// 格式化日期为 YYYY-MM-DD HH:mm:ss // 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => { const formatDate = (date) => {
const pad = (num) => String(num).padStart(2, '0'); const pad = (num) => String(num).padStart(2, '0');
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`; return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
}; };
// 生成数组 // 生成数组
......
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" <el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -176,11 +176,9 @@ ...@@ -176,11 +176,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.changeSensor({ equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
equipNo: this.sensorLIst[0].equipNo })
})
}
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" <el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -186,11 +186,9 @@ ...@@ -186,11 +186,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.changeSensor({ equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
equipNo: this.sensorLIst[0].equipNo })
})
}
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
...@@ -258,42 +256,49 @@ ...@@ -258,42 +256,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [ yAxis: [{
{ type:'value',
type: 'value', name: '单位(mm)',
name: 'Precipitation', position:'right',
min: 0, show: true, // 显示 Y 轴
max: 250,
interval: 50,
splitLine: { show: false }, splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: { axisLabel: {
formatter: '{value} ml', show: true, // 显示刻度标签
textStyle: { color: '#a3e4f5' } textStyle: { color: '#fff' }
}, },
nameTextStyle: { axisLine: { // 轴线
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色 show: true
fontSize: 16
}, },
}, axisTick: { show: true },
{
type: 'value',
name: 'Temperature',
min: 0, min: 0,
max: 25, max: 100,
interval: 5, title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
formatter: '{value} °C', show: true, // 显示刻度标签
textStyle: { color: '#a3e4f5' } textStyle: {
color: '#fff'
}
}, },
nameTextStyle: { axisLine: { // 轴线
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色 show: true
fontSize: 16
}, },
} axisTick: { show: true },
], min: 0,
grid: { right: 45, top: 10, left: 40, bottom: 25 }, max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
......
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" <el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -178,11 +178,9 @@ ...@@ -178,11 +178,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.changeSensor({ equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
equipNo: this.sensorLIst[0].equipNo })
})
}
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
...@@ -242,12 +240,49 @@ ...@@ -242,12 +240,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(m/s)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色,你可以使用十六进制颜色代码,如 '#FF0000',或者 RGB 等
}
}, {
type:'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment