2024-10-30 双碳管理
This commit is contained in:
parent
5a0e953334
commit
83cd1c2025
BIN
src/assets/images/construction/Group 4413.png
Normal file
BIN
src/assets/images/construction/Group 4413.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/assets/images/construction/Group 4558.png
Normal file
BIN
src/assets/images/construction/Group 4558.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/images/construction/Group 45582.png
Normal file
BIN
src/assets/images/construction/Group 45582.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/images/construction/Group 4709.png
Normal file
BIN
src/assets/images/construction/Group 4709.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/images/construction/Group 5550.png
Normal file
BIN
src/assets/images/construction/Group 5550.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
BIN
src/assets/images/construction/Group 5600.png
Normal file
BIN
src/assets/images/construction/Group 5600.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
BIN
src/assets/images/construction/形状结合.png
Normal file
BIN
src/assets/images/construction/形状结合.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@ -97,6 +97,11 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
// name: "工程概况-1",
|
||||
// component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue")
|
||||
// },
|
||||
{
|
||||
path: "/projectioter",
|
||||
name: "双碳管理",
|
||||
component: () => import("@/views/sevenLargeScreen/constructionview/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/smartPartyBuilding",
|
||||
name: "智慧党建",
|
||||
|
||||
20
src/stores/modules/publicdata.ts
Normal file
20
src/stores/modules/publicdata.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { defineStore, createPinia } from "pinia"
|
||||
|
||||
|
||||
export const PublicDataer = defineStore({
|
||||
id: "PublicDataer",
|
||||
|
||||
// 数据
|
||||
state: (): PublicDataer => ({
|
||||
// 数据
|
||||
construction: false
|
||||
}),
|
||||
|
||||
// 方法
|
||||
actions: {
|
||||
async ConstructionSwitch() {
|
||||
this.construction = !this.construction;
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
@ -0,0 +1,590 @@
|
||||
<template>
|
||||
<div class="bottomleft-box">
|
||||
<div class="bole-left">
|
||||
<div v-if="reload" id="btlTypeone" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="bole-right">
|
||||
<div class="bol-title">
|
||||
<div class="bol-item"></div>
|
||||
</div>
|
||||
<div class="bol-statis">
|
||||
<div class="bolst-box">
|
||||
<div class="bst-left">累计减碳量</div>
|
||||
<div class="bst-con">
|
||||
<div class="bstc-item">1</div>
|
||||
<div class="bstc-item">0</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-item">7</div>
|
||||
<div class="bstc-itemer">.</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-item">7</div>
|
||||
</div>
|
||||
<div class="bst-right">tC02</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bol-echer">
|
||||
<div v-if="reload" id="bolecherTypeone" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
const reload = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
reload.value = true;
|
||||
nextTick(() => {
|
||||
getlttopContainercoss();
|
||||
getlttopbolecher();
|
||||
});
|
||||
});
|
||||
|
||||
// 树状图
|
||||
const lineX = reactive(["1号", "2号", "3号", "4号", "5号", "6号", "7号"]);
|
||||
const dataone = reactive([200, 150, 146, 120, 140, 160, 50]);
|
||||
const datatwo = reactive([150, 140, 130, 110, 150, 160, 20]);
|
||||
|
||||
const getlttopContainercoss = () => {
|
||||
const chartContainer = echarts.init(document.getElementById("btlTypeone"));
|
||||
const option = {
|
||||
// 提示框
|
||||
tooltip: {
|
||||
//触发类型
|
||||
trigger: "axis",
|
||||
// 提示框的背景颜色
|
||||
backgroundColor: "rgba(173, 198, 255, 0.50)",
|
||||
// 提示框边框厚度
|
||||
borderWidth: 0,
|
||||
// 提示款边框颜色
|
||||
borderColor: "#ccc",
|
||||
// 提示框字体颜色
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
// 选中数据时x-y轴样式
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
// 小方块
|
||||
label: {
|
||||
// 小方块背景颜色
|
||||
backgroundColor: "#6a7985"
|
||||
// backgroundColor: '#e10602'
|
||||
// 小方块字体颜色
|
||||
// color: '#e10602'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
//字体样式
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
|
||||
},
|
||||
//图标形状
|
||||
icon: "roundRect",
|
||||
orient: "horizontal",
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
right: "10%",
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
// 单位
|
||||
name: "dkjflk",
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: ["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"],
|
||||
axisTick: {
|
||||
show: false
|
||||
// length:7
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#7AADFF ",
|
||||
fontSize: 8
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.08)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
min: 0, // 设置y轴最小值
|
||||
max: 100, // 设置y轴最大值
|
||||
interval: 20, // 设置间隔为20
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10,
|
||||
formatter: function (value) {
|
||||
return value + " %"; // 在每个标签后加上百分号
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "rgba(2, 29, 159, 0.7)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "生活区",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
// 鼠标在图例上的效果
|
||||
emphasis: {
|
||||
// 选中这条数据，隐藏其他数据
|
||||
// focus: 'series'
|
||||
},
|
||||
data: [0, 0, 0, 0, 0, 0, 0],
|
||||
// 折线变得圆滑
|
||||
smooth: true,
|
||||
// 把点去掉
|
||||
showSymbol: false,
|
||||
// 折线颜色
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: "#a07b3f"
|
||||
// color: '#1e1e1e'
|
||||
},
|
||||
// 标头-颜色
|
||||
itemStyle: {
|
||||
color: "#a07b3f"
|
||||
// color: '#1e1e1e'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(50, 197, 255, 0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(55, 167, 232, 0.4)"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "展馆区",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
// focus: 'series'
|
||||
},
|
||||
data: [0, 0, 12, 0, 50, 40, 0],
|
||||
// 折线变得圆滑
|
||||
smooth: true,
|
||||
// 把点去掉
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: "#5392b2"
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#5392b2"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(50, 197, 255, 0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(55, 167, 232, 0.4)"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "施工区",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
// 鼠标在图例上的效果
|
||||
emphasis: {
|
||||
// 选中这条数据，隐藏其他数据
|
||||
// focus: 'series'
|
||||
},
|
||||
data: [60, 48, 20, 40, 40, 30, 0],
|
||||
// 折线变得圆滑
|
||||
smooth: true,
|
||||
// 把点去掉
|
||||
showSymbol: false,
|
||||
// 折线颜色
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: "#32C5FF"
|
||||
// color: '#1e1e1e'
|
||||
},
|
||||
// 标头-颜色
|
||||
itemStyle: {
|
||||
color: "#32C5FF"
|
||||
// color: '#1e1e1e'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(50, 197, 255, 0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(55, 167, 232, 0.4)"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "办公区",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
// focus: 'series'
|
||||
},
|
||||
data: [20, 20, 10, 20, 5, 19, 0],
|
||||
// 折线变得圆滑
|
||||
smooth: true,
|
||||
// 把点去掉
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: "#0368FF"
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#0368FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(50, 197, 255, 0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(55, 167, 232, 0.4)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chartContainer.setOption(option);
|
||||
};
|
||||
|
||||
const devicenet = reactive([
|
||||
{
|
||||
a: "光伏发电",
|
||||
b: 300,
|
||||
c: 4
|
||||
},
|
||||
{
|
||||
a: "绿色建材",
|
||||
b: 250,
|
||||
c: 25
|
||||
},
|
||||
{
|
||||
a: "垃圾资源化",
|
||||
b: 430,
|
||||
c: 0
|
||||
},
|
||||
{
|
||||
a: "专陪减碳",
|
||||
b: 350,
|
||||
c: 0
|
||||
}
|
||||
]);
|
||||
const getlttopbolecher = () => {
|
||||
// 在线设备
|
||||
let online = devicenet.map(v => Number(v.b));
|
||||
let bartitle = devicenet.map(v => v.a);
|
||||
const chartContainer = echarts.init(document.getElementById("bolecherTypeone"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "1%",
|
||||
left: "3%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
name: "tCO2", //红色箭头效果
|
||||
type: "value",
|
||||
axisTick: {
|
||||
show: false
|
||||
// length:7
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#15396f"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 15
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#fff", // 字体颜色
|
||||
fontSize: 15, // 字体大小
|
||||
// fontWeight: "bold", // 字体粗细
|
||||
align: "center" // 对齐方式
|
||||
// lineHeight: 20 // 行高
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#15396f"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["光伏发电", "绿色建材", "垃圾资源化", "装配式减碳"],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#15396f"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14, // 设置文字大小为14
|
||||
margin: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#15396f"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "#15396f"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: [300, 280, 450, 380],
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(74, 181, 232, 0)" // 渐变起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(74, 181, 232, 1)" // 渐变结束颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
graphic: [
|
||||
{
|
||||
type: "image",
|
||||
z: 100,
|
||||
style: {
|
||||
image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
position: [310, 11] // 第一个柱子的位置
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
z: 100,
|
||||
style: {
|
||||
image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
position: [350, 59] // 第一个柱子的位置
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
z: 100,
|
||||
style: {
|
||||
image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
position: [246, 105] // 第一个柱子的位置
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
z: 100,
|
||||
style: {
|
||||
image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
position: [260, 154] // 第一个柱子的位置
|
||||
}
|
||||
]
|
||||
};
|
||||
chartContainer.setOption(option);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottomleft-box {
|
||||
width: 96%;
|
||||
height: 94%;
|
||||
// background: red;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
|
||||
.bole-left {
|
||||
flex: 1;
|
||||
// background: skyblue;
|
||||
}
|
||||
|
||||
.bole-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background: skyblue;
|
||||
|
||||
.bol-title {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.bol-item {
|
||||
width: 90%;
|
||||
height: 21px;
|
||||
background: url("@/assets/images/construction/Group 4413.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bol-statis {
|
||||
margin: 20px 0 30px;
|
||||
|
||||
// background: skyblue;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.bolst-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.bst-left,
|
||||
.bst-right {
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bst-con {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.bstc-item {
|
||||
width: 26px;
|
||||
height: 32px;
|
||||
background: rgba(39, 88, 192, 0.1);
|
||||
box-shadow: inset 0px 0px 1px 1px #051220;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid rgba(39, 88, 192, 0.6);
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-family: Let "s go Digital, Let" s go Digital;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #4ac0f3;
|
||||
// line-height: 30px;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.bstc-itemer {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bol-echer {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="botright-box">
|
||||
<div class="botrbox">
|
||||
<div class="botbox-item">
|
||||
<div class="botboxitem-one">
|
||||
<div class="boxionitile">实际碳排放</div>
|
||||
<div class="bstc-item">1</div>
|
||||
<div class="bstc-item">0</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-itemer">.</div>
|
||||
<div class="bstc-item">7</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-item">7</div>
|
||||
<div class="boxionitile">tC02</div>
|
||||
</div>
|
||||
|
||||
<div class="botboxitem-one">
|
||||
<div class="boxionitile">实际碳排放</div>
|
||||
<div class="bstc-item">1</div>
|
||||
<div class="bstc-item">0</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-itemer">.</div>
|
||||
<div class="bstc-item">7</div>
|
||||
<div class="bstc-item">4</div>
|
||||
<div class="bstc-item">7</div>
|
||||
<div class="boxionitile">tC02</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="botrstatic">
|
||||
<div class="botrstic-one">范围一 1.05%</div>
|
||||
<div class="botrstic-one">范围二 1.05%</div>
|
||||
<div class="botrstic-one">范围三 1.05%</div>
|
||||
<div class="botrstic-two">范围一 1.05%</div>
|
||||
<div class="botrstic-two">范围二 1.05%</div>
|
||||
<div class="botrstic-two">范围三 1.05%</div>
|
||||
</div>
|
||||
<div class="botrcon">
|
||||
<div v-if="reload" id="botrcontainercoss" style="width:100%;height:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
const reload = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
console.log("===============执行右下角==================");
|
||||
reload.value = true;
|
||||
nextTick(() => {
|
||||
getlttopContainercoss();
|
||||
});
|
||||
});
|
||||
|
||||
// 树状图
|
||||
let y = reactive([150, 230, 224, 218, 135, 147, 260]);
|
||||
let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
|
||||
|
||||
const getlttopContainercoss = () => {
|
||||
const chartContainer = echarts.init(document.getElementById("botrcontainercoss"));
|
||||
const option = {
|
||||
// 提示框
|
||||
tooltip: {
|
||||
//触发类型
|
||||
trigger: "axis",
|
||||
// 提示框的背景颜色
|
||||
backgroundColor: "rgba(173, 198, 255, 0.50)",
|
||||
|
||||
// 提示框边框厚度
|
||||
borderWidth: 0,
|
||||
// 提示款边框颜色
|
||||
borderColor: "#ccc",
|
||||
// 提示框字体颜色
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
// 选中数据时x-y轴样式
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
// 小方块
|
||||
label: {
|
||||
// 小方块背景颜色
|
||||
backgroundColor: "#6a7985"
|
||||
// backgroundColor: '#e10602'
|
||||
// 小方块字体颜色
|
||||
// color: '#e10602'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ["line", "bar"] },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
// top:"3%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x,
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
// length:7
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#7AADFF ",
|
||||
fontSize: 8
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "rgba(2, 29, 159, 0.7)"
|
||||
}
|
||||
},
|
||||
name: "排放量tCO2", // 添加单位名称
|
||||
nameLocation: "end", // 将单位名称放在y轴的最上面
|
||||
nameTextStyle: {
|
||||
color: "#fff", // 设置单位名称的颜色
|
||||
fontSize: 14 // 设置单位名称的字体大小
|
||||
}
|
||||
}
|
||||
// {
|
||||
// type: "value",
|
||||
// name: "Temperature",
|
||||
// min: 0,
|
||||
// max: 25,
|
||||
// interval: 5,
|
||||
// axisLabel: {
|
||||
// formatter: "{value} °C"
|
||||
// }
|
||||
// }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "施工区",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "辆";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#71d7e5" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#71d7e5" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#71d7e5" } // 渐变结束颜色
|
||||
]
|
||||
},
|
||||
barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "15%", // 设置柱子宽度为50%
|
||||
data: [35, 50, 75, 40, 30, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "办公区",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + " 辆";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#fda52e" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#fda52e" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#fda52e" } // 渐变结束颜色
|
||||
]
|
||||
},
|
||||
barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "15%", // 设置柱子宽度为50%
|
||||
|
||||
data: [50, 40, 20, 30, 45, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "实测值",
|
||||
type: "line",
|
||||
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#d38c30" // 设置线条颜色为蓝色
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
data: [50, 40, 20, 30, 45, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "预测值",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#7ec4d5" // 设置线条颜色为红色
|
||||
},
|
||||
lineStyle: {
|
||||
type: "dashed" // 设置线条为虚线
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
data: [35, 50, 75, 40, 30, 0, 0]
|
||||
}
|
||||
]
|
||||
};
|
||||
chartContainer.setOption(option);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.botright-box {
|
||||
width: 96%;
|
||||
height: 94%;
|
||||
// background: red;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.botrbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background: skyblue;
|
||||
|
||||
.botbox-item {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.botboxitem-one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.boxionitile {
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bstc-item {
|
||||
width: 26px;
|
||||
height: 32px;
|
||||
background: rgba(39, 88, 192, 0.1);
|
||||
box-shadow: inset 0px 0px 1px 1px #051220;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid rgba(39, 88, 192, 0.6);
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-family: Let "s go Digital, Let" s go Digital;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #4ac0f3;
|
||||
// line-height: 30px;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.bstc-itemer {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.botrstatic {
|
||||
height: 32px;
|
||||
margin: 20px 0;
|
||||
// background: skyblue;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.botrstic-two,
|
||||
.botrstic-one {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-family: PangMenZhengDao, PangMenZhengDao;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
// line-height: 19px;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 4px 4px #01131f;
|
||||
}
|
||||
|
||||
.botrstic-one {
|
||||
background: url("@/assets/images/construction/Group 45582.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.botrstic-two {
|
||||
background: url("@/assets/images/construction/Group 4558.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.botrcon {
|
||||
flex: 1;
|
||||
// background: skyblue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div class="topCenterion">
|
||||
<div class="tp-left">
|
||||
<div v-if="reload" id="lefttTypeone" style="width: 100%; height: 97%"></div>
|
||||
|
||||
<div class="item-title">
|
||||
<p></p>分区用电占比
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tp-right">
|
||||
<div class="tpright-title">
|
||||
<div class="tr-itone">能源类型</div>
|
||||
<div class="tr-ittwo">
|
||||
今日用量
|
||||
<p>kw-h</p>
|
||||
</div>
|
||||
<div class="tr-itthere">
|
||||
当月总用量
|
||||
<p>kw-h</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tprig-item statichead">
|
||||
<div class="tr-itone">
|
||||
<div class="tr-itonitem">1号配电房<br>2号表用电</div>
|
||||
</div>
|
||||
<div class="tr-ittwo">97.40</div>
|
||||
<div class="tr-itthere">274207.20</div>
|
||||
</div>
|
||||
|
||||
<div class="tprig-item">
|
||||
<div class="tr-itone">
|
||||
<div class="tr-itonitem">办公区</div>
|
||||
</div>
|
||||
<div class="tr-ittwo">--</div>
|
||||
<div class="tr-itthere">62641.30</div>
|
||||
</div>
|
||||
<div class="tprig-item">
|
||||
<div class="tr-itone">
|
||||
<div class="tr-itonitem">生活区</div>
|
||||
</div>
|
||||
<div class="tr-ittwo">247.00</div>
|
||||
<div class="tr-itthere">373150.00</div>
|
||||
</div>
|
||||
<div class="tprig-item">
|
||||
<div class="tr-itone">
|
||||
<div class="tr-itonitem">加工厂</div>
|
||||
</div>
|
||||
<div class="tr-ittwo">--</div>
|
||||
<div class="tr-itthere">18908.00</div>
|
||||
</div>
|
||||
<div class="tprig-item">
|
||||
<div class="tr-itone">
|
||||
<div class="tr-itonitem">加工厂</div>
|
||||
</div>
|
||||
<div class="tr-ittwo">--</div>
|
||||
<div class="tr-itthere">18908.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
import { datas } from "../../../../enums/company/SetpsEnum";
|
||||
|
||||
const reload = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
reload.value = true;
|
||||
nextTick(() => {
|
||||
drawEcharter();
|
||||
});
|
||||
});
|
||||
|
||||
function drawEcharter() {
|
||||
let echartsTest = echarts.init(document.getElementById("lefttTypeone"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#000000",
|
||||
borderColor: "#000000",
|
||||
formatter: function (params) {
|
||||
console.log(params.seriesName, "当前图例");
|
||||
// let result = " " + params.marker + params.name + " : " + params.value;
|
||||
// if (params.seriesName == "数据主体") {
|
||||
// return result;
|
||||
// }
|
||||
|
||||
return `${params.seriesName} `;
|
||||
},
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 933085,
|
||||
subtext: "总用电 kw/h",
|
||||
x: "48%",
|
||||
y: "60%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 400,
|
||||
fontSize: 24,
|
||||
color: "#FFFFFF",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
color: "#A1ACCB"
|
||||
// fontFamily: "Source Han Sans CN"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: "13%",
|
||||
top: "15%",
|
||||
data: ["办公区", "展馆区", "施工区", "生活区"],
|
||||
itemGap: 14,
|
||||
itemWidth: 12, // 设置宽度
|
||||
itemHeight: 12, // 设置高度
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["48%", "65%"],
|
||||
radius: "98%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "办公区",
|
||||
type: "pie",
|
||||
color: ["#82fbea"],
|
||||
selectedMode: "single",
|
||||
radius: ["50%", "55%"],
|
||||
center: ["48%", "65%"],
|
||||
label: {
|
||||
show: false,
|
||||
position: "inner",
|
||||
fontSize: 14
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 160, name: "", itemStyle: { color: "#09255c" } },
|
||||
{ value: 240, name: "", itemStyle: { color: "#82fbea" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "展馆区",
|
||||
type: "pie",
|
||||
color: ["#6375c7"],
|
||||
selectedMode: "single",
|
||||
radius: ["59%", "64%"],
|
||||
center: ["48%", "65%"],
|
||||
label: {
|
||||
show: false,
|
||||
position: "inner",
|
||||
fontSize: 14
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: "", itemStyle: { color: "#09255c" } },
|
||||
{ value: 300, name: "", itemStyle: { color: "#6375c7" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "施工区",
|
||||
type: "pie",
|
||||
color: ["#4cc4f8"],
|
||||
selectedMode: "single",
|
||||
radius: ["68%", "73%"],
|
||||
center: ["48%", "65%"],
|
||||
label: {
|
||||
show: false,
|
||||
position: "inner",
|
||||
fontSize: 14
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 50, name: "", itemStyle: { color: "#09255c" } },
|
||||
{ value: 350, name: "办公区", itemStyle: { color: "#4cc4f8" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "生活区",
|
||||
type: "pie",
|
||||
color: ["#eea959"],
|
||||
selectedMode: "single",
|
||||
radius: ["77%", "82%"],
|
||||
center: ["48%", "65%"],
|
||||
label: {
|
||||
show: false,
|
||||
position: "inner",
|
||||
fontSize: 14
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: "", itemStyle: { color: "#09255c" } },
|
||||
{ value: 370, name: "", itemStyle: { color: "#eea959" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topCenterion {
|
||||
width: 96% !important;
|
||||
height: 94%;
|
||||
// background: red;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
|
||||
.tp-left {
|
||||
width: 235px;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
// background: skyblue;
|
||||
position: relative;
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 19px;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
margin-right: 10px;
|
||||
transform: rotate(137deg); /* 旋转90度 */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #82fbea 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tp-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
// background: skyblue;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tpright-title,
|
||||
.tprig-item {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.tr-itone {
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.tr-ittwo {
|
||||
flex: 2;
|
||||
// background: skyblue;
|
||||
}
|
||||
|
||||
.tr-itthere {
|
||||
flex: 3;
|
||||
// background: skyblue;
|
||||
}
|
||||
}
|
||||
.tpright-title {
|
||||
// background: skyblue;
|
||||
border: 1px solid #00366b;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
color: #04abff;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tr-itone {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tr-ittwo {
|
||||
border-left: 1px solid #00366b;
|
||||
border-right: 1px solid #00366b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tr-itthere {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tprig-item {
|
||||
// background: yellow;
|
||||
background: rgba(1, 128, 254, 0.1);
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
border: 1px solid #012549;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #e2f9ff;
|
||||
|
||||
.tr-itone {
|
||||
.tr-itonitem {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background: skyblue;
|
||||
background: url("@/assets/images/construction/形状结合.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tr-itone,
|
||||
.tr-itthere,
|
||||
.tr-ittwo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tr-ittwo {
|
||||
border-left: 1px solid #012549;
|
||||
border-right: 1px solid #012549;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,907 @@
|
||||
<template>
|
||||
<div class="lefttop">
|
||||
<div class="lt-top">
|
||||
<div v-if="reload" id="lttopContainercoss" style="width:100%;height:100%"></div>
|
||||
</div>
|
||||
<div class="lt-bottom">
|
||||
<div class="lib-item">
|
||||
<div v-if="reload" id="lttTypeone" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="lib-itemer">
|
||||
<div v-if="reload" id="lttTypeoneer" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
const reload = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
reload.value = true;
|
||||
nextTick(() => {
|
||||
getlttopContainercoss();
|
||||
drawEchart();
|
||||
drawEcharter();
|
||||
});
|
||||
});
|
||||
|
||||
// 树状图
|
||||
let y = reactive([150, 230, 224, 218, 135, 147, 260]);
|
||||
let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
|
||||
|
||||
const getlttopContainercoss = () => {
|
||||
const chartContainer = echarts.init(document.getElementById("lttopContainercoss"));
|
||||
const option = {
|
||||
// 提示框
|
||||
tooltip: {
|
||||
//触发类型
|
||||
trigger: "axis",
|
||||
// 提示框的背景颜色
|
||||
backgroundColor: "rgba(173, 198, 255, 0.50)",
|
||||
// 提示框边框厚度
|
||||
borderWidth: 0,
|
||||
// 提示款边框颜色
|
||||
borderColor: "#ccc",
|
||||
// 提示框字体颜色
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
// 选中数据时x-y轴样式
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
// 小方块
|
||||
label: {
|
||||
// 小方块背景颜色
|
||||
backgroundColor: "#6a7985"
|
||||
// backgroundColor: '#e10602'
|
||||
// 小方块字体颜色
|
||||
// color: '#e10602'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ["line", "bar"] },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
//字体样式
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
|
||||
},
|
||||
//图标形状
|
||||
icon: "roundRect",
|
||||
orient: "horizontal",
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
top: 0
|
||||
// data: ["超速车辆"]
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
// length:7
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#7AADFF ",
|
||||
fontSize: 8
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "rgba(2, 29, 159, 0.7)"
|
||||
}
|
||||
},
|
||||
name: "tCO2", // 添加单位名称
|
||||
nameLocation: "end", // 将单位名称放在y轴的最上面
|
||||
nameTextStyle: {
|
||||
color: "#fff", // 设置单位名称的颜色
|
||||
fontSize: 14 // 设置单位名称的字体大小
|
||||
}
|
||||
}
|
||||
// {
|
||||
// type: "value",
|
||||
// name: "Temperature",
|
||||
// min: 0,
|
||||
// max: 25,
|
||||
// interval: 5,
|
||||
// axisLabel: {
|
||||
// formatter: "{value} °C"
|
||||
// }
|
||||
// }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "施工区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#74d5e7" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#74d5e7" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#74d5e7" } // 渐变结束颜色
|
||||
]
|
||||
}
|
||||
// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [40, 30, 28, 40, 65, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "生活区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#c3c684" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#c3c684" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#c3c684" } // 渐变结束颜色
|
||||
]
|
||||
}
|
||||
// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [5, 0, 8, 5, 0, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "办公区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#ffa52e" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#ffa52e" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#ffa52e" } // 渐变结束颜色
|
||||
]
|
||||
}
|
||||
// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [5, 22, 8, 40, 15, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "展馆区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#81f279" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#81f279" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#81f279" } // 渐变结束颜色
|
||||
]
|
||||
},
|
||||
barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [0, 10, 5, 30, 15, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "实测值",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#d38c30" // 设置线条颜色为蓝色
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
data: [50, 40, 20, 30, 45, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "预测值",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#7ec4d5" // 设置线条颜色为红色
|
||||
},
|
||||
lineStyle: {
|
||||
type: "dashed" // 设置线条为虚线
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
data: [35, 50, 75, 40, 30, 0, 0]
|
||||
}
|
||||
]
|
||||
};
|
||||
chartContainer.setOption(option);
|
||||
};
|
||||
|
||||
// 圆形图
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 38,
|
||||
show: true,
|
||||
name: "玻璃幕墙",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 46,
|
||||
show: true,
|
||||
name: "钢材",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EEA959",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "钢筋",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4CC4F8"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "混凝土",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#E0D838"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
show: true,
|
||||
name: "砂浆",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
show: true,
|
||||
name: "加气砖",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7"
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
function drawEchart() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("lttTypeone"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#000000",
|
||||
borderColor: "#000000",
|
||||
formatter: function (params) {
|
||||
// console.log(params.seriesName, "当前图例");
|
||||
let result = " " + params.marker + params.name + " : " + params.value;
|
||||
if (params.seriesName == "数据主体") {
|
||||
return result;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "建材生产总数",
|
||||
x: "47%",
|
||||
y: "35%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
fontWeight: "normal",
|
||||
fontFamily: "sadigitalNumber",
|
||||
// lineHeight: 35
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// selectedMode: false, // 取消图例上的点击事件
|
||||
// icon: "rect",
|
||||
// type: "plain",
|
||||
// // type: "scroll", // 设置为滚动类型
|
||||
// orient: "vertical",
|
||||
// left: "52%",
|
||||
// top: "8%",
|
||||
// align: "left",
|
||||
// itemGap: 14,
|
||||
// itemWidth: 8, // 设置宽度
|
||||
// itemHeight: 7, // 设置高度
|
||||
// symbolKeepAspect: false,
|
||||
// textStyle: {
|
||||
// color: "#000",
|
||||
// rich: {
|
||||
// name: {
|
||||
// width: 190,
|
||||
// verticalAlign: "right",
|
||||
// fontSize: 14,
|
||||
// color: "#FFFFFF",
|
||||
// padding: [0, 0, 0, 10]
|
||||
// },
|
||||
// value: {
|
||||
// align: "left",
|
||||
// fontSize: 14,
|
||||
// color: "#FFFFFF"
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: dataList.value.map(item => {
|
||||
// if (item.show) {
|
||||
// return item.name;
|
||||
// }
|
||||
// }),
|
||||
// formatter: function (data: any) {
|
||||
// if (dataList.value && dataList.value.length) {
|
||||
// for (let i = 0; i < dataList.value.length; i++) {
|
||||
// if (data === dataList.value[i].name) {
|
||||
// let value = dataList.value[i].value;
|
||||
// return "{name|" + data + "}" + "{value|" + value + "}";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["50%", "50%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["50%", "50%"],
|
||||
radius: "77%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "数据主体",
|
||||
type: "pie",
|
||||
radius: ["58%", "64%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
name: "最内圆",
|
||||
type: "pie",
|
||||
radius: ["52%", "54%"],
|
||||
center: ["50%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
|
||||
function drawEcharter() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("lttTypeoneer"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#000000",
|
||||
borderColor: "#000000",
|
||||
formatter: function (params) {
|
||||
// console.log(params.seriesName, "当前图例");
|
||||
let result = " " + params.marker + params.name + " : " + params.value;
|
||||
if (params.seriesName == "数据主体") {
|
||||
return result;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "建材运输总数",
|
||||
x: "24%",
|
||||
y: "35%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
fontWeight: "normal",
|
||||
fontFamily: "sadigitalNumber",
|
||||
// lineHeight: 35
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
left: "52%",
|
||||
top: "8%",
|
||||
align: "left",
|
||||
itemGap: 14,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
width: 100,
|
||||
verticalAlign: "right",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF",
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data: any) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (let i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
return "{name|" + data + "}" + "{value|" + value + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "52%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "52%"],
|
||||
radius: "77%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "数据主体",
|
||||
type: "pie",
|
||||
radius: ["58%", "64%"],
|
||||
center: ["25%", "52%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
name: "最内圆",
|
||||
type: "pie",
|
||||
radius: ["52%", "54%"],
|
||||
center: ["25%", "52%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lefttop {
|
||||
width: 96%;
|
||||
height: 94%;
|
||||
// background: red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
|
||||
.lt-top {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
// background: skyblue;
|
||||
}
|
||||
|
||||
.lt-bottom {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.lib-item {
|
||||
flex: 1;
|
||||
// background: skyblue;
|
||||
}
|
||||
|
||||
.lib-itemer {
|
||||
flex: 2;
|
||||
// background: skyblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div class="topright-box">
|
||||
<div class="tr-top">
|
||||
<div v-if="reload" id="torgContainercoss" style="width:100%;height:100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="tr-bottom">
|
||||
<div class="trbot-item">
|
||||
<p>展厅</p>
|
||||
<p>11.90</p>
|
||||
<p>tCO2</p>
|
||||
</div>
|
||||
<div class="trbot-item">
|
||||
<p>办公区</p>
|
||||
<p>29.56</p>
|
||||
<p>tCO2</p>
|
||||
</div>
|
||||
<div class="trbot-item">
|
||||
<p>生活区</p>
|
||||
<p>94.85</p>
|
||||
<p>tCO2</p>
|
||||
</div>
|
||||
<div class="trbot-item">
|
||||
<p>施工区</p>
|
||||
<p>336.35</p>
|
||||
<p>tCO2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
const reload = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
reload.value = true;
|
||||
nextTick(() => {
|
||||
getlrigContainercoss();
|
||||
});
|
||||
});
|
||||
|
||||
// 树状图
|
||||
let y = reactive([150, 230, 224, 218, 135, 147, 260]);
|
||||
let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
|
||||
|
||||
const getlrigContainercoss = () => {
|
||||
const chartContainer = echarts.init(document.getElementById("torgContainercoss"));
|
||||
const option = {
|
||||
// 提示框
|
||||
tooltip: {
|
||||
//触发类型
|
||||
trigger: "axis",
|
||||
// 提示框的背景颜色
|
||||
backgroundColor: "rgba(173, 198, 255, 0.50)",
|
||||
// 提示框边框厚度
|
||||
borderWidth: 0,
|
||||
// 提示款边框颜色
|
||||
borderColor: "#ccc",
|
||||
// 提示框字体颜色
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
// 选中数据时x-y轴样式
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
// 小方块
|
||||
label: {
|
||||
// 小方块背景颜色
|
||||
backgroundColor: "#6a7985"
|
||||
// backgroundColor: '#e10602'
|
||||
// 小方块字体颜色
|
||||
// color: '#e10602'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ["line", "bar"] },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
//字体样式
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
|
||||
},
|
||||
//图标形状
|
||||
icon: "roundRect",
|
||||
orient: "horizontal",
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
top: 0
|
||||
// data: ["超速车辆"]
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
// length:7
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#7AADFF ",
|
||||
fontSize: 8
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
margin: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(32, 121, 160, 0.3)"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "rgba(2, 29, 159, 0.7)"
|
||||
}
|
||||
},
|
||||
name: "tCO2", // 添加单位名称
|
||||
nameLocation: "end", // 将单位名称放在y轴的最上面
|
||||
nameTextStyle: {
|
||||
color: "#fff", // 设置单位名称的颜色
|
||||
fontSize: 14 // 设置单位名称的字体大小
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "施工区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#74d5e7" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#74d5e7" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#74d5e7" } // 渐变结束颜色
|
||||
]
|
||||
}
|
||||
// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [40, 30, 28, 40, 65, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "办公区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#ffa52e" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#ffa52e" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#ffa52e" } // 渐变结束颜色
|
||||
]
|
||||
}
|
||||
// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [40, 48, 52, 28, 25, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "展馆区",
|
||||
stack: "total", // 设置堆叠组名
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return (value as number) + "tCO2";
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#81f279" }, // 渐变开始颜色
|
||||
{ offset: 0.5, color: "#81f279" }, // 渐变中间颜色
|
||||
{ offset: 1, color: "#81f279" } // 渐变结束颜色
|
||||
]
|
||||
},
|
||||
barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
|
||||
},
|
||||
barWidth: "22%", // 设置柱子宽度为50%
|
||||
|
||||
data: [20, 15, 25, 40, 22, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "实测值",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#d38c30" // 设置线条颜色为蓝色
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
data: [50, 40, 20, 30, 45, 0, 0]
|
||||
},
|
||||
{
|
||||
name: "预测值",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#7ec4d5" // 设置线条颜色为红色
|
||||
},
|
||||
lineStyle: {
|
||||
type: "dashed" // 设置线条为虚线
|
||||
},
|
||||
symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
|
||||
symbolSize: 30, // 设置图片大小
|
||||
// 把点去掉
|
||||
data: [35, 50, 75, 40, 30, 0, 0]
|
||||
}
|
||||
]
|
||||
};
|
||||
chartContainer.setOption(option);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topright-box {
|
||||
width: 96%;
|
||||
height: 94%;
|
||||
// background: red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
|
||||
.tr-top {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
// background: skyblue;
|
||||
}
|
||||
|
||||
.tr-bottom {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.trbot-item {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: url("@/assets/images/construction/Group 4709.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(3) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #a0b8e5;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-family: D-DIN-DIN, D-DIN-DIN;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-stroke: 0px #ffffff;
|
||||
color: #ffffff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/views/sevenLargeScreen/constructionview/index.vue
Normal file
123
src/views/sevenLargeScreen/constructionview/index.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="safe-education">
|
||||
<div class="top">
|
||||
<div class="topLeft itembox">
|
||||
<div class="title-speed">建材生产与运输阶段碳排放</div>
|
||||
<div class="title-con">
|
||||
<TopLeft />
|
||||
</div>
|
||||
</div>
|
||||
<div class="topCenter itembox">
|
||||
<div class="title-speed">低碳技术应用碳减量</div>
|
||||
<div class="title-con">
|
||||
<TopCenter />
|
||||
</div>
|
||||
</div>
|
||||
<div class="topRight itembox">
|
||||
<div class="title-speed">施工阶段碳排放</div>
|
||||
<div class="title-con">
|
||||
<TopRight />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft itembox">
|
||||
<div class="title-speed">原始数据动态监测</div>
|
||||
<div class="title-con">
|
||||
<BottomLeft />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomRight itembox">
|
||||
<div class="title-speed">项目总体碳排放</div>
|
||||
<div class="title-con">
|
||||
<BottomRight />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import TopLeft from "./components/TopLeft.vue";
|
||||
import TopCenter from "./components/TopCenter.vue";
|
||||
import TopRight from "./components/TopRight.vue";
|
||||
import BottomLeft from "./components/BottomLeft.vue";
|
||||
import BottomRight from "./components/BottomRight.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.safe-education {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.itembox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title-speed {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 35px;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.title-con {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: skyblue;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 52%;
|
||||
display: flex;
|
||||
.topLeft {
|
||||
width: 33.5%;
|
||||
// background: skyblue;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 33%;
|
||||
}
|
||||
.topRight {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 46%;
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 49%;
|
||||
margin-right: 1%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 50%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -279,6 +279,10 @@ let menuList = ref([
|
||||
menuName: "智慧党建",
|
||||
companyPath: "/smartPartyBuilding"
|
||||
},
|
||||
{
|
||||
menuName: "双碳管理",
|
||||
companyPath: "/projectioter"
|
||||
},
|
||||
// {
|
||||
// menuName: "工程概况-1",
|
||||
// companyPath: "/projectOverviewer"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user