zyh
This commit is contained in:
unknown
parent
81bc58ef53
commit
2cf38f303d
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
|
|
@ -83,7 +83,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="ynflzb">
|
<div class="ynflzb">
|
||||||
<p class="title">用能分类占比</p>
|
<p class="title">用能分类占比</p>
|
||||||
<img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
|
<img
|
||||||
|
src="../assets/客户侧总体用能情况分析/底盘.png"
|
||||||
|
alt=""
|
||||||
|
class="pic"
|
||||||
|
/>
|
||||||
<div id="ynflzb"></div>
|
<div id="ynflzb"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="qyydlpm">
|
<div class="qyydlpm">
|
||||||
|
|
@ -99,21 +103,30 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div class="footer"></div>
|
<div class="footer"></div>
|
||||||
|
<div class="tooltip">
|
||||||
|
<img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
|
||||||
|
<div class="title1">客户侧用能数据总览</div>
|
||||||
|
<div class="txt">
|
||||||
|
<div class="one">
|
||||||
|
<span>接入用户数:</span>
|
||||||
|
<p style="color: #d9e363">
|
||||||
|
352<span style="color: #d9e363">户</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="two">
|
||||||
|
<span>用户总电量:</span>
|
||||||
|
<p style="color: #44bfd6">
|
||||||
|
5525<span style="color: #44bfd6">万千瓦时</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 * as echarts from "echarts";
|
||||||
// import { fontSizeRem } from "../assets/function";
|
import { fontSizeRem } from "../assets/function";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -797,10 +810,13 @@ export default {
|
||||||
params.seriesName !== "mouseoutSeries" &&
|
params.seriesName !== "mouseoutSeries" &&
|
||||||
params.seriesName !== "pie2d"
|
params.seriesName !== "pie2d"
|
||||||
) {
|
) {
|
||||||
return `${params.seriesName
|
return `${
|
||||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
|
params.seriesName
|
||||||
};"></span>${option.series[params.seriesIndex].pieData.value + "%"
|
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||||
}`;
|
params.color
|
||||||
|
};"></span>${
|
||||||
|
option.series[params.seriesIndex].pieData.value + "%"
|
||||||
|
}`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -865,274 +881,271 @@ export default {
|
||||||
};
|
};
|
||||||
this.defineEcharts("ynflzb", option);
|
this.defineEcharts("ynflzb", 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();
|
||||||
|
});
|
||||||
|
//获取山东地图数据。
|
||||||
|
$.get(
|
||||||
|
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
||||||
|
function (geojson) {
|
||||||
|
echarts.registerMap("山东", geojson);
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
// show: false,
|
||||||
|
},
|
||||||
|
name: "山东",
|
||||||
|
type: "map",
|
||||||
|
map: "山东",
|
||||||
|
boxDepth: 60, //地图倾斜度
|
||||||
|
regionHeight: 6, //地图厚度
|
||||||
|
aspectScale: 0.9, //地图长宽比
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#70EAF4", // 高亮时候地图显示的颜色
|
||||||
|
borderWidth: 2, // 高亮时的边框宽度
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontSize: 12, // 选中地图文字字号和字体颜色
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true, //是否显示市
|
||||||
|
formatter: function (params) {
|
||||||
|
var name = params.name;
|
||||||
|
var value = params.value;
|
||||||
|
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: "#000", //文字颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
// backgroundColor: {
|
||||||
|
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||||
|
// },
|
||||||
|
// padding: [15, 20],
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
fline: {
|
||||||
|
padding: [0, 35],
|
||||||
|
color: "#FDCC00",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
tline: {
|
||||||
|
padding: [0, 27],
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.defineEcharts("ssfhzs", this.option);
|
this.defineEcharts("ssfhzs", this.option);
|
||||||
this.defineEcharts("ynl", this.option1);
|
this.defineEcharts("ynl", this.option1);
|
||||||
this.initYhhyzb();
|
this.initYhhyzb();
|
||||||
this.initYnflzb();
|
this.initYnflzb();
|
||||||
|
this.initMap();
|
||||||
var data = [
|
|
||||||
{
|
|
||||||
name: "南京市",
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "济南市",
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "徐州市",
|
|
||||||
value: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "常州市",
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "苏州市",
|
|
||||||
value: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "南通市",
|
|
||||||
value: 6,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "连云港市",
|
|
||||||
value: 7,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "淮安市",
|
|
||||||
value: 8,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "盐城市",
|
|
||||||
value: 9,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "扬州市",
|
|
||||||
value: 10,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "镇江市",
|
|
||||||
value: 11,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "泰州市",
|
|
||||||
value: 12,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "宿迁市",
|
|
||||||
value: 13,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
var splitList = [
|
|
||||||
{
|
|
||||||
start: 1,
|
|
||||||
end: 1,
|
|
||||||
label: "济南市",
|
|
||||||
color: "#236da8",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 2,
|
|
||||||
end: 2,
|
|
||||||
label: "无锡市",
|
|
||||||
color: "#2884db",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 3,
|
|
||||||
end: 3,
|
|
||||||
label: "徐州市",
|
|
||||||
color: "#244779",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 4,
|
|
||||||
end: 4,
|
|
||||||
label: "常州市",
|
|
||||||
color: "#246198",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 5,
|
|
||||||
end: 5,
|
|
||||||
label: "苏州市",
|
|
||||||
color: "#2884db",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 6,
|
|
||||||
end: 6,
|
|
||||||
label: "南通市",
|
|
||||||
color: "#2884db",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 7,
|
|
||||||
end: 7,
|
|
||||||
label: "连云港市",
|
|
||||||
color: "#244779",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 8,
|
|
||||||
end: 8,
|
|
||||||
label: "淮安市",
|
|
||||||
color: "#244779",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 9,
|
|
||||||
end: 9,
|
|
||||||
label: "盐城市",
|
|
||||||
color: "#244779",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 10,
|
|
||||||
end: 10,
|
|
||||||
label: "扬州市",
|
|
||||||
color: "#246198",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 11,
|
|
||||||
end: 11,
|
|
||||||
label: "镇江市",
|
|
||||||
color: "#2884db",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 12,
|
|
||||||
end: 12,
|
|
||||||
label: "泰州市",
|
|
||||||
color: "#2884db",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 13,
|
|
||||||
end: 13,
|
|
||||||
label: "宿迁市",
|
|
||||||
color: "#244779",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
var chartDom = document.getElementById("map");
|
|
||||||
var myChart = this.$echarts.init(chartDom, null, {
|
|
||||||
devicePixelRatio: 10, // 设置为2或更高的值
|
|
||||||
});
|
|
||||||
|
|
||||||
//获取山东地图数据。
|
|
||||||
$.get(
|
|
||||||
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
|
||||||
function (geojson) {
|
|
||||||
echarts.registerMap("山东", geojson);
|
|
||||||
let option = {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
},
|
|
||||||
name: "山东",
|
|
||||||
type: "map3D",
|
|
||||||
map: "山东",
|
|
||||||
boxDepth: 60, //地图倾斜度
|
|
||||||
regionHeight: 6, //地图厚度
|
|
||||||
label: {
|
|
||||||
show: true, //是否显示市
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff", //文字颜色
|
|
||||||
fontSize: 12, //文字大小
|
|
||||||
fontFamily: "微软雅黑",
|
|
||||||
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 1, // 透明度
|
|
||||||
borderWidth: 1.5, //分界线宽度
|
|
||||||
borderColor: "#0699E4", //分界线颜色
|
|
||||||
},
|
|
||||||
groundplane: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
data: data,
|
|
||||||
//shading: 'realistic',
|
|
||||||
// 真实感材质相关配置 shading: 'realistic'时有效
|
|
||||||
realisticMaterial: {
|
|
||||||
detailTexture: "#093099", // 纹理贴图
|
|
||||||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
|
||||||
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
|
||||||
metalness: 1, // 0材质是非金属 ，1金属
|
|
||||||
roughnessAdjust: 0,
|
|
||||||
},
|
|
||||||
viewControl: {
|
|
||||||
distance: 80, // 地图视角 控制初始大小
|
|
||||||
rotateSensitivity: 1, // 旋转
|
|
||||||
zoomSensitivity: 1, // 缩放
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dataRange: {
|
|
||||||
show: false,
|
|
||||||
splitList: splitList,
|
|
||||||
},
|
|
||||||
animation: true,
|
|
||||||
};
|
|
||||||
myChart.setOption(option);
|
|
||||||
myChart.on("click", this.chartClick);
|
|
||||||
let chartClick = function (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: 100, // 地图视角 控制初始大小
|
|
||||||
rotateSensitivity: 1, // 旋转
|
|
||||||
zoomSensitivity: 1, // 缩放
|
|
||||||
},
|
|
||||||
};
|
|
||||||
myChart.setOption(option);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
|
||||||
window.removeEventListener("resize", this.getResize);
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1155,7 +1168,6 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
width: 527px;
|
width: 527px;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
|
|
@ -1167,31 +1179,28 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-left: -60px;
|
margin-left: -60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img:nth-of-type(1) {
|
img:nth-of-type(1) {
|
||||||
width: 231px;
|
width: 231px;
|
||||||
height: 59px;
|
height: 59px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img:nth-of-type(2) {
|
img:nth-of-type(2) {
|
||||||
width: 158px;
|
width: 158px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.containter {
|
.containter {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 967px;
|
height: 967px;
|
||||||
|
// height: 89.53vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 436px;
|
width: 436px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.ztynqk {
|
.ztynqk {
|
||||||
height: 294px;
|
height: 294px;
|
||||||
|
// height: 27.2vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
@ -1199,7 +1208,6 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
|
@ -1211,13 +1219,11 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typeBox {
|
.typeBox {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 54px;
|
top: 54px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 39px;
|
width: 39px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
|
@ -1229,29 +1235,24 @@ export default {
|
||||||
margin: 2.5px;
|
margin: 2.5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: rgba(10, 167, 255, 0.3);
|
background: rgba(10, 167, 255, 0.3);
|
||||||
border: 1px solid #0aa7ff;
|
border: 1px solid #0aa7ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.bottomBox {
|
.bottomBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 72px;
|
width: 72px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
p:nth-of-type(1) {
|
p:nth-of-type(1) {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
@ -1261,13 +1262,11 @@ export default {
|
||||||
font-family: " AlibabaPuHuiTi";
|
font-family: " AlibabaPuHuiTi";
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-of-type(1) {
|
span:nth-of-type(1) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: "AlibabaPuHuiTi";
|
font-family: "AlibabaPuHuiTi";
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-of-type(2) {
|
span:nth-of-type(2) {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: "AlibabaPuHuiTi";
|
font-family: "AlibabaPuHuiTi";
|
||||||
|
|
@ -1278,14 +1277,13 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ssfhzs {
|
.ssfhzs {
|
||||||
height: 315px;
|
height: 315px;
|
||||||
|
// height: 29.1vh;
|
||||||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
|
@ -1297,7 +1295,6 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typeBox {
|
.typeBox {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1305,7 +1302,6 @@ export default {
|
||||||
top: 54px;
|
top: 54px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 39px;
|
width: 39px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
|
@ -1317,13 +1313,11 @@ export default {
|
||||||
margin: 2.5px;
|
margin: 2.5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: rgba(10, 167, 255, 0.3);
|
background: rgba(10, 167, 255, 0.3);
|
||||||
border: 1px solid #0aa7ff;
|
border: 1px solid #0aa7ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#ssfhzs {
|
#ssfhzs {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1334,12 +1328,12 @@ export default {
|
||||||
|
|
||||||
.ynl {
|
.ynl {
|
||||||
height: 325px;
|
height: 325px;
|
||||||
|
// height: 30vh;
|
||||||
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 190px;
|
left: 190px;
|
||||||
|
|
@ -1351,7 +1345,6 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typeBox {
|
.typeBox {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1359,7 +1352,6 @@ export default {
|
||||||
top: 54px;
|
top: 54px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 39px;
|
width: 39px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
|
@ -1371,13 +1363,11 @@ export default {
|
||||||
margin: 2.5px;
|
margin: 2.5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: rgba(10, 167, 255, 0.3);
|
background: rgba(10, 167, 255, 0.3);
|
||||||
border: 1px solid #0aa7ff;
|
border: 1px solid #0aa7ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#ynl {
|
#ynl {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1386,18 +1376,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 436px;
|
width: 436px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.yhhyzb {
|
.yhhyzb {
|
||||||
height: 294px;
|
height: 294px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
|
@ -1409,13 +1396,11 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#yhhyzb {
|
#yhhyzb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ynflzb {
|
.ynflzb {
|
||||||
height: 294px;
|
height: 294px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1423,7 +1408,6 @@ export default {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
|
@ -1435,12 +1419,10 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#ynflzb {
|
#ynflzb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pic {
|
.pic {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1449,7 +1431,6 @@ export default {
|
||||||
left: 40px;
|
left: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.qyydlpm {
|
.qyydlpm {
|
||||||
height: 353px;
|
height: 353px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1469,14 +1450,12 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -1484,7 +1463,6 @@ export default {
|
||||||
padding: 0 30px 0 30px;
|
padding: 0 30px 0 30px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 9px;
|
margin: 9px;
|
||||||
|
|
||||||
p:nth-of-type(1) {
|
p:nth-of-type(1) {
|
||||||
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
|
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
|
@ -1507,7 +1485,6 @@ export default {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p:nth-of-type(3) {
|
p:nth-of-type(3) {
|
||||||
width: 27px;
|
width: 27px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
|
@ -1521,7 +1498,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 994px;
|
width: 994px;
|
||||||
|
|
@ -1532,14 +1508,77 @@ export default {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
width: 994px;
|
width: 994px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 627px;
|
height: 627px;
|
||||||
|
background: url(../assets/客户侧总体用能情况分析/背景.png);
|
||||||
|
background-size: cover;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
width: 281px;
|
||||||
|
height: 170px;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/组 3123.png");
|
||||||
|
background-size: cover;
|
||||||
|
z-index: 1;
|
||||||
|
top: 418px;
|
||||||
|
right: 542px;
|
||||||
|
padding: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 36px;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
top: 42px;
|
||||||
|
right: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.title1 {
|
||||||
|
height: 27px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: "YouSheBiaoTiHei";
|
||||||
|
font-weight: 400;
|
||||||
|
color: #60edff;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.txt {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
font-family: "AlibabaPuHuiTi";
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 0;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
width: 89px;
|
||||||
|
height: 21px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
width: 143px;
|
||||||
|
height: 21px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 20px;
|
||||||
|
span {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>环比</p>
|
<p>环比</p>
|
||||||
|
<p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="qyyh"></div>
|
<div id="qyyh"></div>
|
||||||
|
|
@ -1166,7 +1167,7 @@
|
||||||
width: 436px;
|
width: 436px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.ztynqk {
|
.ndqyyh {
|
||||||
height: 27.22vh;
|
height: 27.22vh;
|
||||||
// height: 294px;
|
// height: 294px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1213,47 +1214,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
|
||||||
margin-top: 100px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.bottomBox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 180px;
|
|
||||||
margin: 10px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
p:nth-of-type(1) {
|
|
||||||
width: 120px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: " AlibabaPuHuiTi";
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
span:nth-of-type(1) {
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: "AlibabaPuHuiTi";
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
span:nth-of-type(2) {
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: "AlibabaPuHuiTi";
|
|
||||||
font-weight: 400;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ssfhzs {
|
.ssfhzs {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue