2054 lines
55 KiB
Vue
2054 lines
55 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="qybjzl">
|
||
<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="qybjzl">
|
||
<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>257.1</p>
|
||
<p>熟料</p>
|
||
</div>
|
||
</div>
|
||
<div class="second_one">
|
||
<div class="one">
|
||
<p>2641.76</p>
|
||
<p>粉磨</p>
|
||
</div>
|
||
<div class="two">
|
||
<p>0</p>
|
||
<p>辅助生产系统</p>
|
||
</div>
|
||
<div class="three">
|
||
<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="qiyou">
|
||
<p>汽油<span class="count">18.31</span></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="d_po">破碎<span class="count">747.24</span></div>
|
||
<div class="d_fen">粉磨站<span class="count">128.53</span></div>
|
||
<div class="d_fzgj">辅助工具<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="chai_ydy">移动源<span class="count">747.24</span></div>
|
||
<div class="qi_ydy">移动源<span class="count">747.24</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 class="data">
|
||
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
|
||
>年</span
|
||
>
|
||
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||
>月</span
|
||
>
|
||
</div>
|
||
<div id="tpfl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="pfzb">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>各类排放占比</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="pfzb"></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="tzh">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳中和</p>
|
||
</div>
|
||
<div id="tzh">
|
||
<div class="chart-container">
|
||
<div class="chart" ref="chart"></div>
|
||
<!-- 底座背景 -->
|
||
<div class="bg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { getPie3D, getParametricEquation } from "../../utils/fhgl";
|
||
const color = ["#099FE3", "#00DBEB", "#50F4C1"];
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "年",
|
||
res1: "年",
|
||
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: {
|
||
legend: {
|
||
data: [{ icon: "rect", name: "碳排放量" }],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: [
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"12:20",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"13:20",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"14:20",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"15:20",
|
||
],
|
||
axisTick: {
|
||
interval: 0, // 设置刻度点连续显示
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
// interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:tCO2",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 40,
|
||
interval: 10, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
name: "碳排放量",
|
||
data: [
|
||
15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
|
||
28, 21, 32, 24,
|
||
],
|
||
// smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#21EF06",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#21EF06", //折线颜色
|
||
},
|
||
areaStyle: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: "#0C3431" },
|
||
{ offset: 0.5, color: "#198522" },
|
||
{ offset: 0, color: "#18881C" },
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
markPoint: {
|
||
// data: [{ type: "max", name: "Max" }],
|
||
label: {
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 15,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
// nodeWidth:120,
|
||
layoutIterations: 0,
|
||
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%",
|
||
draggable: false,
|
||
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,
|
||
emphasis: {
|
||
// focus: "adjacency",
|
||
},
|
||
data: [
|
||
{
|
||
name: "总量",
|
||
value: "2641.76",
|
||
itemStyle: { color: "#5FE3D9" },
|
||
depth: 0,
|
||
},
|
||
{
|
||
name: "煤",
|
||
value: "28.51",
|
||
itemStyle: { color: "#55A9CE" },
|
||
depth: 1,
|
||
},
|
||
{
|
||
name: "电",
|
||
value: "871",
|
||
itemStyle: { color: "#55A9CE" },
|
||
depth: 1,
|
||
},
|
||
{
|
||
name: "柴油",
|
||
value: "329",
|
||
itemStyle: { color: "#55A9CE" },
|
||
depth: 1,
|
||
},
|
||
{
|
||
name: "汽油",
|
||
value: "18.31",
|
||
itemStyle: { color: "#55A9CE" },
|
||
depth: 1,
|
||
},
|
||
{
|
||
name: "原材料",
|
||
value: "255",
|
||
itemStyle: { color: "#55A9CE" },
|
||
depth: 1,
|
||
},
|
||
//1
|
||
{
|
||
name: "1号生产线",
|
||
value: "747.24",
|
||
id: "1",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "2号生产线",
|
||
value: "128.53",
|
||
id: "2",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "3号生产线",
|
||
value: "114.19",
|
||
id: "3",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
//2
|
||
{
|
||
name: "1号生产线",
|
||
value: "747.24",
|
||
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: "破碎",
|
||
value: "747.24",
|
||
id: "44",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "粉磨站",
|
||
value: "128.53",
|
||
id: "55",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "辅助办公",
|
||
value: "114.19",
|
||
id: "66",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
//3
|
||
{
|
||
name: "1号生产线",
|
||
value: "747.24",
|
||
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: "移动源",
|
||
value: "747.24",
|
||
id: "444",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
//4
|
||
{
|
||
name: "移动源",
|
||
value: "747.24",
|
||
id: "1111",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
//5
|
||
{
|
||
name: "1号生产线",
|
||
value: "747.24",
|
||
id: "11111",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "2号生产线",
|
||
value: "28.51",
|
||
id: "22222",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
{
|
||
name: "3号生产线",
|
||
value: "28.51",
|
||
id: "33333",
|
||
itemStyle: { color: "#52DBF1" },
|
||
depth: 2,
|
||
},
|
||
],
|
||
links: [
|
||
// L1→L3 4509
|
||
{ source: "总量", target: "煤", value: 1800 },
|
||
{ source: "总量", target: "电", value: 3600 },
|
||
{ source: "总量", target: "柴油", value: 2400 },
|
||
{ source: "总量", target: "汽油", value: 800 },
|
||
{ source: "总量", target: "原材料", value: 1800 },
|
||
// 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: "44", value: 300 },
|
||
{ source: "电", target: "55", value: 300 },
|
||
{ source: "电", target: "66", value: 300 },
|
||
|
||
{ source: "柴油", target: "111", value: 300 },
|
||
{ source: "柴油", target: "222", value: 300 },
|
||
{ source: "柴油", target: "333", value: 300 },
|
||
{ source: "柴油", target: "444", value: 300 },
|
||
|
||
{ source: "汽油", target: "1111", value: 400 },
|
||
|
||
{ source: "原材料", target: "11111", value: 300 },
|
||
{ source: "原材料", target: "22222", value: 300 },
|
||
{ source: "原材料", target: "33333", value: 300 },
|
||
],
|
||
},
|
||
},
|
||
optionData: [
|
||
{
|
||
name: "城市垃圾",
|
||
value: 176,
|
||
},
|
||
{
|
||
name: "余热发电",
|
||
value: 288,
|
||
},
|
||
{
|
||
name: "光伏",
|
||
value: 88,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
// window.vuplex.postMessage({
|
||
// type: "Tog",
|
||
// message: "碳资产管理_true",
|
||
// });
|
||
window.vuplex.postMessage("碳资产管理");
|
||
this.$router.push("/tzcglsl");
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
getbing() {
|
||
var trafficWay = [
|
||
{
|
||
name: "原煤",
|
||
value: 73.02,
|
||
},
|
||
{
|
||
name: "原材料",
|
||
value: 12.6,
|
||
},
|
||
{
|
||
name: "电",
|
||
value: 171.49,
|
||
},
|
||
];
|
||
var data = [];
|
||
var labels = "";
|
||
// var index = 0;
|
||
var color = [
|
||
"#7EFAB7",
|
||
"#55A9CE",
|
||
"#53DCF1",
|
||
];
|
||
trafficWay.forEach((item, index) => {
|
||
data.push(
|
||
{
|
||
value: item.value,
|
||
name: item.name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
shadowBlur: 20,
|
||
borderColor: color[index],
|
||
shadowColor: color[index],
|
||
color: color[index],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
value: 15,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
color: "rgba(0, 0, 0, 0)",
|
||
borderColor: "rgba(0, 0, 0, 0)",
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
}
|
||
);
|
||
labels = {
|
||
show: true,
|
||
position: "outside",
|
||
color: "#fff",
|
||
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=="原煤"){
|
||
return (
|
||
"{colors1|" +
|
||
percent +
|
||
"%" +
|
||
"}" +
|
||
"\n" +
|
||
"\n" +
|
||
"{names|" +
|
||
params.name +
|
||
"}"
|
||
);
|
||
}else if(params.name=="电"){
|
||
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,
|
||
},
|
||
},
|
||
};
|
||
});
|
||
var seriesOption = [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
clockWise: false,
|
||
radius: [195, 199],
|
||
center: ["36%", "50%"],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: labels,
|
||
labelLine: {
|
||
length: 20,
|
||
length2: 60,
|
||
show: true,
|
||
color: "#00ffff",
|
||
},
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
];
|
||
let option = {
|
||
// backgroundColor: '#0A2E5D',
|
||
color: color,
|
||
title: {
|
||
text: "257.1t",
|
||
top: "48%",
|
||
textAlign: "center",
|
||
left: "36%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 36,
|
||
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: "原煤",
|
||
value: "13.68",
|
||
},
|
||
{
|
||
name: "原材料",
|
||
value: "13.68",
|
||
},
|
||
{
|
||
name: "电",
|
||
value: "13.68",
|
||
},
|
||
],
|
||
left: 800,
|
||
bottom: 240,
|
||
align: "left",
|
||
formatter: (name) => {
|
||
const item = trafficWay.filter((item) => item.name === name)[0];
|
||
if(name=="原煤"){
|
||
return (
|
||
`\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
|
||
`{num1|${item.value}t}`
|
||
);
|
||
}else if(name=="电"){
|
||
return (
|
||
`\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
|
||
`{num2|${item.value}t}`
|
||
);
|
||
}else{
|
||
return (
|
||
`\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
|
||
`{num3|${item.value}t}`
|
||
);
|
||
}
|
||
|
||
// return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: 24,
|
||
color: "#fff",
|
||
},
|
||
num1: {
|
||
fontSize: 28,
|
||
color: color[0],
|
||
},
|
||
num2: {
|
||
fontSize: 28,
|
||
color: color[2],
|
||
},
|
||
num3: {
|
||
fontSize: 28,
|
||
color: color[1],
|
||
},
|
||
},
|
||
},
|
||
itemGap: 20,
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: seriesOption,
|
||
};
|
||
let chartDom = document.getElementById("pfzb");
|
||
let myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
tpfl() {
|
||
const offsetX = 24; //bar宽
|
||
const offsetY = 8; //倾斜角度
|
||
// 绘制左侧面
|
||
const CubeLeft = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
// console.log(shape);
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
||
// const c3 = [shape.x, shape.y - offsetX];
|
||
const c3 = [shape.x, shape.y - offsetY * 2];
|
||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
this.$echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
this.$echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
|
||
let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
|
||
//拿到最大值
|
||
// const maxValue = Math.max(...seriesData);
|
||
|
||
let colorArr = [
|
||
["#0A67FF"],
|
||
["#10C6FF", "rgba(60,113,255,1)"],
|
||
["#0774D6", "rgba(17,94,213,1)"],
|
||
];
|
||
let option = {
|
||
// legend: {
|
||
// data: [
|
||
// {
|
||
// icon: "rect",
|
||
// name: "炭排放量",
|
||
// },
|
||
// ],
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: "20px",
|
||
// },
|
||
// },
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
const item = params[1];
|
||
return item.name + " : " + item.value;
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xAxisData,
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20,
|
||
color: "#fff",
|
||
margin: 15,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:t",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
// boundaryGap: ['20%', '20%'],
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
name: "碳排放量",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[1][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[2][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[2][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[0][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[0][0],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: seriesData,
|
||
},
|
||
{
|
||
type: "bar",
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: "top",
|
||
// formatter: (e) => {
|
||
// return e.value === maxValue ? e.value : "";
|
||
// },
|
||
fontSize: 20,
|
||
color: "#11C3FF",
|
||
offset: [0, -15],
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
tooltip: {},
|
||
data: seriesData,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("tpfl", option);
|
||
},
|
||
// 初始化label样式
|
||
setLabel() {
|
||
this.optionData.forEach((item, index) => {
|
||
item.itemStyle = {
|
||
color: color[index],
|
||
};
|
||
item.label = {
|
||
normal: {
|
||
show: true,
|
||
color: color[index],
|
||
position: "right",
|
||
// distance:-10,
|
||
offset: [0, 3],
|
||
formatter: [
|
||
"{d|{d}%}",
|
||
"————",
|
||
// '{c|{c}}{b|台}',
|
||
"{b|{b}}",
|
||
].join("\n"), // 用\n来换行
|
||
rich: {
|
||
b: {
|
||
lineHeight: 25,
|
||
align: "left",
|
||
fontSize: 30,
|
||
color: "#fff",
|
||
},
|
||
c: {
|
||
fontSize: 22,
|
||
// color: '#fff',
|
||
textShadowColor: "#1c90a6",
|
||
textShadowOffsetX: 0,
|
||
textShadowOffsetY: 2,
|
||
textShadowBlur: 5,
|
||
color: color[index],
|
||
},
|
||
d: {
|
||
color: color[index],
|
||
fontSize: 40,
|
||
align: "left",
|
||
},
|
||
},
|
||
},
|
||
};
|
||
item.labelLine = {
|
||
normal: {
|
||
length2: 200,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: color[index],
|
||
},
|
||
},
|
||
};
|
||
});
|
||
},
|
||
// // 图表初始化
|
||
initChart() {
|
||
this.statusChart = echarts.init(this.$refs.chart);
|
||
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
||
this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
|
||
this.statusChart.setOption(this.option);
|
||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||
this.option.series.push({
|
||
name: "信用评价", //自己根据场景修改
|
||
backgroundColor: "transparent",
|
||
type: "pie",
|
||
label: {
|
||
opacity: 1,
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
},
|
||
startAngle: -40, // 起始角度，支持范围[0, 360]。
|
||
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||
radius: ["20%", "60%"],
|
||
center: ["50%", "50%"],
|
||
data: this.optionData,
|
||
itemStyle: {
|
||
opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
|
||
},
|
||
});
|
||
this.statusChart.setOption(this.option);
|
||
this.bindListen(this.statusChart);
|
||
},
|
||
// // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
|
||
// // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
|
||
bindListen(myChart, optionName = "option") {
|
||
let selectedIndex = "";
|
||
let hoveredIndex = "";
|
||
// 监听点击事件，实现选中效果（单选）
|
||
// myChart.on("click", (params) => {
|
||
// console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
|
||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
||
// const isSelected =
|
||
// !this[optionName].series[params.seriesIndex].pieStatus.selected;
|
||
// const isHovered =
|
||
// this[optionName].series[params.seriesIndex].pieStatus.hovered;
|
||
// const k = this[optionName].series[params.seriesIndex].pieStatus.k;
|
||
// const startRatio =
|
||
// this[optionName].series[params.seriesIndex].pieData.startRatio;
|
||
// const endRatio =
|
||
// this[optionName].series[params.seriesIndex].pieData.endRatio;
|
||
// // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
||
// if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
|
||
// this[optionName].series[selectedIndex].parametricEquation =
|
||
// getParametricEquation(
|
||
// this[optionName].series[selectedIndex].pieData.startRatio,
|
||
// this[optionName].series[selectedIndex].pieData.endRatio,
|
||
// false,
|
||
// false,
|
||
// k,
|
||
// this[optionName].series[selectedIndex].pieData.value
|
||
// );
|
||
// this[optionName].series[selectedIndex].pieStatus.selected = false;
|
||
// }
|
||
// // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
|
||
// this[optionName].series[params.seriesIndex].parametricEquation =
|
||
// getParametricEquation(
|
||
// startRatio,
|
||
// endRatio,
|
||
// isSelected,
|
||
// isHovered,
|
||
// k,
|
||
// this[optionName].series[params.seriesIndex].pieData.value
|
||
// );
|
||
// this[optionName].series[params.seriesIndex].pieStatus.selected =
|
||
// isSelected;
|
||
// // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
|
||
// selectedIndex = isSelected ? params.seriesIndex : null;
|
||
// // 使用更新后的 option，渲染图表
|
||
// myChart.setOption(this[optionName]);
|
||
// });
|
||
// 监听 mouseover，近似实现高亮（放大）效果
|
||
myChart.on("mouseover", (params) => {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
|
||
if (hoveredIndex === params.seriesIndex) {
|
||
// 否则进行高亮及必要的取消高亮操作
|
||
} else {
|
||
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
|
||
isSelected =
|
||
this[optionName].series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
startRatio =
|
||
this[optionName].series[hoveredIndex].pieData.startRatio;
|
||
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
|
||
k = this[optionName].series[hoveredIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
this[optionName].series[hoveredIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[hoveredIndex].pieData.value
|
||
);
|
||
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
||
if (
|
||
params.seriesName !== "mouseoutSeries" &&
|
||
params.seriesName !== "信用评价"
|
||
) {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected =
|
||
this[optionName].series[params.seriesIndex].pieStatus.selected;
|
||
isHovered = true;
|
||
startRatio =
|
||
this[optionName].series[params.seriesIndex].pieData.startRatio;
|
||
endRatio =
|
||
this[optionName].series[params.seriesIndex].pieData.endRatio;
|
||
k = this[optionName].series[params.seriesIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
||
this[optionName].series[params.seriesIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[params.seriesIndex].pieData.value + 60
|
||
);
|
||
this[optionName].series[params.seriesIndex].pieStatus.hovered =
|
||
isHovered;
|
||
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
||
hoveredIndex = params.seriesIndex;
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(this[optionName]);
|
||
}
|
||
});
|
||
// 修正取消高亮失败的 bug
|
||
myChart.on("globalout", () => {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
k = this[optionName].series[hoveredIndex].pieStatus.k;
|
||
startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
|
||
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
this[optionName].series[hoveredIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[hoveredIndex].pieData.value
|
||
);
|
||
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(this[optionName]);
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
this.setLabel();
|
||
// 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("sstpf", this.option1);
|
||
// this.defineEcharts("tlt", this.option2);
|
||
this.$nextTick(() => {
|
||
this.getbing();
|
||
this.tpfl();
|
||
this.initChart();
|
||
});
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
|
||
.qybjzl {
|
||
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%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
#qybjzl {
|
||
margin-top: 20px;
|
||
width: 1151px;
|
||
height: 511px;
|
||
background: url(../../assets/TZCGL/背景框6.png);
|
||
background-size: cover;
|
||
// background: #37433F;
|
||
opacity: 0.6;
|
||
padding-top: 27px;
|
||
box-sizing: border-box;
|
||
|
||
.first_one {
|
||
display: flex;
|
||
margin-top: 20px;
|
||
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;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
|
||
.two {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #4ab0dd;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1186.png);
|
||
}
|
||
|
||
.three {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #39d7ee;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
}
|
||
|
||
.second_one {
|
||
display: flex;
|
||
margin-top: 27px;
|
||
justify-content: space-around;
|
||
|
||
// align-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;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
|
||
.two {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #4ab0dd;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 120px;
|
||
margin-left: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1186.png);
|
||
}
|
||
|
||
.three {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #39d7ee;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 80px;
|
||
margin-left: 50px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tlt {
|
||
position: relative;
|
||
margin-top: 30px;
|
||
|
||
.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: 760px;
|
||
margin-top: 50px;
|
||
background: url(../../assets/liutu/碳1.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
font-family: MicrosoftYaHei;
|
||
}
|
||
.zong {
|
||
position: absolute;
|
||
left: 56px;
|
||
top: 400px;
|
||
.count {
|
||
color: #5ffff3;
|
||
}
|
||
}
|
||
.mei {
|
||
position: absolute;
|
||
left: 456px;
|
||
top: 28px;
|
||
.count {
|
||
color: #48c4fb;
|
||
}
|
||
}
|
||
.dian {
|
||
position: absolute;
|
||
left: 456px;
|
||
top: 228px;
|
||
.count {
|
||
color: #48c4fb;
|
||
}
|
||
}
|
||
.chaiyou {
|
||
position: absolute;
|
||
left: 456px;
|
||
top: 456px;
|
||
.count {
|
||
color: #48c4fb;
|
||
}
|
||
}
|
||
.qiyou {
|
||
position: absolute;
|
||
left: 456px;
|
||
top: 585px;
|
||
.count {
|
||
margin-left: 20px;
|
||
color: #48c4fb;
|
||
}
|
||
}
|
||
.ycl {
|
||
position: absolute;
|
||
left: 456px;
|
||
top: 668px;
|
||
.count {
|
||
color: #48c4fb;
|
||
}
|
||
}
|
||
|
||
.m_one {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 0px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.m_two {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 45px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.m_three {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 90px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_one {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 140px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_two {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 185px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_three {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 230px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_po {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 270px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_fen {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 310px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.d_fzgj {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 355px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.chai_one {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 405px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.chai_two {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 450px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.chai_three {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 495px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.chai_ydy {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 535px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.qi_ydy {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 585px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.ycl_one {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 640px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.ycl_two {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 680px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
.ycl_three {
|
||
position: absolute;
|
||
left: 846px;
|
||
top: 725px;
|
||
.count {
|
||
margin-left: 30px;
|
||
color: #52dbf1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tpfl {
|
||
position: relative;
|
||
margin-top: 40px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.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%
|
||
);
|
||
}
|
||
}
|
||
|
||
#tpfl {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.pfzb {
|
||
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;
|
||
|
||
#pfzb {
|
||
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: 630px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.tzh {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
// margin-bottom: 50px;
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#tzh {
|
||
width: 1155px;
|
||
height: 400px;
|
||
margin-top: 50px;
|
||
|
||
.chart-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 600px;
|
||
|
||
.chart {
|
||
z-index: 1;
|
||
}
|
||
|
||
.chart,
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bg {
|
||
position: absolute;
|
||
bottom: 38px;
|
||
left: 50%;
|
||
z-index: 0;
|
||
height: 400px;
|
||
width: 720px;
|
||
background: no-repeat center;
|
||
// background-image: url("~@/assets/imgs/piebg.png");
|
||
background: center top url("../../assets/img/底盘.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|