Compare commits
No commits in common. "7578989ea2c8585f3c1160521690c06bad13d2b5" and "538a3c741c21e4713d0a269abd4cfe5e3da03b61" have entirely different histories.
7578989ea2
...
538a3c741c
|
@ -214,7 +214,6 @@
|
||||||
|
|
||||||
.collapse.set-params .el-collapse-item__header .name {
|
.collapse.set-params .el-collapse-item__header .name {
|
||||||
color: #A8B6C8;
|
color: #A8B6C8;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse.set-params .table-ul .table-li {
|
.collapse.set-params .table-ul .table-li {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -236,7 +236,6 @@
|
||||||
.el-collapse-item__header {
|
.el-collapse-item__header {
|
||||||
.name {
|
.name {
|
||||||
color: #A8B6C8;
|
color: #A8B6C8;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -369,374 +369,6 @@ export function realTimeLine(id, data,pageId) {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
export function realTimeLine1(id, data,pageId) {
|
|
||||||
var chartDom = document.getElementById(id);
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
|
|
||||||
var Xdata = []
|
|
||||||
var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
|
|
||||||
'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
|
|
||||||
var colorList = [new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(0, 187, 136, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(0, 187, 136, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(252, 125, 106, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(252, 125, 106, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(252, 223, 39, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(252, 223, 39, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(68, 214, 232, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(68, 214, 232, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(69, 224, 155, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(69, 224, 155, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(82, 188, 255, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(82, 188, 255, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(214, 162, 255, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(214, 162, 255, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 192, 111, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 192, 111, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 156, 154, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 156, 154, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
), new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 156, 154, 0.50)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: "rgba(255, 156, 154, 0)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
|
|
||||||
]
|
|
||||||
// var equipmentList=store.state.equipmentSelList
|
|
||||||
var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList'))
|
|
||||||
|
|
||||||
var list = []
|
|
||||||
var selList={}
|
|
||||||
var selTure=false
|
|
||||||
var dataList = []
|
|
||||||
// equipmentList.forEach(obj => {
|
|
||||||
// if (obj.deviceId == pageId) {
|
|
||||||
// // 在找到的对象中添加参数
|
|
||||||
// if(obj.selList){
|
|
||||||
// selList = obj.selList;
|
|
||||||
// selTure=true
|
|
||||||
// }else{
|
|
||||||
// selList ={}
|
|
||||||
// selTure=false
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
data.forEach((el, index) => {
|
|
||||||
Xdata.push(el.time)
|
|
||||||
|
|
||||||
el.value.forEach((el1, index1) => {
|
|
||||||
var containsIndex = dataList.findIndex(function (item) {
|
|
||||||
return item.name === el1.name;
|
|
||||||
});
|
|
||||||
if (containsIndex == -1) {
|
|
||||||
dataList.push({ name: el1.name, value: [] })
|
|
||||||
} else {
|
|
||||||
dataList[containsIndex].value.push(el1.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
// if(!selTure){
|
|
||||||
// dataList.forEach((el, index) => {
|
|
||||||
// selList[el.name]=(index==0?true:false)
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
dataList.forEach((el, index) => {
|
|
||||||
list.push({
|
|
||||||
name: el.name,
|
|
||||||
data: el.value,
|
|
||||||
type: "line",
|
|
||||||
symbol: "circle",
|
|
||||||
smooth: true,
|
|
||||||
symbolSize: 5,
|
|
||||||
showSymbol: false,
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colorList[index],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colorList1[index],
|
|
||||||
borderColor: colorList1[index],
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
var option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#57617B",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'z-index: 9999;', // 设置 z-index
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
icon: "circle",
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
type: 'scroll', // 启用翻页
|
|
||||||
data: list,
|
|
||||||
selected: selList,
|
|
||||||
right: "center",
|
|
||||||
top:10,
|
|
||||||
itemGap: 10,
|
|
||||||
width:'90%',
|
|
||||||
height:20,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#fff",
|
|
||||||
lineHeight: 30,
|
|
||||||
},
|
|
||||||
pageTextStyle: {
|
|
||||||
color: '#fff', // 设置翻页文字颜色
|
|
||||||
},
|
|
||||||
pageIconColor: '#fff', // 设置翻页按钮颜色
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
show: true,
|
|
||||||
realtime: true,
|
|
||||||
start:0,
|
|
||||||
end: 100,
|
|
||||||
xAxisIndex: [0, 1],
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
realtime: true,
|
|
||||||
start: 0,
|
|
||||||
height:20,
|
|
||||||
end:100,
|
|
||||||
xAxisIndex: [0, 1],
|
|
||||||
backgroundColor: 'rgba(11, 28, 42, 0.4)',
|
|
||||||
fillerColor: 'rgba(2, 148, 226, 1)',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
grid: {
|
|
||||||
left: "3%",
|
|
||||||
right: "10%",
|
|
||||||
bottom: "13%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: Xdata,
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
name: "",
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(104, 168, 205, 1)",
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: list,
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
myChart.resize();
|
|
||||||
|
|
||||||
// myChart.on('legendselectchanged', function (params) {
|
|
||||||
// equipmentList.forEach((obj,index) => {
|
|
||||||
// if (obj.deviceId== pageId) {
|
|
||||||
// // 在找到的对象中添加参数
|
|
||||||
// obj.selList=params.selected
|
|
||||||
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList))
|
|
||||||
// });
|
|
||||||
window.addEventListener("resize", function () {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export function statusCharts(id, data) {
|
export function statusCharts(id, data) {
|
||||||
var chartDom = document.getElementById(id);
|
var chartDom = document.getElementById(id);
|
||||||
|
|
||||||
|
|
|
@ -286,7 +286,7 @@ export default {
|
||||||
this.routerList.push(
|
this.routerList.push(
|
||||||
{
|
{
|
||||||
id: el.id, sort: el.sort,
|
id: el.id, sort: el.sort,
|
||||||
name: "日光温室特殊参数(山地型温室)",
|
name: "日光温室特殊参数(丽水项目)",
|
||||||
router: "skylight",
|
router: "skylight",
|
||||||
list: [
|
list: [
|
||||||
{ name: "顶卷膜1", status: -1, router: "skylight", index: 1 },
|
{ name: "顶卷膜1", status: -1, router: "skylight", index: 1 },
|
||||||
|
@ -297,7 +297,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: el.id, sort: el.sort,
|
id: el.id, sort: el.sort,
|
||||||
name: "风机(山地型温室)",
|
name: "风机(丽水项目)",
|
||||||
router: "fan",
|
router: "fan",
|
||||||
list: [
|
list: [
|
||||||
{ name: "风机1", status: -1, router: "fan", index: 1 },
|
{ name: "风机1", status: -1, router: "fan", index: 1 },
|
||||||
|
|
|
@ -6,28 +6,18 @@
|
||||||
<img src="../../assets/image/analysis.png" alt="" />
|
<img src="../../assets/image/analysis.png" alt="" />
|
||||||
数据分析
|
数据分析
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-view">
|
<div class="search-flex">
|
||||||
<div class="input-btn">
|
|
||||||
<span>快速查询</span>
|
<div class="search-right">
|
||||||
<div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
|
|
||||||
今日
|
|
||||||
</div>
|
|
||||||
<div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
|
|
||||||
昨日
|
|
||||||
</div>
|
|
||||||
<div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
|
|
||||||
自定义
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input-sel-time">
|
|
||||||
<span>时间段</span>
|
<span>时间段</span>
|
||||||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
|
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至"
|
||||||
end-placeholder="结束时间">
|
start-placeholder="开始时间" end-placeholder="结束时间">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
<div class="input-btn">
|
||||||
<div class="input-btn ">
|
<div class="btn blue" @click="search">
|
||||||
<div class="btn blue" @click="search">
|
查询
|
||||||
查询
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,22 +30,16 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { realTimeLine1 } from '@/assets/js/charts'
|
import { realTimeLine } from '@/assets/js/charts'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
active: 0,
|
|
||||||
value1: '',
|
value1: '',
|
||||||
indexs: 1,
|
indexs: 1,
|
||||||
dateRange: [],
|
dateRange: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
active(newVal, oldVal) {
|
|
||||||
if (newVal != 2) {
|
|
||||||
this.dataInit()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$route(newVal, oldVal) {
|
$route(newVal, oldVal) {
|
||||||
const that = this;
|
const that = this;
|
||||||
const store = this.$store.state
|
const store = this.$store.state
|
||||||
|
@ -81,7 +65,7 @@ export default {
|
||||||
return formattedTime
|
return formattedTime
|
||||||
},
|
},
|
||||||
search() {
|
search() {
|
||||||
this.dataInit()
|
this.getData()
|
||||||
},
|
},
|
||||||
timeInit() {
|
timeInit() {
|
||||||
const start = new Date()
|
const start = new Date()
|
||||||
|
@ -90,11 +74,7 @@ export default {
|
||||||
this.dateRange = [start, end]
|
this.dateRange = [start, end]
|
||||||
},
|
},
|
||||||
dataInit() {
|
dataInit() {
|
||||||
if (this.active == 0) {
|
this.timeInit()
|
||||||
this.timeInit()
|
|
||||||
} else if (this.active == 1) {
|
|
||||||
this.yesterdayTime()
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.getData()
|
this.getData()
|
||||||
}, 0);
|
}, 0);
|
||||||
|
@ -125,7 +105,7 @@ export default {
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
realTimeLine1('realTime-line', chartsData)
|
realTimeLine('realTime-line', chartsData)
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(res.data.msg);
|
this.$message.error(res.data.msg);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue