2020 lines
60 KiB
Vue
2020 lines
60 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="left" id="left">
|
||
<div class="one" style="height: 100%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>年度行业用电量排放量</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<div id="detailedTwo1"></div>
|
||
</div>
|
||
</div>
|
||
<div class="line">
|
||
<div id="detailedTwo4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left1" id="left">
|
||
<div class="two" style="height: 49%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>区县用电量与碳排放量</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<!-- <div class="enselect">
|
||
<img src="../assets/02/地区选择下拉菜单.png" alt="" />
|
||
<span class="text">2022</span>
|
||
</div> -->
|
||
|
||
<div id="detailedTwo3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="two" style="height: 49%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>企业用电量与碳排放量</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<!-- <div class="enselect">
|
||
<img src="../assets/02/地区选择下拉菜单.png" alt="" />
|
||
<span class="text">2022</span>
|
||
</div> -->
|
||
<div id="detailedTwo2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle" id="middle">
|
||
<div class="map" style="height: 100%">
|
||
<canvas
|
||
id="myCanvas"
|
||
width="1000"
|
||
height="800"
|
||
style="position: absolute"
|
||
></canvas>
|
||
<img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
|
||
<div class="imgboxtwo">
|
||
<div class="cartitle">
|
||
<div class="titleFont" style="color: #fff; font-size: 26px">
|
||
大丰区
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<ul>
|
||
<li>
|
||
用电量（kwh）
|
||
<span style="color: yellow">2.685亿</span>
|
||
</li>
|
||
<li>
|
||
碳排放量（kg）
|
||
<span style="color: orange">7.303万</span>
|
||
</li>
|
||
<li>
|
||
企业数量
|
||
<span style="color: yellow">713</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="imgboxone">
|
||
<div class="contents">
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left"
|
||
src="../assets/index/总数据图标1.png"
|
||
alt=""
|
||
/>
|
||
<span>年度总用电量(2021)</span>
|
||
</div>
|
||
<h5 class="yellow">
|
||
89.21<span style="color: #fff"
|
||
>亿kwh</span
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left; height: 30px; width: 30px"
|
||
src="../assets/index/总数据图标2.png"
|
||
alt=""
|
||
/>
|
||
<span>年度总用电量(2022)</span>
|
||
</div>
|
||
<h5 class="orange">
|
||
39.83<span style="color: #fff">亿kwh</span>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left; height: 30px; width: 30px"
|
||
src="../assets/index/总数据图标1.png"
|
||
alt=""
|
||
/>
|
||
<span>年度总碳排放量(2021)</span>
|
||
</div>
|
||
<h5 class="yellow">
|
||
242.6<span style="color: #fff">万kwh</span>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left; height: 30px; width: 30px"
|
||
src="../assets/index/总数据图标2.png"
|
||
alt=""
|
||
/>
|
||
<span>年度总碳排放量(2022)</span>
|
||
</div>
|
||
<h5 class="orange">
|
||
108.3<span style="color: #fff">万kwh</span>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left; height: 30px; width: 30px"
|
||
src="../assets/index/总数据图标2.png"
|
||
alt=""
|
||
/>
|
||
<span>年度客户总数(2021)</span>
|
||
</div>
|
||
<h5 class="orange"> 3673</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lines">
|
||
<div class="total">
|
||
<div class="num">
|
||
<div>
|
||
<img
|
||
style="float: left; height: 30px; width: 30px"
|
||
src="../assets/index/总数据图标2.png"
|
||
alt=""
|
||
/>
|
||
<span>年度客户总数(2022)</span>
|
||
</div>
|
||
<h5 class="orange"> 4968</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right" id="right">
|
||
<div class="two" style="height: 49%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>行业用电量与碳排放量</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div id="barCharts"></div>
|
||
</div>
|
||
</div>
|
||
<div class="two" style="height: 49%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>两高行业用电量</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content" style="height: 100%">
|
||
<div class="line">
|
||
<div id="detailen"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right1" id="right">
|
||
<div class="one" style="height: 100%">
|
||
<div class="cartitle">
|
||
<div class="titleFont">
|
||
<img src="./../assets/indexN/标题箭头.png" alt="" />
|
||
<span>两高行业用电明细</span>
|
||
<img src="./../assets/indexN/标题箭头1.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="line">
|
||
<table>
|
||
<thead style="color: #fff; font-size: 30px">
|
||
<tr>
|
||
<td>客户名称</td>
|
||
<td>用电地址</td>
|
||
<td>用电日期</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in pvTable" :key="index">
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.stationNumber }}</td>
|
||
<td class="titleFont">{{ item.alternatorNumber }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<audio
|
||
controls="controls"
|
||
hidden
|
||
src="../assets/videos/police.wav"
|
||
ref="audio"
|
||
></audio>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//引入echarts
|
||
import * as echarts from "echarts";
|
||
// 工单统计弹窗组件
|
||
import workOrder from "../component/workOrder.vue";
|
||
import ringMainUnit from "./HomePop/ringMainUnit.vue";
|
||
import routeDetail from "../component/routeDetail.vue";
|
||
|
||
// 线路详情
|
||
import lineDetail from "../component/lineDetail.vue";
|
||
export default {
|
||
name: "twentyKV",
|
||
components: {
|
||
ringMainUnit, //环网柜弹窗
|
||
workOrder, //工单统计弹窗
|
||
routeDetail, //线路故障跳闸明细
|
||
lineDetail, //线路详情弹窗
|
||
},
|
||
data() {
|
||
return {
|
||
pageShow: true,
|
||
totals: 5,
|
||
pageSize: 10,
|
||
page: 1,
|
||
threeImg: require("../assets/images/pieBorder.png"),
|
||
enlargeShow: true,
|
||
dateList: ["周", "月"],
|
||
acolor: true, //是否展示颜色
|
||
currentIndex: -1,
|
||
alarmInformationData: [],
|
||
alarmInformationShow: false, //报警详情信息弹窗
|
||
realTimeAlarmShow: false, //实时报警弹窗
|
||
modelOthers: false,
|
||
componentShow: "",
|
||
CompanyInfo: {},
|
||
tableData: [],
|
||
btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
|
||
btnActive: 0,
|
||
iconGround: [
|
||
{
|
||
icon: require("@/assets/images/huanwanggui.png"),
|
||
name: "环网柜",
|
||
},
|
||
{
|
||
icon: require("@/assets/images/fenzhixiang.png"),
|
||
name: "分支箱",
|
||
},
|
||
{
|
||
icon: require("@/assets/images/xiangbian.png"),
|
||
name: "箱变",
|
||
},
|
||
{
|
||
icon: require("@/assets/images/kaibisuo.png"),
|
||
name: "开闭所",
|
||
},
|
||
],
|
||
btnEnlarge: [
|
||
{
|
||
icon: require("@/assets/images/btnTiShi.png"),
|
||
},
|
||
{
|
||
icon: require("@/assets/images/btnFangDa.png"),
|
||
},
|
||
],
|
||
btnEnlarge1: [
|
||
{
|
||
icon: require("@/assets/images/btnTiShi.png"),
|
||
},
|
||
{
|
||
icon: require("@/assets/images/suoxiao.png"),
|
||
},
|
||
],
|
||
options: [
|
||
{
|
||
value: "",
|
||
label: "",
|
||
},
|
||
],
|
||
value: "",
|
||
topContent: [
|
||
{
|
||
name: "配变数量",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "重复停运台次",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "配变重复停运率",
|
||
count: "",
|
||
},
|
||
],
|
||
device: "",
|
||
tableData: [],
|
||
tableKey: +new Date(),
|
||
scrollTop: 0, //table距离顶部距离
|
||
option: null,
|
||
myChartBin: null,
|
||
// 工单
|
||
orderItem: null,
|
||
orderShow: "",
|
||
// 线路故障明细
|
||
routeItem: null,
|
||
routeShow: "",
|
||
// 配电线路
|
||
lineItem: null,
|
||
lineShow: "",
|
||
timer: null, //定时器
|
||
emergencyList: [], //告警数据
|
||
rowTime: "",
|
||
pvTable: [
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
{
|
||
name: "尤伟健",
|
||
stationNumber: "江苏省盐城市***组47",
|
||
alternatorNumber: "2022-05-27",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
this.xianDuan();
|
||
this.detailedTwo11();
|
||
this.detailedTwo22();
|
||
this.detailedTwo33();
|
||
this.detailedTwo44();
|
||
this.barCharts();
|
||
this.detailen();
|
||
},
|
||
methods: {
|
||
//地图画线
|
||
xianDuan() {
|
||
var canvas = document.getElementById("myCanvas");
|
||
var ctx = canvas.getContext("2d");
|
||
ctx.moveTo(600, 500); // moveTo(x,y) 定义线条开始坐标
|
||
ctx.lineTo(770, 120); // lineTo(x,y) 定义线条结束坐标
|
||
ctx.strokeStyle = "orange";
|
||
ctx.lineWidth = 5;
|
||
ctx.font = "26px Arial";
|
||
ctx.fillStyle = "#fff";
|
||
ctx.fillText("11.87万", 320, 140);
|
||
ctx.fillText("14.76万", 400, 200);
|
||
ctx.fillText("2.113万", 270, 360);
|
||
ctx.fillText("39.12万", 480, 285);
|
||
ctx.fillText("7.399万", 320, 440);
|
||
ctx.fillText("7.399万", 480, 410);
|
||
ctx.fillText("255.1万", 640, 465);
|
||
ctx.fillText("298.4万", 750, 660);
|
||
ctx.stroke();
|
||
},
|
||
detailedTwo11() {
|
||
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
fontSize: 18, //字体大小
|
||
color: "#ffffff", //字体颜色
|
||
},
|
||
|
||
data: ["用电量", "碳排放量"],
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["2530", "2541", "2542", "2550", "2610", "2621"],
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "18",
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 200,
|
||
interval: 50,
|
||
axisLabel: {
|
||
formatter: "{value}万",
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 18,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
// color: 'rgba(66, 192, 255, .3)',
|
||
color: "rgba(102,102,102,0.6)",
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "用电量",
|
||
type: "bar",
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: "rgba(86,254,226,.2) " },
|
||
{ offset: 0.5, color: "rgb(86,254,226,.6)" },
|
||
{ offset: 0, color: "rgb(86,254,226)" },
|
||
]),
|
||
borderRadius: [7, 7, 0, 0], // 柱状图圆角
|
||
borderWidth: 0,
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [150, 63, 72, 33, 47, 88],
|
||
},
|
||
{
|
||
name: "碳排放量",
|
||
type: "bar",
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: "rgba(255,255,0,.2) " },
|
||
{ offset: 0.5, color: "rgb(255,255,0,.6)" },
|
||
{ offset: 0, color: "rgb(255,255,0)" },
|
||
]),
|
||
borderRadius: [7, 7, 0, 0], // 柱状图圆角
|
||
borderWidth: 0,
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [45, 123, 35, 67, 58, 124],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
detailedTwo22() {
|
||
// note: 设置灰色背景色的长度的逻辑不够好，请自行调整
|
||
var honorData = [
|
||
{
|
||
name: "用电量（单位：亿）",
|
||
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
||
},
|
||
{
|
||
name: "碳排放量（单位：万）",
|
||
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
||
},
|
||
];
|
||
var honorXAxisData = ["盐都区", "建湖县", "射阳县", "阜宁县", "滨海县"];
|
||
// // 设置灰色背景色的长度
|
||
var isMax = 2000;
|
||
var bjData1 = [
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
isMax,
|
||
];
|
||
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
|
||
|
||
var option = {
|
||
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "none",
|
||
},
|
||
},
|
||
|
||
legend: {
|
||
right: 5,
|
||
top: "5%",
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 15,
|
||
textStyle: {
|
||
color: "#ACCFFF",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "5%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
show: false,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#6B9DD7",
|
||
fontSize: 16, // 文字大小
|
||
fontWeight: 400,
|
||
interval: 0,
|
||
formatter: function (value) {
|
||
return value + "(万元)";
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#6B9DD7",
|
||
fontSize: 16, // 文字大小
|
||
fontWeight: 400,
|
||
interval: 0,
|
||
},
|
||
offset: 20,
|
||
data: honorXAxisData,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "用电量（单位：亿）",
|
||
type: "bar",
|
||
stack: "zongliang",
|
||
barWidth: "35%",
|
||
zlevel: 10,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "inside",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
},
|
||
data: honorData[0].data,
|
||
},
|
||
{
|
||
name: "碳排放量（单位：万）",
|
||
type: "bar",
|
||
stack: "zongliang",
|
||
barWidth: "35%",
|
||
zlevel: 10,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: function (params) {
|
||
console.log(params);
|
||
// return params.seriesName + params.value ;
|
||
return "完成" + params.value;
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
data: honorData[1].data,
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
detailedTwo33() {
|
||
var bg =
|
||
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
|
||
var bar =
|
||
"image://data:image/png;base64,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";
|
||
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
|
||
var datas = [22, 15, 14, 20.4, 21.1, 7, 14, 19];
|
||
var barWidth = 20;
|
||
var maxNum = 0;
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (data[i] > maxNum) {
|
||
maxNum = data[i];
|
||
}
|
||
}
|
||
var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
|
||
var option = {
|
||
grid: {
|
||
top: "10%",
|
||
left: "10%",
|
||
right: "12%",
|
||
bottom: "0%",
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
data: data.map((item, index) => `No. ${index}`),
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: { fontSize: 18, color: "#02afff" },
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: false,
|
||
},
|
||
series: [
|
||
{
|
||
type: "pictorialBar",
|
||
barWidth: barWidth,
|
||
zlevel: 2,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: function (params) {
|
||
console.log(params);
|
||
// return params.seriesName + params.value ;
|
||
return "完成" + params.value;
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
data: data.map(function (item) {
|
||
return {
|
||
value: item,
|
||
symbol: bar,
|
||
};
|
||
}),
|
||
},
|
||
{
|
||
type: "pictorialBar",
|
||
barWidth: barWidth,
|
||
zlevel: 2,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: function (params) {
|
||
console.log(params);
|
||
// return params.seriesName + params.value ;
|
||
return "未完成" + params.value;
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
data: datas.map(function (item) {
|
||
return {
|
||
value: item,
|
||
symbol: bar,
|
||
};
|
||
}),
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
detailedTwo44() {
|
||
var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
|
||
var data = [
|
||
{
|
||
name: "核燃料加工",
|
||
value: 2530,
|
||
},
|
||
{
|
||
name: "煤加工",
|
||
value: 2541,
|
||
},
|
||
{
|
||
name: "煤制品制造",
|
||
value: 2542,
|
||
},
|
||
{
|
||
name: "生物质燃料加工",
|
||
value: 2530,
|
||
},
|
||
{
|
||
name: "基础化学原料制造",
|
||
value: 2541,
|
||
},
|
||
{
|
||
name: "氮肥制造",
|
||
value: 2542,
|
||
},
|
||
];
|
||
var arrName = getArrayValue(data, "name");
|
||
var arrValue = getArrayValue(data, "value");
|
||
var sumValue = eval(arrValue.join("+"));
|
||
var objData = array2obj(data, "name");
|
||
var optionData = getData(data);
|
||
function getArrayValue(array, key) {
|
||
var key = key || "value";
|
||
var res = [];
|
||
if (array) {
|
||
array.forEach(function (t) {
|
||
res.push(t[key]);
|
||
});
|
||
}
|
||
return res;
|
||
}
|
||
function array2obj(array, key) {
|
||
var resObj = {};
|
||
for (var i = 0; i < array.length; i++) {
|
||
resObj[array[i][key]] = array[i];
|
||
}
|
||
return resObj;
|
||
}
|
||
function getData(data) {
|
||
var res = {
|
||
series: [],
|
||
yAxis: [],
|
||
};
|
||
for (let i = 0; i < data.length; i++) {
|
||
// console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
|
||
res.series.push({
|
||
name: "",
|
||
type: "pie",
|
||
clockWise: false, //顺时加载
|
||
hoverAnimation: false, //鼠标移入变大
|
||
radius: [85 - i * 15 + "%", 88 - i * 15 + "%"],
|
||
center: ["30%", "55%"],
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
borderWidth: 5,
|
||
},
|
||
data: [
|
||
{
|
||
value: data[i].value,
|
||
name: data[i].name,
|
||
},
|
||
{
|
||
value: sumValue - data[i].value,
|
||
name: "",
|
||
itemStyle: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
hoverAnimation: false,
|
||
},
|
||
],
|
||
});
|
||
res.series.push({
|
||
name: "",
|
||
type: "pie",
|
||
silent: true,
|
||
z: 1,
|
||
clockWise: false, //顺时加载
|
||
hoverAnimation: false, //鼠标移入变大
|
||
radius: [85 - i * 15 + "%", 88 - i * 15 + "%"],
|
||
center: ["30%", "55%"],
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
borderWidth: 5,
|
||
},
|
||
data: [
|
||
{
|
||
value: 7.5,
|
||
itemStyle: {
|
||
color: "rgb(3, 31, 62)",
|
||
borderWidth: 0,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
hoverAnimation: false,
|
||
},
|
||
{
|
||
value: 2.5,
|
||
name: "",
|
||
itemStyle: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
hoverAnimation: false,
|
||
},
|
||
],
|
||
});
|
||
res.yAxis.push(data[i].name);
|
||
}
|
||
return res;
|
||
}
|
||
var option = {
|
||
legend: {
|
||
show: true,
|
||
icon: "circle",
|
||
top: "center",
|
||
left: "60%",
|
||
data: arrName,
|
||
width: 200,
|
||
padding: [0, 5],
|
||
itemGap: 25,
|
||
formatter: function (name) {
|
||
return (
|
||
"{title|" + name + "}{value|" + " " + objData[name].value + "}"
|
||
);
|
||
},
|
||
textStyle: {
|
||
rich: {
|
||
title: {
|
||
fontSize: 18,
|
||
lineHeight: 20,
|
||
width: 150,
|
||
color: "#fff",
|
||
},
|
||
value: {
|
||
fontSize: 18,
|
||
lineHeight: 20,
|
||
width: 50,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
formatter: "{a}<br>{b}:{c}({d}%)",
|
||
},
|
||
color: [
|
||
"rgb(24, 183, 142)",
|
||
"rgb(1, 179, 238)",
|
||
"rgb(22, 75, 205)",
|
||
"rgb(52, 52, 176)",
|
||
],
|
||
grid: {
|
||
top: "8%",
|
||
bottom: "50%",
|
||
left: "30%",
|
||
containLabel: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
inverse: true,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
inside: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 18,
|
||
},
|
||
show: true,
|
||
},
|
||
data: optionData.yAxis,
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
},
|
||
],
|
||
series: optionData.series,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
barCharts() {
|
||
var bg =
|
||
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
|
||
var bar =
|
||
"image://data:image/png;base64,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";
|
||
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
|
||
var barWidth = 20;
|
||
var maxNum = 0;
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (data[i] > maxNum) {
|
||
maxNum = data[i];
|
||
}
|
||
}
|
||
var myChart = this.$echarts.init(document.getElementById("barCharts"));
|
||
var option = {
|
||
grid: {
|
||
top: "10%",
|
||
left: "10%",
|
||
right: "12%",
|
||
bottom: "0%",
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
data: data.map((item, index) => `No. ${index}`),
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: { fontSize: 18, color: "#02afff" },
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: false,
|
||
},
|
||
series: [
|
||
{
|
||
type: "pictorialBar",
|
||
barWidth: barWidth,
|
||
zlevel: 2,
|
||
data: data.map(function (item) {
|
||
return {
|
||
value: item,
|
||
symbol: bar,
|
||
};
|
||
}),
|
||
},
|
||
{
|
||
type: "pictorialBar",
|
||
barWidth: barWidth,
|
||
data: data.map(function (item) {
|
||
return {
|
||
realValue: item,
|
||
value: maxNum,
|
||
symbol: bg,
|
||
};
|
||
}),
|
||
label: {
|
||
show: true,
|
||
position: "right",
|
||
distance: 80,
|
||
align: "right",
|
||
formatter: function (params) {
|
||
return params.data.realValue + " 万";
|
||
},
|
||
color: "#02afff",
|
||
fontSize: 18,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
detailen() {
|
||
var myChart = this.$echarts.init(document.getElementById("detailen"));
|
||
var option = {
|
||
color: [
|
||
"#EAEA26",
|
||
"#906BF9",
|
||
"#FE5656",
|
||
"#01E17E",
|
||
"#3DD1F9",
|
||
"#FFAD05",
|
||
],
|
||
grid: {
|
||
left: -100,
|
||
top: 50,
|
||
bottom: 10,
|
||
right: 10,
|
||
containLabel: true,
|
||
},
|
||
// tooltip: {
|
||
// trigger: "item",
|
||
// formatter: "{b} : {c} ({d}%)",
|
||
// },
|
||
tooltip: {
|
||
trigger: "item",
|
||
backgroundColor: "#017D7D", // 修改背景颜色
|
||
borderColor: "#66FFFF", // 修改字体颜色
|
||
className: "custom-tooltip-box",
|
||
formatter: function (params) {
|
||
console.log(params);
|
||
// 循环处理数据，展示数据
|
||
// "<div class='custom-tooltip-style'>"
|
||
|
||
var htmlText =
|
||
"<div class='custom-tooltip-style'>" +
|
||
'<div style="font-size:22px;height:52px;width:100%;font-weight:600;line-height:52px;text:indent:26px">' +
|
||
params.name +
|
||
"<span>" +
|
||
"</span>" +
|
||
"</div>" +
|
||
'<div style="padding:0 5% 5% 10%;text-align:left">' +
|
||
"<div >" +
|
||
"<span style='margin-right:10px;font-size:22px;color:white;' >企业数量</span> " +
|
||
'<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
|
||
+params.value +
|
||
"</span> " +
|
||
"<span style='font-size:22px;color:yellow;' >（" +
|
||
params.percent +
|
||
"%）" +
|
||
"</span> " +
|
||
"</div>" +
|
||
"<div style='margin: 10px 0'>" +
|
||
"<span style='margin-right:33px;font-size:22px;color:white;' >用电量</span> " +
|
||
'<span style="color:orange;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
|
||
"6.682亿" +
|
||
"</span> " +
|
||
"</div>" +
|
||
"<div style='margin: 1opx 0'>" +
|
||
"<span style='margin-right:10px;font-size:22px;color:white;' >碳排放量</span> " +
|
||
'<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
|
||
"18.18万" +
|
||
"</span> " +
|
||
"</div>" +
|
||
"</div>" +
|
||
"</div>";
|
||
|
||
return htmlText;
|
||
},
|
||
},
|
||
polar: {},
|
||
angleAxis: {
|
||
interval: 1,
|
||
type: "category",
|
||
data: [],
|
||
z: 10,
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#0B4A6B",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
show: true,
|
||
color: "#0B4A6B",
|
||
margin: 8,
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
radiusAxis: {
|
||
min: 40,
|
||
max: 120,
|
||
interval: 20,
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#0B3E5E",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
show: false,
|
||
padding: [0, 0, 20, 0],
|
||
color: "#0B3E5E",
|
||
fontSize: 16,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#0B3E5E",
|
||
width: 2,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["5%", "10%"],
|
||
hoverAnimation: false,
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
length: 30,
|
||
length2: 55,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
name: "",
|
||
value: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0B4A6B",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["90%", "95%"],
|
||
hoverAnimation: false,
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
length: 30,
|
||
length2: 55,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
name: "",
|
||
data: [
|
||
{
|
||
name: "",
|
||
value: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0B4A6B",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
stack: "a",
|
||
type: "pie",
|
||
radius: ["20%", "80%"],
|
||
roseType: "area",
|
||
zlevel: 10,
|
||
label: {
|
||
normal: {
|
||
formatter: (params) => {
|
||
console.log(params);
|
||
return (
|
||
"{b| " +
|
||
params.name +
|
||
"} " +
|
||
"{c|" +
|
||
params.percent.toFixed(0) +
|
||
"%}"
|
||
);
|
||
},
|
||
borderWidth: 0,
|
||
borderRadius: 4,
|
||
fontSize: 16,
|
||
align: "center",
|
||
color: "#3494BD",
|
||
rich: {
|
||
b: {
|
||
fontSize: 16,
|
||
lineHeight: 20,
|
||
color: "#fff",
|
||
padding: [0, 0, 5, 0],
|
||
},
|
||
c: {
|
||
fontSize: 20,
|
||
lineHeight: 20,
|
||
color: "orange",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// formatter: "{c}",
|
||
// textStyle: {
|
||
// fontSize: 12,
|
||
// },
|
||
// position: "outside",
|
||
// },
|
||
// emphasis: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
labelLine: {
|
||
normal: {
|
||
show: true,
|
||
length: 20,
|
||
length2: 55,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 10,
|
||
name: "IDS",
|
||
},
|
||
{
|
||
value: 5,
|
||
name: "VPN",
|
||
},
|
||
{
|
||
value: 15,
|
||
name: "交换机",
|
||
},
|
||
{
|
||
value: 25,
|
||
name: "防火墙",
|
||
},
|
||
{
|
||
value: 20,
|
||
name: "WAF",
|
||
},
|
||
{
|
||
value: 35,
|
||
name: "堡垒机",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
},
|
||
watch: {},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
// 给父盒子清除默认已有样式
|
||
:deep(.custom-tooltip-box) {
|
||
padding: 0 !important;
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
// 给子盒子自定义样式
|
||
.custom-tooltip-style {
|
||
width: 292px;
|
||
height: 165px;
|
||
background-image: url("../assets/08/地图弹窗.png");
|
||
background-size: cover;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.content {
|
||
/deep/ .el-table__body td .cell {
|
||
white-space: normal !important;
|
||
}
|
||
}
|
||
|
||
.two {
|
||
/deep/ .el-table__body-wrapper {
|
||
height: 195px !important;
|
||
}
|
||
.enselect {
|
||
position: absolute;
|
||
// left: 30px;
|
||
img {
|
||
// position: relative;
|
||
float: left;
|
||
}
|
||
.text {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 20px;
|
||
// right: -10px;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 滚动条的宽度
|
||
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
||
width: 6px; // 横向滚动条
|
||
height: 6px; // 纵向滚动条 必写
|
||
// display: block !important;
|
||
}
|
||
|
||
// 滚动条的滑块
|
||
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background-color: rgba(35, 160, 247, 1);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.user_skills {
|
||
/deep/ .el-table {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table th {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table__header {
|
||
width: 100% !important;
|
||
height: 70px;
|
||
background: url("../assets/images/tableBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.cell {
|
||
text-align: center !important;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table__header th {
|
||
border: none;
|
||
padding: 0;
|
||
height: 48px;
|
||
|
||
.cell {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
&.el-table__cell.is-leaf {
|
||
border: none !important;
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
.el-table .cell {
|
||
background-color: transparent !important;
|
||
border: none;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/deep/ .el-table__body td .cell {
|
||
white-space: nowrap;
|
||
// word-break: break-all;
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
/deep/ .el-table th.el-table__cell > .cell {
|
||
color: rgb(86, 254, 226);
|
||
}
|
||
|
||
/deep/.el-table__body,
|
||
.el-table__footer,
|
||
.el-table__header {
|
||
width: 100% !important;
|
||
}
|
||
|
||
/deep/ .el-table__body td .cell {
|
||
// width: 60px !important;
|
||
}
|
||
|
||
// &::before {
|
||
// //去除底部白线
|
||
// left: 0;
|
||
// bottom: 0;
|
||
// width: 100%;
|
||
// height: 0px;
|
||
// }
|
||
.el-table::before {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
.home {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 15px 28px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
.left {
|
||
padding-right: 15px;
|
||
// width: 604px;
|
||
width: 17.18%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
|
||
#detailedTwo1 {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
#detailedTwo4 {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
|
||
.left1 {
|
||
// width: 604px;
|
||
// padding: 0 10px;
|
||
width: 17.18%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
#detailedTwo2 {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
#detailedTwo3 {
|
||
width: 100%;
|
||
height: 350px;
|
||
}
|
||
}
|
||
|
||
.middle {
|
||
// width: 1590px;
|
||
width: 32.7%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
.imgboxone {
|
||
background: url("../assets/08/总数据外框1.png") no-repeat;
|
||
width: 100%;
|
||
height: 17%;
|
||
position: relative;
|
||
top: 45%;
|
||
left: 17%;
|
||
.contents {
|
||
position: absolute;
|
||
padding: 10px;
|
||
height: 100%;
|
||
width: 80%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
/* 平分剩余空间 */
|
||
justify-content: space-around;
|
||
.lines {
|
||
width: 100%;
|
||
padding: 10px 0 0 1px;
|
||
background: url("../assets/index/总数据小框.png") no-repeat;
|
||
}
|
||
|
||
.total {
|
||
.num {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: left;
|
||
color: #ffffff;
|
||
div {
|
||
display: -webkit-inline-box;
|
||
}
|
||
span {
|
||
font-size: 18px;
|
||
}
|
||
h5 {
|
||
font-size: 34px;
|
||
}
|
||
.yellow {
|
||
padding-top: 30px;
|
||
color: yellow;
|
||
}
|
||
.orange {
|
||
padding-top: 30px;
|
||
color: orange;
|
||
}
|
||
.yellows {
|
||
padding-top: 20px;
|
||
color: yellow;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.map {
|
||
background: url("../assets/indexN/地图.png") no-repeat;
|
||
vertical-align: middle;
|
||
display: table-cell;
|
||
text-align: center;
|
||
margin-left: -20%;
|
||
.allimg {
|
||
position: relative;
|
||
left: 30%;
|
||
top: 35%;
|
||
}
|
||
}
|
||
}
|
||
.imgboxtwo {
|
||
background: url("../assets/08/地图弹窗.png") no-repeat;
|
||
background-size: 100%;
|
||
float: right;
|
||
right: 5%;
|
||
top: 5%;
|
||
width: 28vh;
|
||
height: 28vh;
|
||
position: relative;
|
||
.content {
|
||
height: 36%;
|
||
padding: 0 15px 0 15px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
ul {
|
||
height: 100%;
|
||
li {
|
||
text-align: left;
|
||
height: 33%;
|
||
font-size: 23px;
|
||
color: #f8f8f8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.total {
|
||
.num {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
h5 {
|
||
font-size: 28px;
|
||
}
|
||
.yellow {
|
||
color: yellow;
|
||
}
|
||
.orange {
|
||
color: orange;
|
||
}
|
||
span {
|
||
float: left;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
// width: 604px;
|
||
width: 16.8%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
#detailen {
|
||
width: 100%;
|
||
height: 350px;
|
||
}
|
||
.content {
|
||
height: 80%;
|
||
padding: 15px 15px 15px 15px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
#barCharts {
|
||
width: 100%;
|
||
height: 350px;
|
||
}
|
||
}
|
||
|
||
.eqselect {
|
||
span {
|
||
font-size: 20px;
|
||
color: #f8f8f8;
|
||
}
|
||
img {
|
||
margin-right: 7px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right1 {
|
||
// width: 604px;
|
||
width: 17.18%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
#detailstop {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// }
|
||
</style>
|
||
<style lang="less" scoped>
|
||
// .el-popper {
|
||
// top: 50%;
|
||
// }
|
||
|
||
/deep/ .popper__arrow {
|
||
left: 171px !important;
|
||
top: 95px !important;
|
||
}
|
||
|
||
/deep/ .el-select-dropdown {
|
||
background-color: rgb(14, 30, 46) !important;
|
||
border: 1px solid rgba(45, 143, 148, 0.5) !important;
|
||
|
||
/deep/ .el-select-dropdown__item {
|
||
color: #fff !important;
|
||
}
|
||
|
||
/deep/ .el-select-dropdown__item.hover,
|
||
/deep/ .el-select-dropdown__item:hover {
|
||
background-color: rgb(18, 54, 87) !important;
|
||
}
|
||
}
|
||
|
||
/deep/ .el-popper[x-placement^="bottom"] {
|
||
margin-top: -146px !important;
|
||
}
|
||
|
||
/**
|
||
表格有滚动效果但是不显示滚动条
|
||
*/
|
||
</style>
|
||
<style lang="less">
|
||
.el-table .rowColor0 {
|
||
background: red !important;
|
||
animation: fade 2000ms infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes fade {
|
||
from {
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// .el-pager li:hover{
|
||
// color:black
|
||
// }
|
||
.cartitle {
|
||
height: 52px;
|
||
width: 100%;
|
||
// background: url("../assets/images/carTitle.png") no-repeat;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 52px;
|
||
// text-align: left;
|
||
text-indent: 26px;
|
||
}
|
||
.titleFont {
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
background-image: linear-gradient(
|
||
to bottom,
|
||
rgb(255, 255, 255),
|
||
rgb(123, 247, 245)
|
||
);
|
||
img {
|
||
margin: 20px;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 24px 31px 0 31px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
|
||
.line {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
table {
|
||
thead {
|
||
font-size: 22px !important;
|
||
height: 50px;
|
||
background: url("../assets/02/表格标题行.png") no-repeat;
|
||
}
|
||
tbody {
|
||
tr {
|
||
height: 50px;
|
||
font-size: 18px !important;
|
||
color: #fff;
|
||
background: url("../assets/02/表格其他行.png") no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
.total {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-around;
|
||
margin-bottom: 15%;
|
||
|
||
.num {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
|
||
.numText {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.numText:before {
|
||
content: attr(text);
|
||
position: absolute;
|
||
z-index: 10;
|
||
color: rgb(86, 254, 246) !important;
|
||
-webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
|
||
.lists {
|
||
width: 100%;
|
||
height: 32px;
|
||
background: url("../assets/images/cardSquare.png") no-repeat;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 9%;
|
||
padding: 0 10px 0 0;
|
||
box-sizing: border-box;
|
||
|
||
& > div {
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.number {
|
||
color: rgb(86, 254, 226);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.two {
|
||
background: url("../assets/indexN/boxLr.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
.one {
|
||
background: url("../assets/02/表格框.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.unityBtn {
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 30%;
|
||
width: 40%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.btn {
|
||
width: 100%;
|
||
height: 38px;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
line-height: 38px;
|
||
background: url("../assets/images/btnAct.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 10px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.btnAct {
|
||
color: rgb(244, 201, 7);
|
||
background: url("../assets/images/unityBtn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
.unityIcon {
|
||
background: url("../assets/images/iconCard.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 110px;
|
||
height: 168px;
|
||
position: absolute;
|
||
right: 40px;
|
||
bottom: 80px;
|
||
display: flex;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.unityIconGround {
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.unityEnlargeBtn {
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: absolute;
|
||
right: 40px;
|
||
top: 40px;
|
||
|
||
.content {
|
||
width: 38px;
|
||
height: 36px;
|
||
background: url("../assets/images/btnkuang.png") no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
}
|
||
}
|
||
|
||
.unitySelect {
|
||
position: absolute;
|
||
left: 40px;
|
||
width: 222px;
|
||
height: 5%;
|
||
bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unitySuosou {
|
||
width: 57px;
|
||
height: 53px;
|
||
background: url("../assets/images/sousuoKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|