1377 lines
47 KiB
Vue
1377 lines
47 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="a">
|
||
<img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
|
||
</div>
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
|
||
<div class="slbjzl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>熟料边界总览</p>
|
||
</div>
|
||
<div class="top">
|
||
<p>单位：tCO2</p>
|
||
<div class="data">
|
||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
||
</div>
|
||
</div>
|
||
<div id="slbjzl">
|
||
<div class="first_one">
|
||
<div class="one">
|
||
<p>2641.76</p>
|
||
<p>熟料工段排放量</p>
|
||
</div>
|
||
<div class="two">
|
||
<p>0</p>
|
||
<p>化石燃料燃烧排放</p>
|
||
</div>
|
||
<div class="three">
|
||
<p>2641.76</p>
|
||
<p>消耗电力产生的排放</p>
|
||
</div>
|
||
<div class="four">
|
||
<p>257.1</p>
|
||
<p>过程排放核算</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tlt">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳流图</p>
|
||
</div>
|
||
<div class="top">
|
||
<p>单位：tCO2</p>
|
||
</div>
|
||
<div id="tlt">
|
||
<div class="zong">
|
||
<p>总量</p>
|
||
<p class="count">2641.76</p>
|
||
</div>
|
||
<div class="mei">
|
||
<p>煤</p>
|
||
<p class="count">28.51</p>
|
||
</div>
|
||
<div class="dian">
|
||
<p>电</p>
|
||
<p class="count">871</p>
|
||
</div>
|
||
<div class="chaiyou">
|
||
<p>柴油</p>
|
||
<p class="count">329</p>
|
||
</div>
|
||
<div class="ycl">
|
||
<p>原材料</p>
|
||
<p class="count">255</p>
|
||
</div>
|
||
<div class="m_one">1号生产线<span class="count">747.24</span></div>
|
||
<div class="m_two">2号生产线<span class="count">128.53</span></div>
|
||
<div class="m_three">3号生产线<span class="count">114.19</span></div>
|
||
<div class="d_one">1号生产线<span class="count">747.24</span></div>
|
||
<div class="d_two">2号生产线<span class="count">128.53</span></div>
|
||
<div class="d_three">3号生产线<span class="count">114.19</span></div>
|
||
<div class="chai_one">1号生产线<span class="count">747.24</span></div>
|
||
<div class="chai_two">2号生产线<span class="count">128.53</span></div>
|
||
<div class="chai_three">
|
||
3号生产线<span class="count">114.19</span>
|
||
</div>
|
||
<div class="ycl_one">1号生产线<span class="count">747.24</span></div>
|
||
<div class="ycl_two">2号生产线<span class="count">128.53</span></div>
|
||
<div class="ycl_three">
|
||
3号生产线<span class="count">114.19</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tpfl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳排放量</p>
|
||
</div>
|
||
<div id="tpfl">
|
||
<div class="data">
|
||
<img src="../../assets/TZCGL/edit.png" alt="" class="img">
|
||
</div>
|
||
<div class="calendars">
|
||
<div class="title_rl">
|
||
<img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
|
||
<!-- <span @click="getcalendar('prev-month')">上</span> -->
|
||
<span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
|
||
<img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
|
||
<!-- <span @click="getcalendar('next-month')">下</span> -->
|
||
</div>
|
||
<el-calendar v-model="ddd" ref="getcalendar">
|
||
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
||
<template slot="dateCell" slot-scope="{date, data}">
|
||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||
<span>{{ data.day.split('-')[2] }}</span>
|
||
<!-- {{ date }} -->
|
||
<p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
|
||
<p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
|
||
<p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
|
||
<!-- {{ data.type}} -->
|
||
</p>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tpfqd">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳排放强度</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="tpfqd">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sstpf">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>实时碳排放</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="sstpf"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pfzb">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>排放占比</p>
|
||
</div>
|
||
<div id="pfzb">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import "../../assets/CSS/tzcglsl.css";
|
||
export default {
|
||
data() {
|
||
return {
|
||
ddd: new Date(),
|
||
res: "年",
|
||
tableData: [
|
||
{
|
||
date1: "水泥单位产品综合能耗",
|
||
date2: "80kgce/t",
|
||
date3: "84kgce/t",
|
||
date4: "5%",
|
||
},
|
||
{
|
||
date1: "水泥大内产品综合电耗",
|
||
date2: "40kWh/t",
|
||
date3: "53kWh/t",
|
||
date4: "32.5%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合能耗",
|
||
date2: "100kgce/t",
|
||
date3: "114kgce/t",
|
||
date4: "14%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合电耗",
|
||
date2: "48kWh/t",
|
||
date3: "55kWh/t",
|
||
date4: "14.58%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合煤耗",
|
||
date2: "94kgce/",
|
||
date3: "108kgce/",
|
||
date4: "14.89%",
|
||
},
|
||
],
|
||
devices: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: true,
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: false,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: false,
|
||
date3: "45.00",
|
||
}
|
||
],
|
||
option1: {
|
||
// title: {
|
||
// text: "单位:tCO2",
|
||
|
||
// },
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// },
|
||
grid: {
|
||
left: "5%",
|
||
right: "4%",
|
||
bottom: "5%",
|
||
// containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
type: "category",
|
||
// boundaryGap: false,
|
||
data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show:false,
|
||
interval: true, // 设置刻度点连续显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// boundaryGap: true,
|
||
name: "单位:tCO2",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
data: ["0", "10", "20", "30", "40"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
}
|
||
},
|
||
legend: {
|
||
data: [
|
||
{
|
||
icon: "rect",
|
||
name: "1号线",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "2号线",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "3号线",
|
||
}
|
||
],
|
||
x: "center",
|
||
y: "top",
|
||
itemGap: 200,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "28px",
|
||
},
|
||
fontSize: "28px",
|
||
},
|
||
series: [
|
||
{
|
||
name: "1号线",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#09E83E",
|
||
},
|
||
itemStyle: {
|
||
color: "#09E83E",
|
||
},
|
||
},
|
||
{
|
||
name: "2号线",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#00B0FF",
|
||
},
|
||
itemStyle: {
|
||
color: "#00B0FF",
|
||
},
|
||
},
|
||
{
|
||
name: "3号线",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#18FCFF",
|
||
},
|
||
itemStyle: {
|
||
color: "#18FCFF",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
// title: {
|
||
// text: "单位:tCO2",
|
||
|
||
// },
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// },
|
||
grid: {
|
||
left: "5%",
|
||
right: "4%",
|
||
bottom: "5%",
|
||
// containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
type: "category",
|
||
// boundaryGap: false,
|
||
data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
axisTick: {
|
||
// show:false,
|
||
interval: true, // 设置刻度点连续显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// boundaryGap: true,
|
||
name: "单位:tCO2",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
data: ["0", "10", "20", "30", "40"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
}
|
||
},
|
||
legend: {
|
||
data: [
|
||
{
|
||
icon: "rect",
|
||
name: "1号线",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "2号线",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "3号线",
|
||
}
|
||
],
|
||
x: "center",
|
||
y: "top",
|
||
itemGap: 200,
|
||
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "28px",
|
||
},
|
||
fontSize: "28px",
|
||
},
|
||
series: [
|
||
{
|
||
name: "1号线",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#09E83E",
|
||
},
|
||
itemStyle: {
|
||
color: "#09E83E",
|
||
},
|
||
},
|
||
{
|
||
name: "2号线",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#00B0FF",
|
||
},
|
||
itemStyle: {
|
||
color: "#00B0FF",
|
||
},
|
||
},
|
||
{
|
||
name: "3号线",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 1,
|
||
data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#18FCFF",
|
||
},
|
||
itemStyle: {
|
||
color: "#18FCFF",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
//桑基图。目前不需要
|
||
// option3: {
|
||
// tooltip: {
|
||
// trigger: "item",
|
||
// triggerOn: "mousemove",
|
||
// },
|
||
// grid: {
|
||
// top: "25px",
|
||
// left: "10px",
|
||
// right: "10px",
|
||
// bottom: "6%",
|
||
// containLabel: true,
|
||
// },
|
||
// series: {
|
||
// type: "sankey",
|
||
// layout: "none",
|
||
// top: "2%",
|
||
// bottom: "5%",
|
||
// left: "5%",
|
||
// right: "13%",
|
||
// lineStyle: {
|
||
// opacity: 0.3,
|
||
// color: "gradient",
|
||
// curveness: 0.7,
|
||
// },
|
||
// label: {
|
||
// color: "#fff",
|
||
// fontSize: 16,
|
||
// formatter: function (params) {
|
||
// return params.name + params.value
|
||
// },
|
||
// rich: {
|
||
// white: {
|
||
// fontSize: 20,
|
||
// padding: [10, 0, 0, 0],
|
||
// },
|
||
// },
|
||
// },
|
||
// nodeGap: 10,
|
||
// layoutIterations: 1,
|
||
// emphasis: {
|
||
// // focus: "adjacency",
|
||
// },
|
||
// data: [
|
||
// { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
|
||
// { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
// { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
// { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
// { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
// { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
// ],
|
||
// links: [
|
||
// // L1→L3 4509
|
||
// { source: "总量", target: "柴油", value: 1200 },
|
||
// { source: "总量", target: "电", value: 1200 },
|
||
// { source: "总量", target: "原材料", value: 1200 },
|
||
// { source: "总量", target: "煤", value: 1200 },
|
||
// // L1→L2→L3 2404
|
||
// { source: "电", target: "1", value: 300 },
|
||
// { source: "电", target: "2", value: 300 },
|
||
// { source: "电", target: "3", value: 300 },
|
||
// { source: "煤", target: "11", value: 300 },
|
||
// { source: "煤", target: "22", value: 300 },
|
||
// { source: "煤", target: "33", value: 300 },
|
||
// { source: "柴油", target: "111", value: 300 },
|
||
// { source: "柴油", target: "222", value: 300 },
|
||
// { source: "柴油", target: "333", value: 300 },
|
||
// { source: "原材料", target: "1111", value: 300 },
|
||
// { source: "原材料", target: "2222", value: 300 },
|
||
// { source: "原材料", target: "3333", value: 300 },
|
||
// ],
|
||
// },
|
||
// },
|
||
};
|
||
},
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
// window.vuplex.postMessage({
|
||
// type: "Tog",
|
||
// message: "碳资产管理_true",
|
||
// });
|
||
window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
|
||
this.$router.push('/tzcgl');
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
getbing() {
|
||
var trafficWay = [{
|
||
name: '1号生产线',
|
||
value: 73.02
|
||
}, {
|
||
name: '2号生产线',
|
||
value: 12.6
|
||
}, {
|
||
name: '3号生产线',
|
||
value: 171.49
|
||
}];
|
||
var data = [];
|
||
var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push({
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
shadowBlur: 20,
|
||
borderColor: color[i],
|
||
shadowColor: color[i]
|
||
}
|
||
}
|
||
}, {
|
||
value: 6,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
color: 'rgba(0, 0, 0, 0)',
|
||
borderColor: 'rgba(0, 0, 0, 0)',
|
||
borderWidth: 0
|
||
}
|
||
}
|
||
});
|
||
}
|
||
var seriesOption = [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
radius: [115, 119],
|
||
center:["36%","56%"],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
color: '#ddd',
|
||
formatter: function (params) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var k = 0; k < trafficWay.length; k++) {
|
||
total += trafficWay[k].value;
|
||
}
|
||
percent = ((params.value / total) * 100).toFixed(0);
|
||
if (params.name !== '') {
|
||
if(params.name=="1号生产线"){
|
||
return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
|
||
}else if(params.name == "2号生产线"){
|
||
return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
|
||
}else{
|
||
return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
|
||
}
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
rich: {
|
||
colors1: {
|
||
color: color[0],
|
||
fontSize: 40,
|
||
align: "left",
|
||
},
|
||
colors2: {
|
||
color: color[2],
|
||
fontSize: 40,
|
||
align: "left",
|
||
},
|
||
colors3: {
|
||
color: color[1],
|
||
fontSize: 40,
|
||
align: "left",
|
||
},
|
||
names: {
|
||
color: "#fff",
|
||
fontSize: 30,
|
||
}
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 30,
|
||
length2: 60,
|
||
show: true,
|
||
color: '#00ffff'
|
||
}
|
||
}
|
||
},
|
||
data: data
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["43%", "45%"],
|
||
center: ["36%", "56%"],
|
||
animation: false,
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
value: 100,
|
||
},
|
||
],
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
//label线的长度
|
||
show: true, //数据标签引导线
|
||
showAbove: true,
|
||
length: 40,
|
||
length2: 20,
|
||
lineStyle: { cap: "round" },
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#3BC5EF",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
startAngle: 90,
|
||
radius: "36%",
|
||
animation: false,
|
||
hoverAnimation: false,
|
||
center: ["36%", "56%"],
|
||
itemStyle: {
|
||
normal: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(50,171,241, 0)",
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(50,171,241, .4)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(55,70,130, 0)",
|
||
},
|
||
]),
|
||
shadowBlur: 60,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
},
|
||
],
|
||
}
|
||
];
|
||
let option = {
|
||
// backgroundColor: '#0A2E5D',
|
||
color: color,
|
||
title: {
|
||
text: '257.1t',
|
||
top: '52%',
|
||
textAlign: "center",
|
||
left: "36%",
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 32,
|
||
fontWeight: '400'
|
||
}
|
||
},
|
||
graphic: {
|
||
elements: [{
|
||
type: "image",
|
||
z: 3,
|
||
style: {
|
||
// image: "transparent",
|
||
width: 178,
|
||
height: 178
|
||
},
|
||
left: 'center',
|
||
top: 'center',
|
||
position: [100, 100]
|
||
}]
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
legend: {
|
||
itemWidth:16,
|
||
itemHeight:16,
|
||
icon: "rect",
|
||
orient: '',
|
||
x: 'right',
|
||
data: [
|
||
{
|
||
name: '1号生产线',
|
||
value: "13.68"
|
||
},
|
||
{
|
||
name: '2号生产线',
|
||
value: "13.68"
|
||
},
|
||
{
|
||
name: '3号生产线',
|
||
value: "13.68"
|
||
}],
|
||
itemGap: 200,
|
||
left: 760,
|
||
bottom: 120,
|
||
align: 'left',
|
||
formatter: ((name) => {
|
||
const item = trafficWay.filter((item) => item.name === name)[0];
|
||
if(name=="1号生产线"){
|
||
return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
|
||
}else if(name=="2号生产线"){
|
||
return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
|
||
}else{
|
||
return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
|
||
}
|
||
}),
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: 28,
|
||
// color: "#fff",
|
||
},
|
||
num1: {
|
||
fontSize: 32,
|
||
color: color[0],
|
||
},
|
||
num2: {
|
||
fontSize: 32,
|
||
color: color[2],
|
||
},
|
||
num3: {
|
||
fontSize: 32,
|
||
color: color[1],
|
||
}
|
||
},
|
||
},
|
||
itemGap: 20
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
series: seriesOption
|
||
}
|
||
let chartDom = document.getElementById("pfzb");
|
||
let myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
getcalendar() {
|
||
if(message=="prev-month"){
|
||
this.$refs.getcalendar.selectDate("prev-month")
|
||
}else if(message=="next-month"){
|
||
this.$refs.getcalendar.selectDate("next-month")
|
||
}else{
|
||
this.$refs.getcalendar.selectDate("today")
|
||
}
|
||
console.log(this.$refs.getcalendar)
|
||
}
|
||
},
|
||
created() {
|
||
// if (window.vuplex) {
|
||
// addMessageListener();
|
||
// } else {
|
||
// window.addEventListener("vuplexready", addEventListener);
|
||
// } function addEventListener() {
|
||
// window.vuplex.addEventListener("message", function (event) {
|
||
// let json = event.data;
|
||
// console.log("JSON received" + json);
|
||
// })
|
||
// }
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("tpfqd", this.option1);
|
||
this.defineEcharts("sstpf", this.option2);
|
||
// this.defineEcharts("tlt", this.option3);
|
||
this.$nextTick(() => {
|
||
this.getbing();
|
||
})
|
||
// this.defineEcharts("nysl", this.option3);
|
||
// this.defineEcharts("nhfx", this.option4);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
display: flex;
|
||
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
|
||
padding-top: 400px;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.a {
|
||
position: absolute;
|
||
width: 1300px;
|
||
z-index: 2;
|
||
top: 420px;
|
||
right: 480px;
|
||
z-index: 100;
|
||
|
||
img {
|
||
margin-right: 102px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.slbjzl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30px;
|
||
|
||
p {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
}
|
||
|
||
.data {
|
||
// position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
// right: 0;
|
||
// top: 120px;
|
||
z-index: 1;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%);
|
||
}
|
||
}
|
||
}
|
||
|
||
#slbjzl {
|
||
margin-top: 20px;
|
||
width: 1151px;
|
||
height: 342px;
|
||
// background: #37433F;
|
||
background: url(../../assets/TZCGL/背景框4.png);
|
||
background-size: cover;
|
||
opacity: 0.6;
|
||
padding-top: 27px;
|
||
box-sizing: border-box;
|
||
|
||
.first_one {
|
||
display: flex;
|
||
margin-top: 52px;
|
||
justify-content: space-around;
|
||
|
||
.one {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #3CFF1C;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 100px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 42px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
|
||
.two {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #29D7EA;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 100px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 42px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
|
||
.three {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #3CFF1C;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 120px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 42px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
|
||
.four {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #29D7EA;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 100px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 42px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tlt {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
.top{
|
||
position: absolute;
|
||
top: 102px;
|
||
left: 20px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
font-family: MicrosoftYaHei;
|
||
}
|
||
#tlt {
|
||
width: 1155px;
|
||
height: 720px;
|
||
margin-top: 50px;
|
||
background: url(../../assets/liutu/碳2.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
font-family: MicrosoftYaHei;
|
||
}
|
||
}
|
||
|
||
.tpfl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#tpfl {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
width: 123px;
|
||
text-align: center;
|
||
height: 38px;
|
||
background: linear-gradient(to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(37, 138, 210, 1) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%);
|
||
opacity: 1;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
|
||
.img {
|
||
width: 29px;
|
||
cursor: pointer;
|
||
height: 31px;
|
||
opacity: 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.tpfqd {
|
||
position: relative;
|
||
margin-top: 130px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 50px;
|
||
|
||
#tpfqd {
|
||
width: 1156px;
|
||
height: 600px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sstpf {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#sstpf {
|
||
width: 1155px;
|
||
height: 600px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.pfzb {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#pfzb {
|
||
width: 1155px;
|
||
height: 400px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .calendars {
|
||
.title_rl {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
width: 300px;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
p.lan {
|
||
font-size: 27px;
|
||
color: #31D3D1 !important;
|
||
}
|
||
|
||
.el-calendar {
|
||
background: transparent;
|
||
}
|
||
|
||
.el-calendar__header {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-calendar__body {
|
||
padding: 0px;
|
||
font-size: 27px;
|
||
background: transparent;
|
||
}
|
||
|
||
.el-calendar-table .el-calendar-day {
|
||
height: 50px !important;
|
||
}
|
||
|
||
.el-calendar__body .el-calendar-table__row .current {
|
||
width: 151px;
|
||
height: 90px;
|
||
text-align: center;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
border: 1px solid #0E86D9;
|
||
margin: 20px;
|
||
}
|
||
|
||
.el-calendar__body .el-calendar-table__row .prev,
|
||
.el-calendar__body .el-calendar-table__row .next {
|
||
width: 151px;
|
||
height: 90px;
|
||
text-align: center;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
border: 1px solid #445050;
|
||
}
|
||
|
||
.is-selected {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 本月的样式 */
|
||
.current,
|
||
.prev,
|
||
.next {
|
||
color: #fff;
|
||
margin: 5px;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
|
||
}
|
||
|
||
/* 上月和下月*/
|
||
|
||
|
||
.el-calendar-table .el-calendar-day:hover {
|
||
// background: linear-gradient(#22702B 0%, #57FF5B 100%);
|
||
background: transparent !important;
|
||
height: 113px; //要去掉2px边框
|
||
}
|
||
|
||
.el-calendar-table__row {
|
||
.current {
|
||
width: 195px;
|
||
height: 115px;
|
||
}
|
||
}
|
||
|
||
.el-calendar-table td:hover {
|
||
background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
|
||
}
|
||
|
||
.el-calendar-table td.is-selected {
|
||
background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
|
||
}
|
||
}
|
||
</style>
|
||
|