1563 lines
39 KiB
Vue
1563 lines
39 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="left" 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="detailedTwo1"></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="left1" 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="detailedTwo3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle" id="middle">
|
|
<div class="map" style="height: 100%">
|
|
<img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
|
|
<div class="imgboxone">
|
|
<div class="contents">
|
|
<div class="lines">
|
|
<div class="total">
|
|
<div class="num">
|
|
<div style="display: inline-block">
|
|
<img
|
|
style="float: left"
|
|
src="../assets/index/总数据图标1.png"
|
|
alt=""
|
|
/>
|
|
<span>项目数</span>
|
|
</div>
|
|
<h5 class="yellow">
|
|
9.279 <span style="color: #fff">万</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lines">
|
|
<div class="total">
|
|
<div class="num">
|
|
<div style="display: inline-block">
|
|
<img
|
|
style="float: left; height: 30px; width: 30px"
|
|
src="../assets/index/总数据图标2.png"
|
|
alt=""
|
|
/>
|
|
<span>预算费用总和</span>
|
|
</div>
|
|
<h5 class="orange">
|
|
118.5<span style="color: #fff">万</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lines">
|
|
<div class="total">
|
|
<div class="num">
|
|
<div style="display: inline-block">
|
|
<img
|
|
style="float: left; height: 30px; width: 30px"
|
|
src="../assets/index/总数据图标1.png"
|
|
alt=""
|
|
/>
|
|
<span>计划数</span>
|
|
</div>
|
|
<h5 class="yellow"> 44</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lines">
|
|
<div class="total">
|
|
<div class="num">
|
|
<div style="display: inline-block">
|
|
<img
|
|
style="float: left; height: 30px; width: 30px"
|
|
src="../assets/index/总数据图标2.png"
|
|
alt=""
|
|
/>
|
|
<span>物科数</span>
|
|
</div>
|
|
<h5 class="orange"> 10</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 class="line">
|
|
<div id="barCharts"></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 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: "0",
|
|
alternatorNumber: "1",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "23",
|
|
alternatorNumber: "1",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "1",
|
|
alternatorNumber: "3",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "1",
|
|
alternatorNumber: "2",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "14",
|
|
alternatorNumber: "3",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "45.3w",
|
|
alternatorNumber: "2",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "13.3w",
|
|
alternatorNumber: "1",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "23",
|
|
alternatorNumber: "0",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "23",
|
|
alternatorNumber: "0",
|
|
},
|
|
{
|
|
name: "国网东台区供电公司",
|
|
stationNumber: "356.3w",
|
|
alternatorNumber: "2",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.detailedTwo11();
|
|
this.detailedTwo22();
|
|
this.detailedTwo33();
|
|
this.barCharts();
|
|
this.detailen();
|
|
},
|
|
methods: {
|
|
detailedTwo11() {
|
|
var fontColor = "#fff";
|
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["2018", "2019", "2020", "2021", "2022"],
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: "18",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
alignWithLabel: true,
|
|
},
|
|
splitArea: { show: false },
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "",
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: "18",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "预计年变化趋势",
|
|
type: "bar",
|
|
barWidth: 40,
|
|
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: [320, 332, 301, 334, 390],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
detailedTwo22() {
|
|
var fontColor = "#30eee9";
|
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
|
|
var option = {
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "item",
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: "16",
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#195384",
|
|
},
|
|
},
|
|
data: ["2018", "2019", "2020", "2021", "2022"],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "总投资",
|
|
type: "line",
|
|
stack: "Total",
|
|
symbol: "none",
|
|
data: [80, 132, 101, 134, 121],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "yellow",
|
|
lineStyle: {
|
|
color: "yellow",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
detailedTwo33() {
|
|
// note: 设置灰色背景色的长度的逻辑不够好，请自行调整
|
|
var honorData = [
|
|
{
|
|
name: "2019末",
|
|
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
|
},
|
|
{
|
|
name: "2020上半年",
|
|
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
|
},
|
|
{
|
|
name: "2020下半年",
|
|
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
|
},
|
|
{
|
|
name: "2021年",
|
|
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("detailedTwo3"));
|
|
|
|
var option = {
|
|
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "none",
|
|
},
|
|
},
|
|
backgroundColor: "#031f2d",
|
|
|
|
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: "2019末",
|
|
type: "bar",
|
|
stack: "zongliang",
|
|
barWidth: "35%",
|
|
zlevel: 10,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "inside",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
},
|
|
data: honorData[0].data,
|
|
},
|
|
{
|
|
name: "2020上半年",
|
|
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,
|
|
},
|
|
{
|
|
name: "2020下半年",
|
|
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[2].data,
|
|
},
|
|
{
|
|
name: "2021年",
|
|
type: "bar",
|
|
stack: "zongliang",
|
|
barWidth: "35%",
|
|
zlevel: 10,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "inside",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
},
|
|
data: honorData[3].data,
|
|
},
|
|
],
|
|
};
|
|
|
|
// var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
|
|
// var option = {
|
|
// grid: {
|
|
// left: "3%",
|
|
// right: "4%",
|
|
// bottom: "3%",
|
|
// containLabel: true,
|
|
// },
|
|
// xAxis: {
|
|
// type: "value",
|
|
// show: false,
|
|
// },
|
|
// yAxis: {
|
|
// type: "category",
|
|
// axisLine: {
|
|
// lineStyle: {
|
|
// color: "#206489",
|
|
// },
|
|
// },
|
|
// axisLabel: {
|
|
// color: "#fff",
|
|
// fontSize: "18",
|
|
// },
|
|
// axisLine: {
|
|
// show: false,
|
|
// },
|
|
// axisTick: {
|
|
// show: false,
|
|
// alignWithLabel: true,
|
|
// },
|
|
// splitArea: { show: false },
|
|
// data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
|
|
// },
|
|
// series: [
|
|
// {
|
|
// name: "Direct",
|
|
// type: "bar",
|
|
// stack: "total",
|
|
// barWidth: 10,
|
|
// label: {
|
|
// show: true,
|
|
// },
|
|
// emphasis: {
|
|
// focus: "series",
|
|
// },
|
|
// data: [320, 302, 310, 299, 288],
|
|
// },
|
|
// {
|
|
// name: "Mail Ad",
|
|
// type: "bar",
|
|
// stack: "total",
|
|
// barWidth: 10,
|
|
|
|
// label: {
|
|
// show: true,
|
|
// },
|
|
// emphasis: {
|
|
// focus: "series",
|
|
// },
|
|
// data: [99, 88, 100, 101, 97],
|
|
// },
|
|
// ],
|
|
// };
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
barCharts() {
|
|
var m2R2Data = [
|
|
{
|
|
value: 335,
|
|
legendname: "22%",
|
|
name: "国网大丰市供电公司",
|
|
itemStyle: { color: "#8d7fec" },
|
|
},
|
|
{
|
|
value: 310,
|
|
legendname: "22%",
|
|
name: "盐城运维检修部(检修分公司)",
|
|
itemStyle: { color: "#5085f2" },
|
|
},
|
|
{
|
|
value: 234,
|
|
legendname: "22%",
|
|
name: "国网射阳县供电公司",
|
|
itemStyle: { color: "#e75fc3" },
|
|
},
|
|
{
|
|
value: 154,
|
|
legendname: "22%",
|
|
name: "国网响水县供电公司",
|
|
itemStyle: { color: "#f87be2" },
|
|
},
|
|
{
|
|
value: 335,
|
|
legendname: "22%",
|
|
name: "设备管理部",
|
|
itemStyle: { color: "#f2719a" },
|
|
},
|
|
{
|
|
value: 335,
|
|
legendname: "22%",
|
|
name: "开发区供电服务中心",
|
|
itemStyle: { color: "#fca4bb" },
|
|
},
|
|
];
|
|
var myChart = this.$echarts.init(document.getElementById("barCharts"));
|
|
var option = {
|
|
title: [
|
|
{
|
|
text: "总计",
|
|
subtext: 59.53 + "万",
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "#fff",
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 20,
|
|
color: "yellow",
|
|
},
|
|
textAlign: "center",
|
|
x: "34.5%",
|
|
y: "44%",
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: function (parms) {
|
|
var str =
|
|
parms.seriesName +
|
|
"</br>" +
|
|
parms.marker +
|
|
"" +
|
|
parms.data.legendname +
|
|
"</br>" +
|
|
"数量：" +
|
|
parms.data.value +
|
|
"</br>" +
|
|
"占比：" +
|
|
parms.percent +
|
|
"%";
|
|
return str;
|
|
},
|
|
},
|
|
legend: {
|
|
type: "scroll",
|
|
orient: "vertical",
|
|
left: "70%",
|
|
align: "left",
|
|
top: "middle",
|
|
textStyle: {
|
|
color: "white",
|
|
fontSize: 16,
|
|
},
|
|
height: 250,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
center: ["35%", "50%"],
|
|
radius: ["40%", "65%"],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
lable: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 18,
|
|
},
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
|
|
labelLine: {
|
|
normal: {
|
|
length: 40, //第一条线
|
|
length: 10, //第二条线
|
|
lineStyle: {
|
|
width: 3, // 线条的宽度
|
|
color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderRadius: 10,
|
|
borderColor: "transparent",
|
|
borderWidth: 2,
|
|
label: {
|
|
show: true,
|
|
formatter: " {d}% ",
|
|
fontSize: 20,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
|
|
data: m2R2Data,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
detailen() {
|
|
var myChart = this.$echarts.init(document.getElementById("detailen"));
|
|
var option = {
|
|
color: [
|
|
"#A0CE3A",
|
|
"#31C5C0",
|
|
"#1E9BD1",
|
|
"#0F347B",
|
|
"#585247",
|
|
"#7F6AAD",
|
|
"#009D85",
|
|
"rgba(250,250,250,0.3)",
|
|
],
|
|
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
},
|
|
|
|
legend: {
|
|
orient: "vertical",
|
|
top: "middle",
|
|
right: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 18,
|
|
},
|
|
//格式化图例文本
|
|
formatter(name) {
|
|
// console.log(option);
|
|
let than = option.series[0].data; //获取series中的data
|
|
let total = 0;
|
|
let tarValue;
|
|
for (let i = 0, l = than.length; i < l; i++) {
|
|
total += than[i].value;
|
|
if (than[i].name == name) {
|
|
tarValue = than[i].value;
|
|
}
|
|
}
|
|
let p = (tarValue / total) * 100;
|
|
return p.toFixed(2) + "%";
|
|
},
|
|
icon: "roundRect",
|
|
data: [
|
|
"国网大丰市供电公司",
|
|
"设备管理部",
|
|
"国网射阳县供电公司",
|
|
"国网响水县供电公司",
|
|
"盐城运维检修部(检修分公司)",
|
|
"开发区供电服务中心",
|
|
],
|
|
},
|
|
|
|
calculable: true,
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
center: ["35%", "50%"],
|
|
radius: [30, 120],
|
|
roseType: "area",
|
|
labelLine: {
|
|
normal: {
|
|
length: 20, //第一条线
|
|
length: 5, //第二条线
|
|
lineStyle: {
|
|
width: 3, // 线条的宽度
|
|
color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 20,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
{ value: 22, name: "国网大丰市供电公司" },
|
|
{ value: 20, name: "设备管理部" },
|
|
{ value: 21, name: "国网射阳县供电公司" },
|
|
{ value: 25, name: "国网响水县供电公司" },
|
|
{ value: 20, name: "盐城运维检修部(检修分公司)" },
|
|
{ value: 30, name: "开发区供电服务中心" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.content {
|
|
/deep/ .el-table__body td .cell {
|
|
white-space: normal !important;
|
|
}
|
|
}
|
|
|
|
.two {
|
|
/deep/ .el-table__body-wrapper {
|
|
height: 195px !important;
|
|
}
|
|
.enselect {
|
|
position: absolute;
|
|
right: 30px;
|
|
img {
|
|
float: right;
|
|
}
|
|
.text {
|
|
float: right;
|
|
// right: -10px;
|
|
margin-right: -60px;
|
|
font-size: 20px;
|
|
|
|
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: 350px;
|
|
}
|
|
#detailedTwo2 {
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
.left1 {
|
|
// width: 604px;
|
|
// padding: 0 10px;
|
|
width: 17.18%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
#detailedTwo3 {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
// width: 1590px;
|
|
width: 32.7%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
.imgboxone {
|
|
background: url("../assets/04/总数据外框.png") no-repeat;
|
|
width: 100%;
|
|
height: 17%;
|
|
position: relative;
|
|
top: 45%;
|
|
left: 30%;
|
|
.contents {
|
|
// height: 90%;
|
|
position: absolute;
|
|
padding: 10px;
|
|
height: 100%;
|
|
width: 53%;
|
|
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;
|
|
span {
|
|
font-size: 20px;
|
|
}
|
|
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: 20.5%;
|
|
top: 35%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
// width: 604px;
|
|
width: 16.8%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
#barCharts {
|
|
// width: 100%;
|
|
// height: calc(100% - 52px);
|
|
width: 90%;
|
|
height: calc(100% - 100px);
|
|
position: absolute;
|
|
}
|
|
#detailqe {
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
#detailen {
|
|
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>
|