xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

pull/125/head
孙萌 2024-03-05 16:26:05 +08:00
parent a74261c964
commit f23a10c078
3 changed files with 404 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
src/assets/js/charts.js
View File

@ -369,6 +369,374 @@ 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);

4
src/components/setParamsControl.vue
View File

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

40
src/views/page/dataAnalysis.vue
View File

@ -6,19 +6,29 @@
<img src="../../assets/image/analysis.png" alt="" /> <img src="../../assets/image/analysis.png" alt="" />
数据分析 数据分析
</div> </div>
<div class="search-flex"> <div class="flex-view">
<div class="input-btn">
<div class="search-right"> <span>快速查询</span>
<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="至" <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
start-placeholder="开始时间" end-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>
@ -30,16 +40,22 @@
</template> </template>
<script> <script>
import { realTimeLine } from '@/assets/js/charts' import { realTimeLine1 } 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
@ -65,7 +81,7 @@ export default {
return formattedTime return formattedTime
}, },
search() { search() {
this.getData() this.dataInit()
}, },
timeInit() { timeInit() {
const start = new Date() const start = new Date()
@ -74,7 +90,11 @@ 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);
@ -105,7 +125,7 @@ export default {
}) })
}; };
}); });
realTimeLine('realTime-line', chartsData) realTimeLine1('realTime-line', chartsData)
} else { } else {
this.$message.error(res.data.msg); this.$message.error(res.data.msg);
} }