Skip to content

Z
ZiBoYingJI
Commit 33ccb761 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

图表修改 无数据时优化

parent dda2fde5
Hide whitespace changes
Inline Side-by-side
Showing with 294 additions and 93 deletions
public/datav/detail/humidity-monitor.html
View file @ 33ccb761
......@@ -94,7 +94,7 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<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">
</el-date-picker>
</div>
......@@ -109,7 +109,7 @@
<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;">
<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 class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item"
......@@ -173,7 +173,7 @@
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
......@@ -185,11 +185,9 @@
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) {
this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
}
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
console.log('sdfsdf', res)
// fn && fn()
});
......@@ -250,12 +248,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
name: 'Precipitation',
yAxis: [{
type:'value',
name: '单位(%RH)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 45, top: 10, left: 40, bottom: 25 },
nameTextStyle: { color: '#fff' },
axisLabel: {
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: [
{
type: "slider",
......@@ -281,7 +316,7 @@
});
console.log('this.createTime', this.createTime.join(','))
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/shi', {
params: {
......
public/datav/detail/people-location.html
View file @ 33ccb761
......@@ -132,7 +132,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '8' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/people-monitor.html
View file @ 33ccb761
......@@ -317,11 +317,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 15, top: 10, left: 40, bottom: 25 },
nameTextStyle: { color: '#fff' },
axisLabel: {
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: [
{
type: "slider",
......@@ -380,11 +418,53 @@
axisLine: { lineStyle: { color: '#a3e4f5' } },
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 },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { bottom: 35, top: 15, left: 35, right: 15 },
nameTextStyle: { color: '#fff' },
axisLabel: {
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: [
{
name: "人数",
......
public/datav/detail/shape-monitor.html
View file @ 33ccb761
......@@ -53,7 +53,7 @@
<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 class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
......@@ -62,7 +62,8 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......@@ -127,8 +128,9 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" id="line" style="width: 100%;height:400px;"></div>
......@@ -179,7 +181,7 @@
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
var map; // 地图
new Vue({
el: '#app',
......@@ -218,7 +220,7 @@
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
......@@ -230,9 +232,9 @@
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { // 如果列表有值，默认取第1个设备的值
this.changeSensor({equipNo: this.sensorLIst[0].equipNo})
}
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
console.log('sdfsdf', res)
// fn && fn()
});
......@@ -270,6 +272,13 @@
itemStyle: {
color: '#6dd1b9'
},
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: {
silent: true,
data: [
......@@ -299,16 +308,55 @@
}
},
xAxis: {
type: 'category',
data: [],
show: true, // 显示 X 轴
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
axisTick: { show: true },
},
yAxis: {
name: 'Precipitation',
yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 45, top: 10, left: 40, bottom: 25 },
nameTextStyle: { color: '#fff' },
axisLabel: {
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: [
{
type: "slider",
......
public/datav/detail/static/css/public-detail.css
View file @ 33ccb761
......@@ -40,7 +40,7 @@
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;
}
......
public/datav/detail/static/js/public-detail.js
View file @ 33ccb761
......@@ -62,7 +62,7 @@ var gemhoUtil = {
// 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => {
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())}`;
};
// 生成数组
......
public/datav/detail/temperature-monitor.html
View file @ 33ccb761
......@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<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">
</el-date-picker>
</div>
......@@ -164,7 +164,7 @@
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
......@@ -176,11 +176,9 @@
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) {
this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
}
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
console.log('sdfsdf', res)
// fn && fn()
});
......
public/datav/detail/water-monitor.html
View file @ 33ccb761
......@@ -85,7 +85,7 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<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">
</el-date-picker>
</div>
......@@ -174,7 +174,7 @@
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
......@@ -186,11 +186,9 @@
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) {
this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
}
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
......@@ -258,42 +256,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
formatter: '{value} ml',
textStyle: { color: '#a3e4f5' }
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
axisLine: { // 轴线
show: true
},
},
{
type: 'value',
name: 'Temperature',
axisTick: { show: true },
min: 0,
max: 25,
interval: 5,
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: {
formatter: '{value} °C',
textStyle: { color: '#a3e4f5' }
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
axisLine: { // 轴线
show: true
},
}
],
grid: { right: 45, top: 10, left: 40, bottom: 25 },
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
......
public/datav/detail/wind-monitor.html
View file @ 33ccb761
......@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<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">
</el-date-picker>
</div>
......@@ -166,7 +166,7 @@
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
......@@ -178,11 +178,9 @@
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) {
this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
}
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
......@@ -242,12 +240,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
name: 'Precipitation',
yAxis: [{
type:'value',
name: '单位(m/s)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 45, top: 10, left: 40, bottom: 25 },
nameTextStyle: { color: '#fff' },
axisLabel: {
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: [
{
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