fix/无用文件删除，管廊信息修改
This commit is contained in:
季万俊
parent
38b91a2c00
commit
fb26756822
|
|
@ -7,7 +7,7 @@
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<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]-->
|
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
|
|
|
||||||
|
|
@ -479,7 +479,7 @@ const data = [
|
||||||
"DeviceId": "BA5F5811-22C1-406E-B343-CE433B7C2CC5",
|
"DeviceId": "BA5F5811-22C1-406E-B343-CE433B7C2CC5",
|
||||||
"StateId": 12,
|
"StateId": 12,
|
||||||
"AttrType": "类型属性",
|
"AttrType": "类型属性",
|
||||||
"AttrName": "开启/关闭百叶",
|
"AttrName": "开启/关闭风机",
|
||||||
"AttrField": "",
|
"AttrField": "",
|
||||||
"AttrValue": "29",
|
"AttrValue": "29",
|
||||||
"AttrUnit": "",
|
"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">
|
<div class="gl-info">
|
||||||
<dl>
|
<dl>
|
||||||
<dt>管廊名称</dt>
|
<dt>管廊名称</dt>
|
||||||
<dd>武汉礼河路管廊</dd>
|
<dd>礼和路(友谊大道-欢乐大道)综合管廊</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>舱室类型</dt>
|
<dt>舱室类型</dt>
|
||||||
<dd>电力舱，综合舱</dd>
|
<dd>高压舱、综合舱、热力舱</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>管廊长度</dt>
|
<dt>管廊长度</dt>
|
||||||
<dd>
|
<dd>
|
||||||
<span style="font-size: 18px; color: #ff6100">4977</span>米
|
<span style="font-size: 18px; color: #ff6100">2370</span>米
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
@ -33,11 +33,11 @@
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>起点</dt>
|
<dt>起点</dt>
|
||||||
<dd>110KV中心变电站</dd>
|
<dd>欢乐大道</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>终点</dt>
|
<dt>终点</dt>
|
||||||
<dd>给供水站</dd>
|
<dd>友谊大道</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="warnListbox">
|
<!-- <div class="warnListbox">
|
||||||
|
|
@ -253,10 +253,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LineChart from "./LineChartJsc";
|
|
||||||
import LineCharttpf from "./LineChartTpf";
|
import LineCharttpf from "./LineChartTpf";
|
||||||
import LineChartduoneng from "./LineChartduoneng";
|
import LineChartduoneng from "./LineChartduoneng";
|
||||||
import BarChartzljsc from "./BarChartzljsc";
|
|
||||||
import PieChartdevice from "./PieChartdevice";
|
import PieChartdevice from "./PieChartdevice";
|
||||||
import plan from "../plan.vue";
|
import plan from "../plan.vue";
|
||||||
import { color } from "echarts";
|
import { color } from "echarts";
|
||||||
|
|
@ -264,8 +262,6 @@ export default {
|
||||||
name: "cockpit",
|
name: "cockpit",
|
||||||
components: {
|
components: {
|
||||||
LineChartduoneng,
|
LineChartduoneng,
|
||||||
LineChart,
|
|
||||||
BarChartzljsc,
|
|
||||||
PieChartdevice,
|
PieChartdevice,
|
||||||
LineCharttpf,
|
LineCharttpf,
|
||||||
plan,
|
plan,
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<div>
|
<div>
|
||||||
<!-- <img src="@/assets/logo/logo-1.png" alt="" /> -->
|
<!-- <img src="@/assets/logo/logo-1.png" alt="" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="title">武汉礼河路管廊综合管理平台</div>
|
<div class="title">智慧管廊综合管理平台软件V1.0</div>
|
||||||
</div>
|
</div>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue