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 class="ynflzb">
|
||||
<p class="title">用能分类占比</p>
|
||||
<img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
|
||||
<img
|
||||
src="../assets/客户侧总体用能情况分析/底盘.png"
|
||||
alt=""
|
||||
class="pic"
|
||||
/>
|
||||
<div id="ynflzb"></div>
|
||||
</div>
|
||||
<div class="qyydlpm">
|
||||
|
|
@ -99,21 +103,30 @@
|
|||
</div>
|
||||
<div id="map"></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>
|
||||
</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";
|
||||
import { fontSizeRem } from "../assets/function";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -797,10 +810,13 @@ export default {
|
|||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
return `${params.seriesName
|
||||
}<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 + "%"
|
||||
}`;
|
||||
return `${
|
||||
params.seriesName
|
||||
}<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: {
|
||||
|
|
@ -865,274 +881,271 @@ export default {
|
|||
};
|
||||
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() {
|
||||
this.defineEcharts("ssfhzs", this.option);
|
||||
this.defineEcharts("ynl", this.option1);
|
||||
this.initYhhyzb();
|
||||
this.initYnflzb();
|
||||
|
||||
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);
|
||||
this.initMap();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1155,7 +1168,6 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
p {
|
||||
width: 527px;
|
||||
height: 47px;
|
||||
|
|
@ -1167,31 +1179,28 @@ export default {
|
|||
color: #fff;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
img:nth-of-type(1) {
|
||||
width: 231px;
|
||||
height: 59px;
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
width: 158px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.containter {
|
||||
width: 100%;
|
||||
height: 967px;
|
||||
// height: 89.53vh;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 436px;
|
||||
height: 100%;
|
||||
|
||||
.ztynqk {
|
||||
height: 294px;
|
||||
// height: 27.2vh;
|
||||
width: 100%;
|
||||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||
background-size: cover;
|
||||
|
|
@ -1199,7 +1208,6 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
|
|
@ -1211,13 +1219,11 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.typeBox {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
|
||||
li {
|
||||
width: 39px;
|
||||
height: 21px;
|
||||
|
|
@ -1229,29 +1235,24 @@ export default {
|
|||
margin: 2.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(10, 167, 255, 0.3);
|
||||
border: 1px solid #0aa7ff;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -1261,13 +1262,11 @@ export default {
|
|||
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";
|
||||
|
|
@ -1278,14 +1277,13 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ssfhzs {
|
||||
height: 315px;
|
||||
// height: 29.1vh;
|
||||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||||
background-size: cover;
|
||||
margin-top: 6px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
|
|
@ -1297,7 +1295,6 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.typeBox {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
@ -1305,7 +1302,6 @@ export default {
|
|||
top: 54px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
li {
|
||||
width: 39px;
|
||||
height: 21px;
|
||||
|
|
@ -1317,13 +1313,11 @@ export default {
|
|||
margin: 2.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(10, 167, 255, 0.3);
|
||||
border: 1px solid #0aa7ff;
|
||||
}
|
||||
}
|
||||
|
||||
#ssfhzs {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -1334,12 +1328,12 @@ export default {
|
|||
|
||||
.ynl {
|
||||
height: 325px;
|
||||
// height: 30vh;
|
||||
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
||||
background-size: cover;
|
||||
margin-top: 6px;
|
||||
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 190px;
|
||||
|
|
@ -1351,7 +1345,6 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.typeBox {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
@ -1359,7 +1352,6 @@ export default {
|
|||
top: 54px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
li {
|
||||
width: 39px;
|
||||
height: 21px;
|
||||
|
|
@ -1371,13 +1363,11 @@ export default {
|
|||
margin: 2.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(10, 167, 255, 0.3);
|
||||
border: 1px solid #0aa7ff;
|
||||
}
|
||||
}
|
||||
|
||||
#ynl {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -1386,18 +1376,15 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 436px;
|
||||
height: 100%;
|
||||
|
||||
.yhhyzb {
|
||||
height: 294px;
|
||||
width: 100%;
|
||||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
|
|
@ -1409,13 +1396,11 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
#yhhyzb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ynflzb {
|
||||
height: 294px;
|
||||
width: 100%;
|
||||
|
|
@ -1423,7 +1408,6 @@ export default {
|
|||
background-size: cover;
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
|
|
@ -1435,12 +1419,10 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
#ynflzb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
|
|
@ -1449,7 +1431,6 @@ export default {
|
|||
left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.qyydlpm {
|
||||
height: 353px;
|
||||
width: 100%;
|
||||
|
|
@ -1469,14 +1450,12 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-top: 50px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -1484,7 +1463,6 @@ export default {
|
|||
padding: 0 30px 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 9px;
|
||||
|
||||
p:nth-of-type(1) {
|
||||
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
|
||||
width: 24px;
|
||||
|
|
@ -1507,7 +1485,6 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
p:nth-of-type(3) {
|
||||
width: 27px;
|
||||
height: 12px;
|
||||
|
|
@ -1521,7 +1498,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
width: 994px;
|
||||
|
|
@ -1532,14 +1508,77 @@ export default {
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 994px;
|
||||
position: absolute;
|
||||
height: 627px;
|
||||
background: url(../assets/客户侧总体用能情况分析/背景.png);
|
||||
background-size: cover;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
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>
|
||||
<p>环比</p>
|
||||
<p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="qyyh"></div>
|
||||
|
|
@ -1166,7 +1167,7 @@
|
|||
width: 436px;
|
||||
height: 100%;
|
||||
|
||||
.ztynqk {
|
||||
.ndqyyh {
|
||||
height: 27.22vh;
|
||||
// height: 294px;
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue