fix/无用文件删除，管廊信息修改
This commit is contained in:
季万俊
parent
38b91a2c00
commit
fb26756822
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<title> 武汉礼河路管廊综合管理平台</title>
|
||||
<title> 智慧管廊综合管理平台软件V1.0</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -479,7 +479,7 @@ const data = [
|
|||
"DeviceId": "BA5F5811-22C1-406E-B343-CE433B7C2CC5",
|
||||
"StateId": 12,
|
||||
"AttrType": "类型属性",
|
||||
"AttrName": "开启/关闭百叶",
|
||||
"AttrName": "开启/关闭风机",
|
||||
"AttrField": "",
|
||||
"AttrValue": "29",
|
||||
"AttrUnit": "",
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
// echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
chartData:{}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
console.log("this.chartData",this.chartData)
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions(chartData) {
|
||||
// mock 数据
|
||||
const dataArr = {
|
||||
xdata: chartData.xdata,
|
||||
result: chartData.result
|
||||
}
|
||||
// 头部菱形
|
||||
const diamondData = dataArr.result.reduce((pre, cur, index) => {
|
||||
pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
|
||||
return pre
|
||||
}, [])
|
||||
|
||||
// color
|
||||
const color = [
|
||||
// [{ offset: 0, color: "#dc0707", },
|
||||
// { offset: 0.5, color: "#dc0707", },
|
||||
// { offset: 0.5, color: "#af0808", },
|
||||
// { offset: 1, color: "#af0808", }],
|
||||
// [{ offset: 0, color: "#f67c20", },
|
||||
// { offset: 0.5, color: "#f67c20", },
|
||||
// { offset: 0.5, color: "#cc681e", },
|
||||
// { offset: 1, color: "#cc681e", }],
|
||||
[{ offset: 0, color: "#efff37", },
|
||||
{ offset: 0.5, color: "#efff37", },
|
||||
{ offset: 0.5, color: "#d5e700", },
|
||||
{ offset: 1, color: "#d5e700", }],
|
||||
[{ offset: 0, color: "#32ffee", },
|
||||
{ offset: 0.5, color: "#32ffee", },
|
||||
{ offset: 0.5, color: "#00e8d5", },
|
||||
{ offset: 1, color: "#00e8d5", }],
|
||||
[{ offset: 0, color: "#46c9ff", },
|
||||
{ offset: 0.5, color: "#46c9ff", },
|
||||
{ offset: 0.5, color: "#00b4ff", },
|
||||
{ offset: 1, color: "#00b4ff", }],
|
||||
[{ offset: 0, color: "#54a0ff", },
|
||||
{ offset: 0.5, color: "#54a0ff", },
|
||||
{ offset: 0.5, color: "#1f83ff", },
|
||||
{ offset: 1, color: "#1f83ff", }],
|
||||
]
|
||||
|
||||
// series
|
||||
let series = dataArr.result.reduce((p, c, i, array) => {
|
||||
p.push({
|
||||
z: i + 1,
|
||||
stack: '总量',
|
||||
type: 'bar',
|
||||
name: c.name,
|
||||
barGap: '-100%',
|
||||
barWidth: 5,
|
||||
data: c.data,
|
||||
itemStyle:{ color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
|
||||
},{
|
||||
z: i + 10,
|
||||
type: 'pictorialBar',
|
||||
symbolPosition: 'end',
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [15, 10],
|
||||
// data: diamondData[i],
|
||||
data: dataArr[i],
|
||||
itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
|
||||
tooltip: { show: false },
|
||||
})
|
||||
|
||||
// 是否最后一个了？
|
||||
if (p.length === (array.length) * 2) {
|
||||
p.push({
|
||||
z: array.length * 2,
|
||||
type: "pictorialBar",
|
||||
symbolPosition: "start",
|
||||
data: dataArr.result[0].data,
|
||||
symbol: "diamond",
|
||||
symbolOffset: ["0%", "50%"],
|
||||
symbolSize: [15, 10],
|
||||
itemStyle: { color: { type: 'linear', x: 0, x2: 0, y: 0, y2: 0, colorStops: color[0]} },
|
||||
tooltip: { show: false },
|
||||
})
|
||||
return p
|
||||
}
|
||||
|
||||
return p
|
||||
}, [])
|
||||
|
||||
// tooltip
|
||||
const tooltip = { trigger: "axis" }
|
||||
|
||||
// legend
|
||||
const legend = {
|
||||
data: dataArr.result.map(item => item.name),
|
||||
textStyle: { fontSize: 14, color: '#fff'},
|
||||
itemWidth: 10,
|
||||
itemHeight: 5,
|
||||
itemGap: 5,
|
||||
top: '0%',
|
||||
// 禁止点击
|
||||
selectedMode:false,
|
||||
}
|
||||
// grid
|
||||
const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%'}
|
||||
|
||||
// xAxis
|
||||
const xAxis = {
|
||||
axisTick: { show: true },
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
|
||||
axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
|
||||
data: dataArr.xdata
|
||||
}
|
||||
|
||||
// yAxis
|
||||
const yAxis = [{
|
||||
// type: 'value',
|
||||
// name:'单位：KWh',
|
||||
// splitNumber: 5,
|
||||
// nameTextStyle: {
|
||||
// color: "#D4EAFF"
|
||||
// },
|
||||
// axisLabel: {
|
||||
// textStyle: {
|
||||
// color: '#D4EAFF',
|
||||
// fontStyle: 'normal',
|
||||
// fontFamily: '微软雅黑',
|
||||
// fontSize: 12,
|
||||
// }
|
||||
// },
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
|
||||
axisLine: { show: false, },
|
||||
axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
|
||||
}]
|
||||
|
||||
// 渲染
|
||||
this.chart.setOption({tooltip, xAxis, yAxis, series, grid, legend });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,549 +0,0 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
// echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
chartData:{}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData,time,type } = {}) {
|
||||
//用水
|
||||
if(type==0){
|
||||
this.chart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(126,199,255,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: 'rgba(126,199,255,1)' // 100% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(126,199,255,0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: time,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false // 不显示横轴网格线
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#D4EAFF' // 设置 X 轴字体颜色为红色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right:15,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10],
|
||||
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type : 'value',
|
||||
name : '单位：吨',
|
||||
// min:0,
|
||||
// max:1000,
|
||||
axisLabel : {
|
||||
formatter: '{value}',
|
||||
textStyle:{
|
||||
color:'#D4EAFF'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#D4EAFF'
|
||||
}
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type: 'dashed',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
legend: {
|
||||
show:true,
|
||||
x:'center',
|
||||
y:'0',
|
||||
icon: 'stack',
|
||||
itemWidth:10,
|
||||
itemHeight:2,
|
||||
textStyle:{
|
||||
color:'#D4EAFF'
|
||||
},
|
||||
data: '用水',
|
||||
},
|
||||
series: [{
|
||||
name: '用水',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#16FFF7',
|
||||
lineStyle: {
|
||||
color: '#16FFF7',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
symbol:"circle",
|
||||
symbolSize:0,
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
areaStyle: { //区域填充样式
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(25,163,223,.3)"
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(25,163,223, 0)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
||||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
]
|
||||
})
|
||||
}else if(type==1){
|
||||
//用电
|
||||
this.chart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(126,199,255,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: 'rgba(126,199,255,1)' // 100% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(126,199,255,0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: time,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false // 不显示横轴网格线
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#D4EAFF' // 设置 X 轴字体颜色为红色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right:10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10],
|
||||
formatter: function (params) {
|
||||
let relVal = params[0].name;
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
relVal +=
|
||||
"<br/>" +
|
||||
params[i].marker +
|
||||
" " +
|
||||
params[i].seriesName +
|
||||
" " +
|
||||
params[i].value +
|
||||
" KWh";
|
||||
}
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
|
||||
{
|
||||
type : 'value',
|
||||
name : '单位：（KWh）',
|
||||
// min:0,
|
||||
// max:1000,
|
||||
axisLabel : {
|
||||
formatter: '{value}',
|
||||
textStyle:{
|
||||
color:'#D4EAFF'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#D4EAFF'
|
||||
}
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type: 'dashed',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
legend: {
|
||||
show:true,
|
||||
x:'center',
|
||||
y:'0',
|
||||
icon: 'stack',
|
||||
itemWidth:10,
|
||||
itemHeight:2,
|
||||
textStyle:{
|
||||
color:'#D4EAFF'
|
||||
},
|
||||
data: '用电'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用电',
|
||||
smooth: true,
|
||||
symbol:"circle",
|
||||
symbolSize:0,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2DC4FF',
|
||||
lineStyle: {
|
||||
color: '#2DC4FF',
|
||||
width: 2
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: '#f3f8ff'
|
||||
// }
|
||||
}
|
||||
},
|
||||
areaStyle: { //区域填充样式
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(10,219,250,.3)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(10,219,250, 0)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
|
||||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
// animationDuration: 2800,
|
||||
// animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
// this.chart.setOption({
|
||||
// backgroundColor: 'transparent',
|
||||
// axisPointer: {
|
||||
// lineStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [{
|
||||
// offset: 0,
|
||||
// color: 'rgba(126,199,255,0)' // 0% 处的颜色
|
||||
// }, {
|
||||
// offset: 0.5,
|
||||
// color: 'rgba(126,199,255,1)' // 100% 处的颜色
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: 'rgba(126,199,255,0)' // 100% 处的颜色
|
||||
// }],
|
||||
// global: false // 缺省为 false
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// xAxis: {
|
||||
// data: time,
|
||||
// boundaryGap: false,
|
||||
// splitLine: {
|
||||
// show: false // 不显示横轴网格线
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: '#D4EAFF' // 设置 X 轴字体颜色为红色
|
||||
// }
|
||||
// },
|
||||
// grid: {
|
||||
// left: 10,
|
||||
// right:10,
|
||||
// bottom: 20,
|
||||
// top: 30,
|
||||
// containLabel: true,
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross'
|
||||
// },
|
||||
// padding: [5, 10]
|
||||
// },
|
||||
// yAxis: [
|
||||
//
|
||||
// {
|
||||
// type : 'value',
|
||||
// name : '单位：度',
|
||||
// min:0,
|
||||
// max:1000,
|
||||
// axisLabel : {
|
||||
// formatter: '{value}',
|
||||
// textStyle:{
|
||||
// color:'#D4EAFF'
|
||||
// }
|
||||
// },
|
||||
// axisLine:{
|
||||
// lineStyle:{
|
||||
// color:'#D4EAFF'
|
||||
// }
|
||||
// },
|
||||
// axisTick:{
|
||||
// show:false,
|
||||
// },
|
||||
// splitLine:{
|
||||
// show:true,
|
||||
// lineStyle:{
|
||||
// type: 'dashed',
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type : 'value',
|
||||
// name : '单位：吨',
|
||||
// min:0,
|
||||
// max:1000,
|
||||
// axisLabel : {
|
||||
// formatter: '{value}',
|
||||
// textStyle:{
|
||||
// color:'#D4EAFF'
|
||||
// }
|
||||
// },
|
||||
// axisLine:{
|
||||
// lineStyle:{
|
||||
// color:'#D4EAFF'
|
||||
// }
|
||||
// },
|
||||
// axisTick:{
|
||||
// show:false,
|
||||
// },
|
||||
// splitLine:{
|
||||
// show:true,
|
||||
// lineStyle:{
|
||||
// type: 'dashed',
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ],
|
||||
// legend: {
|
||||
// show:true,
|
||||
// x:'center',
|
||||
// y:'0',
|
||||
// icon: 'stack',
|
||||
// itemWidth:10,
|
||||
// itemHeight:2,
|
||||
// textStyle:{
|
||||
// color:'#D4EAFF'
|
||||
// },
|
||||
// data: ['用水', '用电']
|
||||
// },
|
||||
// series: [{
|
||||
// name: '用水',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#16FFF7',
|
||||
// lineStyle: {
|
||||
// color: '#16FFF7',
|
||||
// width: 2
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// smooth: true,
|
||||
// type: 'line',
|
||||
// symbol:"circle",
|
||||
// symbolSize:0,
|
||||
// data: expectedData,
|
||||
// animationDuration: 2800,
|
||||
// areaStyle: { //区域填充样式
|
||||
// normal: {
|
||||
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
// offset: 0,
|
||||
// color: "rgba(25,163,223,.3)"
|
||||
//
|
||||
//
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(25,163,223, 0)"
|
||||
// }
|
||||
// ], false),
|
||||
// shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
||||
// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
// }
|
||||
// },
|
||||
// animationEasing: 'cubicInOut'
|
||||
// },
|
||||
// {
|
||||
// name: '用电',
|
||||
// smooth: true,
|
||||
// symbol:"circle",
|
||||
// symbolSize:0,
|
||||
// type: 'line',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#2DC4FF',
|
||||
// lineStyle: {
|
||||
// color: '#2DC4FF',
|
||||
// width: 2
|
||||
// },
|
||||
// // areaStyle: {
|
||||
// // color: '#f3f8ff'
|
||||
// // }
|
||||
// }
|
||||
// },
|
||||
// areaStyle: { //区域填充样式
|
||||
// normal: {
|
||||
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
// offset: 0,
|
||||
// color: "rgba(10,219,250,.3)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(10,219,250, 0)"
|
||||
// }
|
||||
// ], false),
|
||||
// shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
|
||||
// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
// }
|
||||
// },
|
||||
// data: actualData,
|
||||
// // animationDuration: 2800,
|
||||
// // animationEasing: 'quadraticOut'
|
||||
// }]
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEmissionTrend } from '@/api/carbonEmission'
|
||||
import * as echarts from "echarts";
|
||||
; // echarts theme
|
||||
import resize from "./mixins/resize";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
currentTime: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currentTime: {
|
||||
handler(val) {
|
||||
this.initChart(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart(this.currentTime);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
async initChart(num) {
|
||||
let res = await getEmissionTrend(num)
|
||||
console.log("碳排放趋势数据", res)
|
||||
if (res.code == 200) {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions(res.data);
|
||||
}
|
||||
|
||||
},
|
||||
setOptions(info) {
|
||||
//用电
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
},
|
||||
grid: {
|
||||
top: '8%',
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '8%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: { //坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#233e64'
|
||||
},
|
||||
},
|
||||
axisLabel: { //坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: '#6a9cd5',
|
||||
margin: 15,
|
||||
},
|
||||
},
|
||||
axisTick: { show: false, },
|
||||
data: info?.map(item => item.dateTime),
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
splitNumber: 7,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#233e64'
|
||||
}
|
||||
},
|
||||
axisLine: { show: false, },
|
||||
axisLabel: {
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: '#6a9cd5',
|
||||
|
||||
},
|
||||
},
|
||||
axisTick: { show: false, },
|
||||
}],
|
||||
series: [{
|
||||
name: '异常流量',
|
||||
type: 'line',
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#3deaff" // 线条颜色
|
||||
}
|
||||
},
|
||||
areaStyle: { //区域填充样式
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(61,234,255, 0.9)' },
|
||||
{ offset: 0.7, color: 'rgba(61,234,255, 0)' }
|
||||
], false),
|
||||
|
||||
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
||||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: info?.map(item => item.totalCoalNum),
|
||||
}]
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
访客
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
消息
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
金额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.card-panel-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
margin: 14px auto !important;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
<!-- 碳排放分布饼图 -->
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEmissionDistribution } from "@/api/carbonEmission";
|
||||
import * as echarts from 'echarts'
|
||||
// echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
// 获取数据
|
||||
async getData() {
|
||||
let res = await getEmissionDistribution()
|
||||
if (res.code == 200) {
|
||||
let info = res.data?.map(item => {
|
||||
return {
|
||||
name: item.roomName,
|
||||
value: item.totalVale
|
||||
}
|
||||
})
|
||||
this.initChart(info)
|
||||
}
|
||||
},
|
||||
// 初始化图表
|
||||
initChart(list) {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const colorList = ['#47A2FF ', '#53C8D1', '#FBD444', '#59CB74', '#7F6AAD', '#585247']
|
||||
const data = list
|
||||
let Total = 0 // 设备总数
|
||||
data.forEach(item => {
|
||||
Total += Number(item.value)
|
||||
})
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: Total,
|
||||
show: true,
|
||||
subtext: '吨标准煤炭',
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
color: '#fff',
|
||||
lineHeight: 20
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 14,
|
||||
color: '#999'
|
||||
},
|
||||
textAlign: 'center',
|
||||
left: '25%',
|
||||
top: '35%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
return params.name + '\n' + (params.value / Total * 100).toFixed(2) + '%'
|
||||
}
|
||||
},
|
||||
legend: [{
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: '20%',
|
||||
top: 'center',
|
||||
itemGap: 30,
|
||||
selectedMode: false,
|
||||
icon: 'pin',
|
||||
data: list,
|
||||
textStyle: {
|
||||
color: '#77899c',
|
||||
rich: {
|
||||
uname: {
|
||||
// width: 80
|
||||
},
|
||||
unum: {
|
||||
color: '#77899c',
|
||||
// width: 40,
|
||||
align: 'right',
|
||||
fontSize: 14,
|
||||
}
|
||||
}
|
||||
},
|
||||
backgroundColor: {
|
||||
image: './jfb.png'
|
||||
},
|
||||
formatter: (name) => {
|
||||
if (data.length) {
|
||||
const item = data.filter((item) => item.name === name)[0];
|
||||
return `{uname|${name}} {unum| ${item.value}} tCO₂`;
|
||||
}
|
||||
},
|
||||
}],
|
||||
color: colorList,
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '设备',
|
||||
type: 'pie',
|
||||
radius: [75, 85],
|
||||
center: ['25%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
formatter: (params) => {
|
||||
return params.name + '\n' + (params.value / Total * 100).toFixed(2) + '%'
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
data: list,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -15,16 +15,16 @@
|
|||
<div class="gl-info">
|
||||
<dl>
|
||||
<dt>管廊名称</dt>
|
||||
<dd>武汉礼河路管廊</dd>
|
||||
<dd>礼和路(友谊大道-欢乐大道)综合管廊</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>舱室类型</dt>
|
||||
<dd>电力舱，综合舱</dd>
|
||||
<dd>高压舱、综合舱、热力舱</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>管廊长度</dt>
|
||||
<dd>
|
||||
<span style="font-size: 18px; color: #ff6100">4977</span>米
|
||||
<span style="font-size: 18px; color: #ff6100">2370</span>米
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -33,11 +33,11 @@
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>起点</dt>
|
||||
<dd>110KV中心变电站</dd>
|
||||
<dd>欢乐大道</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>终点</dt>
|
||||
<dd>给供水站</dd>
|
||||
<dd>友谊大道</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<!-- <div class="warnListbox">
|
||||
|
|
@ -253,10 +253,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from "./LineChartJsc";
|
||||
import LineCharttpf from "./LineChartTpf";
|
||||
import LineChartduoneng from "./LineChartduoneng";
|
||||
import BarChartzljsc from "./BarChartzljsc";
|
||||
import PieChartdevice from "./PieChartdevice";
|
||||
import plan from "../plan.vue";
|
||||
import { color } from "echarts";
|
||||
|
|
@ -264,8 +262,6 @@ export default {
|
|||
name: "cockpit",
|
||||
components: {
|
||||
LineChartduoneng,
|
||||
LineChart,
|
||||
BarChartzljsc,
|
||||
PieChartdevice,
|
||||
LineCharttpf,
|
||||
plan,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div>
|
||||
<!-- <img src="@/assets/logo/logo-1.png" alt="" /> -->
|
||||
</div>
|
||||
<div class="title">武汉礼河路管廊综合管理平台</div>
|
||||
<div class="title">智慧管廊综合管理平台软件V1.0</div>
|
||||
</div>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
|
|
|
|||
Loading…
Reference in New Issue