2072 lines
55 KiB
Vue
2072 lines
55 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="title">
|
||
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
|
||
<div class="title_tit">
|
||
<p>山东需求响应工作开展情况</p>
|
||
</div>
|
||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||
</div>
|
||
<div class="containter">
|
||
<div class="left">
|
||
<div class="ndqyyh">
|
||
<p class="title">省综代理用户情况</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">2,356<span class="tit_danwei">户</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>工业户数</p>
|
||
<p class="tb_percent">324<span style="color: #fff">户</span></p>
|
||
</div>
|
||
<div>
|
||
<p>楼宇户数</p>
|
||
<p class="tb_percent">452<span style="color: #fff">户</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="qyyh"></div>
|
||
</div>
|
||
<div class="ndsdl">
|
||
<p class="title">年度售电量</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">520<span class="tit_danwei">万KW</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>削锋量</p>
|
||
<p class="tb_percent">
|
||
78.2<span style="color: #fff">万KW</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>填谷量</p>
|
||
<p class="tb_percent">
|
||
30.2<span style="color: #fff">万KW</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="ndsdl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="ndsdje">
|
||
<p class="title">需求响应补贴收益</p>
|
||
<div id="ndsdje">
|
||
<div class="infos" v-for="(item, index) in lists" :key="index">
|
||
<div class="first">
|
||
<p>
|
||
<span class="titles">{{ item.title }}</span>
|
||
</p>
|
||
<p class="money">
|
||
{{ item.money }}<span class="danwei">万元</span>
|
||
</p>
|
||
</div>
|
||
<div class="second">
|
||
<div class="s_tit">
|
||
<div>
|
||
<p>工业占比</p>
|
||
<p class="tb_percent">
|
||
{{ item.tb }}%
|
||
<img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>楼宇占比</p>
|
||
<p class="tb_percent">
|
||
{{ item.hb }}%
|
||
<img src="../assets/zhsdy/325数值上升(1).png" alt="" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="bigBox">
|
||
<div
|
||
class="smallBox"
|
||
:style="{ width: `${item.percent}px` }"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="infos" v-for="(item, index) in lists2" :key="index">
|
||
<div class="first">
|
||
<p>
|
||
<span class="titles">{{ item.title }}</span>
|
||
</p>
|
||
<p class="money">
|
||
{{ item.money }}<span class="danwei">万元</span>
|
||
</p>
|
||
</div>
|
||
<div class="first">
|
||
<p>
|
||
<span class="titles">{{ item.title2 }}</span>
|
||
</p>
|
||
<p class="money">
|
||
{{ item.money2 }}<span class="danwei">万元</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pcfx">
|
||
<p class="title">需求响应执行分析</p>
|
||
<div id="pcfx">
|
||
<div class="pc_tit" v-for="(item, index) in pclist" :key="index">
|
||
<div class="pc_l">
|
||
<span class="pc_name">{{ item.name }}</span>
|
||
<span class="pc_count">{{ item.count }}</span>
|
||
<span class="pc_danwei">{{ item.danwei }}</span>
|
||
</div>
|
||
<div class="pc_r">
|
||
<p>响应成功率</p>
|
||
<p class="tb_percent">{{ item.hb }}%</p>
|
||
</div>
|
||
</div>
|
||
<div id="pcfxb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="yhhyzb">
|
||
<p class="title">响应资源占比分析</p>
|
||
<div id="yhhyzb">
|
||
<div class="xyzy1">
|
||
<p>用户类型占比</p>
|
||
<div id="gongye"></div>
|
||
</div>
|
||
<div class="xyzy2">
|
||
<p>响应类型占比</p>
|
||
<div id="xuefeng"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
<div class="footer">
|
||
<div class="ndqylfb">
|
||
<p class="title">用户资源分布情况</p>
|
||
<div id="ndqylfb"></div>
|
||
</div>
|
||
<div class="ggzcxx">
|
||
<p class="title">山东需求侧响应动态热点</p>
|
||
<div id="ggzcxx">
|
||
<ul>
|
||
<li v-for="(item, index) in infos">
|
||
<img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
|
||
<span class="times">{{ item.time }}</span>
|
||
<span class="info">{{ item.info }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
const fontSizeRem = (size) => {
|
||
const clientWidth =
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth;
|
||
if (!clientWidth) return;
|
||
let fontSize = clientWidth / 1920; //尺寸大小
|
||
return size * fontSize;
|
||
};
|
||
import * as echarts from "echarts";
|
||
// import { fontSizeRem } from "../assets/function";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "日",
|
||
type: "电",
|
||
option1: {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
color: "#CFE3FC",
|
||
},
|
||
borderWidth: 1,
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
right: "5%",
|
||
left: "8%",
|
||
bottom: "13%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
name: "",
|
||
type: "category",
|
||
data: [
|
||
"济南",
|
||
"烟台",
|
||
"威海",
|
||
"德州",
|
||
"滨州",
|
||
"泰安",
|
||
"临沂",
|
||
"烟台",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: "#e2e9ff",
|
||
textStyle: {
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "单位：户",
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
color: "#e2e9ff",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.12)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
barBorderRadius: [50, 50, 50, 50],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
color: "#CFE3FC",
|
||
},
|
||
borderWidth: 1,
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
right: "5%",
|
||
left: "8%",
|
||
bottom: "13%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
name: "",
|
||
type: "category",
|
||
data: ["2019", "2020", "2021"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: "#e2e9ff",
|
||
textStyle: {
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "单位：户",
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
color: "#e2e9ff",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.12)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [24, 30, 12],
|
||
barWidth: 9,
|
||
barGap: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
barBorderRadius: [50, 50, 50, 50],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "bar",
|
||
data: [35, 18, 24],
|
||
barWidth: 9,
|
||
barGap: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1,197,185,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1,197,185,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
barBorderRadius: [50, 50, 50, 50],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option3: {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
color: "#CFE3FC",
|
||
},
|
||
borderWidth: 1,
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
right: "5%",
|
||
left: "8%",
|
||
bottom: "13%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
formatter: "",
|
||
},
|
||
splitLine: {
|
||
show:false,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.12)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "",
|
||
type: "category",
|
||
data: ["2019", "2020", "2021"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: "#e2e9ff",
|
||
textStyle: {
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show:false,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.12)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "工业",
|
||
type: "bar",
|
||
data: [24, 30, 12],
|
||
barWidth: 9,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
barBorderRadius: [50, 50, 50, 50],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "楼宇",
|
||
type: "bar",
|
||
data: [35, 18, 24],
|
||
barWidth: 9,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1,197,185,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1,197,185,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
barBorderRadius: [50, 50, 50, 50],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
x: "right",
|
||
right: 50,
|
||
itemWidth: 16,
|
||
itemHeight: 4,
|
||
data: [
|
||
{
|
||
icon: "roundRect",
|
||
name: "工业",
|
||
},
|
||
{
|
||
icon: "roundRect",
|
||
name: "楼宇",
|
||
},
|
||
],
|
||
textStyle: {
|
||
fontSize: "0.0729rem",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
option4: {
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// },
|
||
grid: {
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "20%",
|
||
top: "22%",
|
||
// containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
type: "category",
|
||
// boundaryGap: false,
|
||
data: ["2019", "2020", "2021"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: "0.0729rem",
|
||
},
|
||
fontSize: "0.0729rem",
|
||
color: "#fff",
|
||
margin: 15,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// boundaryGap: true,
|
||
name: "单位:次",
|
||
min: 0,
|
||
max: 50,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
padding: 10,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
itemWidth: 16,
|
||
itemHeight: 4,
|
||
data: [
|
||
{
|
||
icon: "rect",
|
||
name: "削锋",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "填谷",
|
||
},
|
||
],
|
||
x: "right",
|
||
y: "top",
|
||
right: 100,
|
||
top: 0,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "削锋",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 2,
|
||
data: [42, 12, 42],
|
||
lineStyle: {
|
||
width: 3,
|
||
color: "#0AA7FF",
|
||
},
|
||
itemStyle: {
|
||
color: "#0AA7FF",
|
||
},
|
||
},
|
||
{
|
||
name: "填谷",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 2,
|
||
data: [30, 1, 30],
|
||
lineStyle: {
|
||
width: 3,
|
||
color: "#23D3D9",
|
||
},
|
||
itemStyle: {
|
||
color: "#23D3D9",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
infos: [
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
],
|
||
lists: [
|
||
{
|
||
title: "需求响应补贴收益",
|
||
money: "1,965",
|
||
tb: "12.23",
|
||
hb: "27.16",
|
||
percent: "120",
|
||
},
|
||
],
|
||
lists2: [
|
||
{
|
||
title: "年度收益金额",
|
||
money: "5,665",
|
||
title2: "填谷补贴收益",
|
||
money2: "452",
|
||
},
|
||
],
|
||
pclist: [
|
||
{
|
||
name: "削锋次数",
|
||
count: "31",
|
||
danwei: "次",
|
||
hb: "95.8",
|
||
},
|
||
{
|
||
name: "填谷次数",
|
||
count: "20",
|
||
danwei: "次",
|
||
hb: "95.8",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom, null, {
|
||
devicePixelRatio: 10, // 设置为2或更高的值
|
||
});
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
gongye() {
|
||
var echartData = [
|
||
{
|
||
value: 85.2,
|
||
name: "工业",
|
||
},
|
||
{
|
||
value: 14.8,
|
||
name: "楼宇",
|
||
},
|
||
];
|
||
var rich = {
|
||
total: {
|
||
color: "#A2C7F3",
|
||
fontSize: "0.0833rem",
|
||
align: "center",
|
||
},
|
||
white: {
|
||
color: "#a2c7f3",
|
||
align: "center",
|
||
fontSize: "0.0625rem",
|
||
padding: [8, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
grid: {
|
||
left: "20%", // 调整饼状图的左边距
|
||
top: "20%", // 调整饼状图的上边距
|
||
right: "20%", // 调整饼状图的右边距
|
||
bottom: "20%", // 调整饼状图的下边距
|
||
},
|
||
title: {
|
||
text: "{percents|" + "85.2%" + "}\n{val|" + "工业" + "}",
|
||
left: "16%",
|
||
top: "40%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
percents: {
|
||
fontSize: "0.0729rem",
|
||
align: "center",
|
||
fontWeight: 700,
|
||
lineHeight: 28,
|
||
color: "#fff",
|
||
},
|
||
val: {
|
||
fontSize: "0.0625rem",
|
||
align: "center",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
x: "right",
|
||
// selectedMode: false,
|
||
formatter: function (name) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var i = 0; i < echartData.length; i++) {
|
||
total += echartData[i].value;
|
||
}
|
||
const item = echartData.filter((item) => item.name === name)[0];
|
||
console.log(item);
|
||
percent = ((item.value / total) * 100).toFixed(2);
|
||
if (name !== "") {
|
||
return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
|
||
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
name: "工业",
|
||
icon: "rect",
|
||
},
|
||
{
|
||
name: "楼宇",
|
||
icon: "rect",
|
||
},
|
||
],
|
||
right: 20,
|
||
top: 60,
|
||
orient: "vertical",
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#",
|
||
rich: {
|
||
name: {
|
||
fontSize: "0.0625rem",
|
||
// color: "#fff",
|
||
},
|
||
num: {
|
||
fontSize: "0.0625rem",
|
||
// color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
center: ["25%", "50%"],
|
||
radius: ["42%", "50%"],
|
||
hoverAnimation: false,
|
||
color: ["#13AAF3", "#6FF0FD"],
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: echartData,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("gongye", option);
|
||
},
|
||
xuefeng() {
|
||
var echartData = [
|
||
{
|
||
value: 85.2,
|
||
name: "削锋",
|
||
},
|
||
{
|
||
value: 14.8,
|
||
name: "填谷",
|
||
},
|
||
];
|
||
var rich = {
|
||
total: {
|
||
color: "#A2C7F3",
|
||
fontSize: "0.0833rem",
|
||
align: "center",
|
||
},
|
||
white: {
|
||
color: "#a2c7f3",
|
||
align: "center",
|
||
fontSize: "0.0625rem",
|
||
// padding: [8, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
grid: {
|
||
left: "20%", // 调整饼状图的左边距
|
||
top: "20%", // 调整饼状图的上边距
|
||
right: "20%", // 调整饼状图的右边距
|
||
bottom: "20%", // 调整饼状图的下边距
|
||
},
|
||
title: {
|
||
text: "{percents|" + "85.2%" + "}\n{val|" + "削锋" + "}",
|
||
left: "16%",
|
||
top: "40%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
percents: {
|
||
fontSize: "0.0729rem",
|
||
align: "center",
|
||
fontWeight: 700,
|
||
lineHeight: 28,
|
||
color: "#fff",
|
||
},
|
||
val: {
|
||
fontSize: "0.0625rem",
|
||
align: "center",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
x: "right",
|
||
// selectedMode: false,
|
||
formatter: function (name) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var i = 0; i < echartData.length; i++) {
|
||
total += echartData[i].value;
|
||
}
|
||
const item = echartData.filter((item) => item.name === name)[0];
|
||
console.log(item);
|
||
percent = ((item.value / total) * 100).toFixed(2);
|
||
if (name !== "") {
|
||
return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
|
||
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
name: "削锋",
|
||
icon: "rect",
|
||
},
|
||
{
|
||
name: "填谷",
|
||
icon: "rect",
|
||
},
|
||
],
|
||
right: 20,
|
||
top: 60,
|
||
orient: "vertical",
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#",
|
||
rich: {
|
||
name: {
|
||
fontSize: "0.0625rem",
|
||
// color: "#fff",
|
||
},
|
||
num: {
|
||
fontSize: "0.0625rem",
|
||
// color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
center: ["25%", "50%"],
|
||
radius: ["42%", "50%"],
|
||
hoverAnimation: false,
|
||
color: ["#13AAF3", "#6FF0FD"],
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: echartData,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("xuefeng", option);
|
||
},
|
||
// 地图
|
||
initMap() {
|
||
//后端返回的数据
|
||
var data = [
|
||
{
|
||
name: "济南市",
|
||
value: 1,
|
||
coord: [117.000923, 36.675807],
|
||
},
|
||
{
|
||
name: "青岛市",
|
||
value: 2,
|
||
coord: [120.382639, 36.067082],
|
||
},
|
||
{
|
||
name: "淄博市",
|
||
value: 3,
|
||
coord: [118.059134, 36.804685],
|
||
},
|
||
{
|
||
name: "枣庄市",
|
||
value: 4,
|
||
coord: [117.557964, 34.856424],
|
||
},
|
||
{
|
||
name: "东营市",
|
||
value: 5,
|
||
coord: [118.674767, 37.434751],
|
||
},
|
||
{
|
||
name: "烟台市",
|
||
value: 6,
|
||
coord: [121.447935, 37.463822],
|
||
},
|
||
{
|
||
name: "潍坊市",
|
||
value: 7,
|
||
coord: [119.161756, 36.706774],
|
||
},
|
||
{
|
||
name: "济宁市",
|
||
value: 8,
|
||
coord: [116.587245, 35.415393],
|
||
},
|
||
{
|
||
name: "泰安市",
|
||
value: 9,
|
||
coord: [117.089415, 36.188078],
|
||
},
|
||
{
|
||
name: "威海市",
|
||
value: 10,
|
||
coord: [122.120419, 37.513068],
|
||
},
|
||
{
|
||
name: "日照市",
|
||
value: 11,
|
||
coord: [119.526888, 35.416377],
|
||
},
|
||
{
|
||
name: "临沂市",
|
||
value: 12,
|
||
coord: [118.356448, 35.104672],
|
||
},
|
||
{
|
||
name: "德州市",
|
||
value: 13,
|
||
coord: [116.357465, 37.434093],
|
||
},
|
||
{
|
||
name: "聊城市",
|
||
value: 14,
|
||
coord: [115.986869, 36.455829],
|
||
},
|
||
{
|
||
name: "滨州市",
|
||
value: 15,
|
||
coord: [118.016974, 37.383542],
|
||
},
|
||
{
|
||
name: "菏泽市",
|
||
value: 16,
|
||
coord: [115.469381, 35.246531],
|
||
},
|
||
];
|
||
var chartDom = document.getElementById("map");
|
||
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
|
||
//注入山东地图数据。
|
||
let src = require("../assets/shandong.json");
|
||
function registerMap() {
|
||
echarts.registerMap("山东", src);
|
||
//拿到json数据
|
||
var mapFeatures = echarts.getMap("山东").geoJson.features;
|
||
var geoCoordMap = {};
|
||
//拿到需要的字段
|
||
mapFeatures.forEach(function (v) {
|
||
// 地区名称
|
||
var name = v.properties.name;
|
||
// 地区经纬度
|
||
geoCoordMap[name] = v.properties.center;
|
||
});
|
||
//在基础数据中加入value字段 并加入到数组中
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
let option = {
|
||
// 动效散点图层，使用2D地图坐标系
|
||
geo: {
|
||
// 2D地图坐标系
|
||
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
|
||
map: "山东",
|
||
roam: false, // 禁用缩放、拖拽
|
||
layoutCenter: ["50%", "50%"], // 地图中心位置
|
||
layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
|
||
aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
|
||
zlevel: 1,
|
||
},
|
||
series: [
|
||
//动态散点系列
|
||
{
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
zlevel: 3,
|
||
rippleEffect: {
|
||
//涟漪特效
|
||
period: 3, //动画时间，值越小速度越快
|
||
brushType: "fill", //波纹绘制方式 stroke, fill
|
||
scale: 5, //波纹圆环最大限制，值越大波纹越大
|
||
},
|
||
symbol: "circle",
|
||
symbolSize: 7,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: "#D8C74A",
|
||
},
|
||
},
|
||
data: [],
|
||
},
|
||
{
|
||
tooltip: {
|
||
trigger: "item",
|
||
// show: false,
|
||
},
|
||
name: "山东",
|
||
type: "map",
|
||
map: "山东",
|
||
boxDepth: 60, //地图倾斜度
|
||
regionHeight: 6, //地图厚度
|
||
aspectScale: 0.9, //地图长宽比
|
||
emphasis: {
|
||
itemStyle: {
|
||
areaColor: "#70EAF4", // 高亮时候地图显示的颜色
|
||
borderWidth: 2, // 高亮时的边框宽度
|
||
},
|
||
label: {
|
||
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
|
||
color: "#fff",
|
||
},
|
||
},
|
||
label: {
|
||
show: true, //是否显示市
|
||
zlevel: 4,
|
||
formatter: function (params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||
return text;
|
||
},
|
||
textStyle: {
|
||
color: "#000", //文字颜色
|
||
fontSize: "0.08rem", //文字大小
|
||
fontFamily: "微软雅黑",
|
||
// backgroundColor: {
|
||
// image: require("../assets/客户侧总体用能情况分析/光标.png"),
|
||
// },
|
||
// backgroundSize: "10px 10px",
|
||
// backgroundPosition: "top left",
|
||
},
|
||
rich: {
|
||
fline: {
|
||
padding: [0, 35],
|
||
color: "#FDCC00",
|
||
fontSize: "0.07rem",
|
||
fontWeight: 600,
|
||
},
|
||
tline: {
|
||
padding: [0, 27],
|
||
color: "#fff",
|
||
fontSize: "0.06rem",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
opacity: 0.8, // 透明度
|
||
borderWidth: 2, //分界线宽度
|
||
borderColor: "#0699E4", //分界线颜色
|
||
areaColor: {
|
||
x: 0.5,
|
||
y: 0.7,
|
||
r: 0.5,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(20,110,230,0.4)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(6,33,121,0.4)",
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
groundplane: {
|
||
show: true,
|
||
},
|
||
data: data,
|
||
z: 999,
|
||
shading: "realistic",
|
||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||
realisticMaterial: {
|
||
detailTexture: "rgb(0, 102, 204)", // 纹理贴图
|
||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
roughness: 0.8, // 调整光照模型的粗糙度
|
||
metalness: 0.0, // 调整金属感，0.0 为非金属
|
||
roughnessAdjust: 0,
|
||
},
|
||
viewControl: {
|
||
distance: 90, // 地图视角 控制初始大小
|
||
rotateSensitivity: 0, // 旋转
|
||
zoomSensitivity: 1.5, // 缩放
|
||
},
|
||
zoom: 1.25,
|
||
},
|
||
],
|
||
animation: true,
|
||
};
|
||
|
||
option.series[0].data = convertData(data); // 设置动效散点数据
|
||
|
||
myChart.setOption(option);
|
||
myChart.on("click", chartClick);
|
||
//点击地图区域事件
|
||
function chartClick(param) {
|
||
console.log(param);
|
||
myChart.setOption(option, false);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
// var selectedPro = param.name;
|
||
// if (!cityProper[selectedPro]) {
|
||
// option.series.splice(1);
|
||
// option.legend = null;
|
||
// option.visualMap = null;
|
||
// myChart.setOption(option, true);
|
||
// return;
|
||
// }
|
||
//获取点击区域数据
|
||
// $.get(cityProper[selectedPro], function (geojson) {
|
||
// echarts.registerMap(selectedPro, geojson);
|
||
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
|
||
// option.series[0] = {
|
||
// name: "",
|
||
// type: "map",
|
||
// map: selectedPro,
|
||
// boxDepth: 80, //地图倾斜度
|
||
// regionHeight: 5, //地图厚度
|
||
// itemStyle: {
|
||
// normal: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// },
|
||
// groundplane: {
|
||
// show: false,
|
||
// },
|
||
// data: data,
|
||
// shading: "realistic",
|
||
// // 真实感材质相关配置 shading: 'realistic'时有效
|
||
// realisticMaterial: {
|
||
// detailTexture: "#fff", // 纹理贴图
|
||
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||
// metalness: 0, // 0材质是非金属 ，1金属
|
||
// roughnessAdjust: 0,
|
||
// },
|
||
// viewControl: {
|
||
// distance: 30, // 地图视角 控制初始大小
|
||
// rotateSensitivity: 1, // 旋转
|
||
// zoomSensitivity: 1, // 缩放
|
||
// },
|
||
// };
|
||
// myChart.setOption(option);
|
||
// });
|
||
}
|
||
}
|
||
registerMap();
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("ndqylfb", this.option1);
|
||
this.defineEcharts("ndsdl", this.option2);
|
||
this.defineEcharts("qyyh", this.option3);
|
||
this.defineEcharts("pcfxb", this.option4);
|
||
this.gongye();
|
||
this.xuefeng();
|
||
this.initMap();
|
||
},
|
||
beforeDestroy() {
|
||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||
window.removeEventListener("resize", this.getResize);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 76px;
|
||
|
||
// margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
.title_tit {
|
||
width: 1600px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-left: -100px;
|
||
margin-right: -20px;
|
||
background: url(../assets/tan/分组\ 7.png);
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
text-align: center;
|
||
p {
|
||
width: 627px;
|
||
height: 47px;
|
||
font-size: 44px;
|
||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 47px;
|
||
letter-spacing: 3px;
|
||
color: #fff;
|
||
margin-left: 490px;
|
||
// margin-left: -50px;
|
||
}
|
||
}
|
||
|
||
img:nth-of-type(1) {
|
||
width: 231px;
|
||
height: 59px;
|
||
}
|
||
|
||
img:nth-of-type(2) {
|
||
width: 158px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
.containter {
|
||
width: 100%;
|
||
height: 967px;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.ndqyyh {
|
||
// height: 27.22vh;
|
||
height: 294px;
|
||
// width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #14adfd;
|
||
line-height: 44px;
|
||
margin-top: 5px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
margin-left: 5px;
|
||
color: #ffffff;
|
||
margin-left: 2px;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 132px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#qyyh {
|
||
width: 100%;
|
||
height: 180px;
|
||
margin-top: 100px;
|
||
}
|
||
}
|
||
|
||
.ndsdl {
|
||
height: 316px;
|
||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #14adfd;
|
||
line-height: 44px;
|
||
margin-top: 5px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
margin-left: 5px;
|
||
color: #ffffff;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 182px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#ndsdl {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.ndsdje {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ndsdje {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 50px;
|
||
|
||
.infos {
|
||
width: 410px;
|
||
height: 104px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url(../assets/zhsdy/组\ 3168.png);
|
||
background-size: cover;
|
||
margin: 0 auto;
|
||
margin-bottom: 15px;
|
||
|
||
.first {
|
||
width: 180px;
|
||
margin-left: 40px;
|
||
p:nth-child(1) {
|
||
width: 180px;
|
||
height: 44px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: none;
|
||
display: block;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
span.titles {
|
||
width: 140px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
p.money {
|
||
width: 145px;
|
||
height: 44px;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: #52c2ff;
|
||
line-height: 44px;
|
||
|
||
.danwei {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.second {
|
||
width: 172px;
|
||
height: 100%;
|
||
margin-right: 15px;
|
||
div.s_tit {
|
||
width: 172px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
p:nth-child(1) {
|
||
height: 36px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bigBox {
|
||
width: 172px;
|
||
height: 10px;
|
||
background-color: #273546;
|
||
border-radius: 67px 67px 67px 67px;
|
||
margin-top: 5px;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 10px;
|
||
border-radius: 67px 67px 67px 67px;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(38, 206, 253, 1) 20%,
|
||
rgba(42, 254, 255, 1) 100%,
|
||
rgba(38, 206, 253, 1) 20%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pcfx {
|
||
height: 321px;
|
||
width: 100%;
|
||
background: url("../assets/xqdp/组\ 3118.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#pcfx {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 40px;
|
||
|
||
.pc_tit {
|
||
width: 398px;
|
||
height: 48px;
|
||
margin: 0 auto;
|
||
background: url(../assets/zhsdy/组\ 3169.png);
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 5px;
|
||
|
||
.pc_l {
|
||
width: 272px;
|
||
height: 48px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.pc_name {
|
||
margin-left: 25px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
|
||
.pc_count {
|
||
margin-left: 51px;
|
||
height: 44px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #0aa7ff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
|
||
.pc_danwei {
|
||
margin-left: 6px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.pc_r {
|
||
margin-right: 20px;
|
||
|
||
p:nth-child(1) {
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
height: 24px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 24px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#pcfxb {
|
||
width: 100%;
|
||
height: 180px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.yhhyzb {
|
||
height: 327px;
|
||
width: 100%;
|
||
background: url("../assets/xqdp/组\ 3119.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#yhhyzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
.xyzy1 {
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 20px;
|
||
p:nth-child(1) {
|
||
width: 103px;
|
||
height: 36px;
|
||
margin-top: 60px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
}
|
||
#gongye {
|
||
width: 300px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
.xyzy2 {
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 20px;
|
||
p:nth-child(1) {
|
||
width: 103px;
|
||
height: 36px;
|
||
margin-top: 60px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
}
|
||
#xuefeng {
|
||
width: 300px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
width: 1445px;
|
||
height: 325px;
|
||
bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.ndqylfb {
|
||
width: 776px;
|
||
height: 100%;
|
||
background: url(../assets/zhsdy/用能量-框.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
transform: translateX(-50%);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ndqylfb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ggzcxx {
|
||
width: 653px;
|
||
height: 325px;
|
||
background: url(../assets/zhsdy/组\ 3120.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 1.2rem;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
#ggzcxx {
|
||
width: 100%;
|
||
margin-top: 60px;
|
||
|
||
ul {
|
||
width: 100%;
|
||
|
||
li {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0px 36px 0px 18px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 12px;
|
||
height: 12px;
|
||
display: block;
|
||
}
|
||
|
||
.times {
|
||
width: 145px;
|
||
height: 36px;
|
||
color: #52c2ff;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
width: 381px;
|
||
height: 36px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
li:nth-child(2n + 2) {
|
||
background: #0e2c7e;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
#map {
|
||
width: 994px;
|
||
position: absolute;
|
||
height: 627px;
|
||
background: url(../assets/客户侧总体用能情况分析/背景.png);
|
||
background-size: cover;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
</style>
|