<template>
<div class="home">
<div class="left" id="left">
<div class="one" style="height: 48%">
<div class="cartitle" @click="routerTo('盐城地区分布光伏运行监测')">
<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="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">户数高渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">容量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">能量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="detailedTwo1"></div>
</div>
<div class="two" style="height: 49%">
<div class="cartitle" @click="routerTo('配网工程全过程物资审计')">
<div class="titleFont"><img src="./../assets/indexN/标题箭头.png" alt="" />
<span>配网工程全过程物资审计</span>
<img src="./../assets/indexN/标题箭头1.png" alt="" /></div>
</div>
<div class="content" style="display:inline">
<div class="line">
<div class="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">项目数 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">预算费用总和</span> </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">计划数 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="barCharts"></div>
</div>
</div>
<div class="left1" id="left">
<div class="one" style="height: 48%">
<div class="cartitle" @click="routerTo('盐城东台区供电所数字化分析')">
<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="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">升档配变数量 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">降档配比数量</span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">负荷关注配变数量 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="horizontalChart"></div>
</div>
<div class="two" style="height: 49%">
<div class="cartitle" @click="routerTo('盐城供电公司配网电能质量管控')">
<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="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">月供电可靠性 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">平均停电频次 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">平均停电时间 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="detailedOne" ></div>
</div>
</div>
<div class="middle" id="middle">
<div class="map" style="height: 100%">
<div class="imgboxone">
<div class="contents">
<div class="lines">
<div class="total">
<div class="num">
<span style="font-size: 18px">户数高渗透率</span>
<h5 style="font-size: 28px; color: yellow">3.40%</h5>
</div>
</div>
</div>
<div class="lines">
<div class="total">
<div class="num">
<span style="font-size: 18px">容量渗透率</span>
<h5 style="font-size: 28px; color: orange">0.01%</h5>
</div>
</div>
</div>
<div class="lines">
<div class="total">
<div class="num">
<span style="font-size: 18px">能量渗透率</span>
<h5 style="font-size: 28px; color: yellow">0.44%</h5>
</div>
</div>
</div>
</div>
</div>
<div class="imgboxtwo">
<ul class="contentUl">
<li>
<h5>发电客户数</h5>
<br />
<span style="color: yellow">4721</span>
</li>
<li>
<h5>变电站数量</h5>
<br />
<span style="color: orange">90</span>
</li>
<li>
<h5>台区总数</h5>
<br />
<span style="color: yellow">17416</span>
</li>
<li>
<h5>当前负载率</h5>
<br />
<span style="color: orange">40.19%</span>
</li>
</ul>
</div>
</div>
</div>
<div class="right" id="right">
<div class="one" style="height: 48%; width: 100%">
<div class="cartitle" @click="routerTo('乡村振兴电力综合指数')">
<!-- <div style="
width: 82%;
display: flex;
justify-content: space-between;
align-items: center;
"> -->
<div class="titleFont"><img src="./../assets/indexN/标题箭头.png" alt="" />
<span>乡村振兴电力综合指数</span>
<img src="./../assets/indexN/标题箭头1.png" alt="" /></div>
<!-- <div class="dateSelect">
<div style="text-indent: 15px" @click="handleDate(index)" :class="addColor(index)"
v-for="(item, index) in dateList" :key="index">
{{ item }}
</div>
</div> -->
<!-- </div> -->
</div>
<div class="content">
<div class="line">
<div class="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">月供电可靠性 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">平均停电频次 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">平均停电时间 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="detailedFive"></div>
</div>
<div class="three" style="height: 48%; width: 100%">
<div class="cartitle" @click="routerTo('两高行业企业污染监测')">
<div class="titleFont"><img src="./../assets/indexN/标题箭头.png" alt="" />
<span>两高行业企业污染监测</span>
<img src="./../assets/indexN/标题箭头1.png" alt="" /></div>
</div>
<!-- <div class="three-content">
<div class="three-left">
<div id="detailedThree"></div>
</div>
<div class="three-right">
<ul>
<li v-for="s in gongdanList" @click="openGdDetail(s)">
{{ s.gd_type_name }}
<span style="color: #56fee2">{{ s.total }}</span>
</li>
</ul>
</div>
</div> -->
<div class="content" style="display:inline">
<div class="line">
<div class="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">项目数 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">预算费用总和</span> </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">计划数 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="roseCharts"></div>
</div>
</div>
<div class="right1" id="right">
<!-- <div class="one" style="height: 635px; width: 100%"> -->
<div class="one" style="height:48%; width: 100%">
<div class="cartitle" @click="routerTo('农村生活污水治理设备电量分析')">
<!-- <div style="
width: 82%;
display: flex;
justify-content: space-between;
align-items: center;
"> -->
<div class="titleFont"><img src="./../assets/indexN/标题箭头.png" alt="" />
<span>农村生活污水治理设备电量分析</span>
<img src="./../assets/indexN/标题箭头1.png" alt="" /></div>
<!-- <div class="dateSelect">
<div style="text-indent: 15px" @click="handleDate(index)" :class="addColor(index)"
v-for="(item, index) in dateList" :key="index">
{{ item }}
</div>
</div> -->
<!-- </div> -->
</div>
<div class="content">
<div class="line">
<div class="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">户数高渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">容量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">能量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="detailen"></div>
</div>
<!-- <div class="two" style="height: 340px">
<div class="cartitle">
<div class="titleFont">盐都供电质量统计</div>
</div>
<div id="detailedTwo"></div>
</div> -->
<div class="three" style="height: 48%; width: 100%">
<div class="cartitle" @click="routerTo('数字化排涝抗旱辅助及检修辅助决策')">
<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="total">
<div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
<span style="font-size: 18px">户数高渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">容量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
<div class="line">
<div class="total">
<div class="num">
<span style="font-size: 18px">能量渗透率 </span>
<span style="
font-size: 45px;
font-weight: 600;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(
to bottom,
rgb(189, 255, 231),
rgb(86, 244, 254)
);
" class="numText" :text="CompanyInfo.xlcd">{{ CompanyInfo.xlcd }}</span>
</div>
</div>
</div>
</div>
<div id="shuzihua"></div>
</div>
</div>
<div class="realTimeAlarm" v-show="realTimeAlarmShow">
<div class="content">
<img src="../assets/images/baojing.png" />
<div>都政线XXX环网柜间隔3发生局部放电故障</div>
</div>
</div>
<div class="alarmInformation" v-show="alarmInformationShow">
<div class="top">
<div class="title">报警详情信息</div>
<div class="close">
<img @click="handleClose" src="@/assets/images/close.png" style="cursor: pointer" />
</div>
</div>
<div class="content">
<div class="table user_skills">
<el-table :data="alarmInformationData" style="width: 100%; height: 100%"
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
:row-class-name="rowClass">
<el-table-column label="序号" width="100" align="center">
<template slot-scope="scop">
{{ scop.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="cabinet_name" label="告警位置" align="center">
<!-- <template slot-scope="scope">
<div v-html="scope.row.name"></div>
</template> -->
</el-table-column>
<!-- <el-table-column prop="name" label="间隔" align="center">
</el-table-column> -->
<el-table-column prop="event_desc" label="告警信息" align="center">
</el-table-column>
<el-table-column prop="created_at" label="发生时间" align="center">
</el-table-column>
</el-table>
</div>
</div>
<el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"
layout="prev, pager, next" :total="totals" v-if="pageShow">
</el-pagination>
</div>
<!-- <div style="height:40px;width:40px" class="suoxiao">
<img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
</div> -->
<div class="componentShow" v-if="modelOthers">
<keep-alive>
<component :is="componentShow" :ringMainUnit="device"></component>
</keep-alive>
</div>
<!-- 工单统计弹窗 -->
<div class="componentShow" v-if="orderItem != null">
<component :is="orderShow" :orderItem="orderItem"></component>
</div>
<!-- 故障跳闸明细 -->
<div class="componentShow" v-if="routeItem != null">
<component :is="routeShow" :routeItem="routeItem"></component>
</div>
<!-- 查询配电线路 -->
<div class="componentShow" style="display: block; height: calc(100% - 100px); top: 100px" v-if="lineItem != null">
<component :is="lineShow" :lineItem="lineItem"></component>
</div>
<audio controls="controls" hidden src="../assets/videos/police.wav" ref="audio"></audio>
</div>
</template>
<script>
import {
getCompanyInfo,
getLine,
getBanzugz,
getGdtj,
getDwbzgz,
getGdsgdzl,
getPbtyqk,
getCabinetInfo,
getCabinetList,
getfaultReportList,
getCabinetAlarmList,
} from "../api/index.js";
//引入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: "home",
components: {
ringMainUnit, //环网柜弹窗
workOrder, //工单统计弹窗
routeDetail, //线路故障跳闸明细
lineDetail, //线路详情弹窗
},
data() {
return {
pageShow: true,
totals: 5,
pageSize: 10,
page: 1,
threeImg: require("../assets/images/pieBorder.png"),
enlargeShow: true,
dataGzList: [
{
bz: "大冈",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "配网二班",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "配网一班",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "尚庄",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "秦南",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "郭猛",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "大纵湖",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "潘黄",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "学富",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "龙冈",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "西区",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
{
bz: "楼王",
chbc: 0,
chcg: 0,
jd: 0,
total: 0,
wchz: 0,
},
], //年故障数组
dateList: ["周", "月"],
acolor: true, //是否展示颜色
currentIndex: -1,
alarmInformationData: [],
alarmInformationShow: false, //报警详情信息弹窗
realTimeAlarmShow: false, //实时报警弹窗
modelOthers: false,
componentShow: "",
CompanyInfo: {
pdxl:'3.4%',
xlcd:'0.01%',
pdxl:'3.4%',
pdxl:'3.4%',
pdxl:'3.4%',
pdxl:'3.4%'
},
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,
gongdanList: [
{
gd_type_id: "",
gd_type_name: "频繁停电",
total: 0,
},
{
gd_type_id: "",
gd_type_name: "处理时间长",
total: 0,
},
{
gd_type_id: "",
gd_type_name: "运检类投诉",
total: 0,
},
{
gd_type_id: "",
gd_type_name: "运检类意见",
total: 0,
},
{
gd_type_id: "",
gd_type_name: "民事赔偿",
total: 0,
},
{
gd_type_id: "",
gd_type_name: "多次停电",
total: 0,
},
],
// 工单
orderItem: null,
orderShow: "",
// 线路故障明细
routeItem: null,
routeShow: "",
// 配电线路
lineItem: null,
lineShow: "",
timer: null, //定时器
emergencyList: [], //告警数据
rowTime: "",
};
},
created() { },
mounted() {
// this.beginShowing();
// 监听浏览器窗口大小变化
window.onresize = () => {
clearInterval(this.myTimer);
this.beginShowing();
};
this.detailedTwo11()
this.horizontalChart()
this.detailedOne()
this.barCharts()
this.detailedFive()
this.shuzihuaCharts()
this.roseCharts()
this.detailen1();
this.handleDate(0);
let that = this;
//历史故障接口
let faultData = {
token: localStorage.getItem("token"),
pageSize: "500",
page: "1",
};
},
// beforeDestroy() {
// this.dataDestroy(); // 页面摧毁前，关闭定时器
// },
beforeDestroy() {
// 离开当前路由前的操作
clearInterval(this.timer);
this.timer = null;
},
methods: {
routerTo(data) {
if (data == '盐城地区分布光伏运行监测') {
this.$router.push("/stationBuilding");
}
if (data == '盐城东台区供电所数字化分析') {
this.$router.push("/twentyKV");
}
if (data == '配网工程全过程物资审计') {
this.$router.push("/thirtyFiveKV");
}
if (data == '盐城供电公司配网电能质量管控') {
this.$router.push("/powerQualityControl");
}
if (data == '乡村振兴电力综合指数') {
this.$router.push("/ruralRevitalizationPower");
}
if (data == '两高行业企业污染监测') {
this.$router.push("/enterprisePollutionMonitoring");
}
if (data == '农村生活污水治理设备电量分析') {
this.$router.push("/ruralDomesticSewageTreatment");
}
if (data == '数字化排涝抗旱辅助及检修辅助决策') {
this.$router.push("/digitalFloodDrainageDroughtRelief");
}
},
detailen1() {
var fontColor = "#30eee9";
var myChart = this.$echarts.init(document.getElementById("detailen"));
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
textStyle: {
fontSize: 18, //字体大小
color: "#ffffff", //字体颜色
},
data: ["关联电网事故", "关联检修单"],
},
xAxis: [
{
type: "category",
data: [
"10kv北红线124",
"10kv北红线125",
"10kv北红线126",
"10kv北红线127",
"10kv北红线128",
],
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
},
},
},
],
yAxis: [
{
type: "value",
name: "",
axisLabel: {
textStyle: {
color: "#ffffff",
},
},
},
],
series: [
{
name: "关联电网事故",
type: "bar",
itemStyle: {
color: "#00ffff", // 柱状图颜色
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
//班组
getbanzhu() {
getBanzugz({
action: "detail",
}).then((res) => {
console.log(res, "班组故障详情");
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].gz_time_deal) {
let date = new Date(res.data.data[i].gz_time_deal);
res.data.data[i].gz_time_deal =
this.$moment(date).format("YYYY-MM-DD HH:mm");
// console.log(res.data.data[i].gz_time_deal,'转换后');
}
if (res.data.data[i].gz_time) {
let time = new Date(res.data.data[i].gz_time);
res.data.data[i].gz_time =
this.$moment(time).format("YYYY-MM-DD HH:mm");
}
this.tableData.push(res.data.data[i]);
}
});
},
//工单
getGongdan() {
getGdtj({ action: "tongji" }).then((res) => {
console.log(res, "工单统计数据");
let dataList = res.data.data;
for (let i = 0; i < this.gongdanList.length; i++) {
for (let j = 0; j < res.data.data.length; j++) {
if (
this.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name
) {
this.gongdanList[i].total = res.data.data[j].total;
this.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;
}
}
}
// this.gongdanList = res.data.data;
this.detailedThree(dataList);
// this.$nextTick(() => {
// this.detailedThree(dataList);
// setInterval(() => {
// this.doing();
// }, 200);
// });
});
},
// //表格第一行颜色
rowClass(row, rowIndex) {
if (row.rowIndex === 0) {
return "rowColor0";
} else {
return "";
}
},
//切换当前页
handleCurrentChange(val) {
this.page = val
let tableData = [];
if (this.emergencyList.length != 0) {
tableData = this.emergencyList;
if (val == 1) {
this.alarmInformationData = tableData.slice(0, 10);
document.getElementsByClassName("rowColor0")[0].style.display = "";
} else if (val == 2) {
document.getElementsByClassName("rowColor0")[0].style.display =
"none";
this.alarmInformationData = tableData.slice(10, 20);
} else if (val == 3) {
this.alarmInformationData = tableData.slice(20, 30);
document.getElementsByClassName("rowColor0")[0].style.display =
"none";
} else if (val == 4) {
this.alarmInformationData = tableData.slice(30, 40);
document.getElementsByClassName("rowColor0")[0].style.display =
"none";
} else if (val == 5) {
this.alarmInformationData = tableData.slice(40, 50);
document.getElementsByClassName("rowColor0")[0].style.display =
"none";
}
} else {
return false;
}
},
// 线路详情弹窗
openLineDetail(e) {
// console.log(e);
// var line = e + ''
// console.log(line);
getLine({ action: "pdxl" }).then(({ data }) => {
console.log(data);
this.lineShow = "lineDetail";
this.lineItem = data.data;
});
},
// 线路故障跳闸明细弹窗
rowHandle(e) {
// console.log(e, "参数");
this.routeItem = e;
this.routeShow = "routeDetail";
// console.log(this.routeItem,'线路组件名称');
},
// 工单统计的弹窗
openGdDetail(item) {
this.orderItem = item;
this.orderShow = "workOrder";
},
// 鼠标进入表格
// mouseover() {
// clearInterval(this.myTimer);
// },
// 鼠标离开表格
mouseout() {
this.roll();
},
//调用unity方法
handleUnity(index, item) {
this.btnActive = index;
this.$refs.iframe.contentWindow.handleChange(item);
},
//选择线路
selectLine(value) {
getLine({
action: "query",
line_code: value,
}).then((res) => {
// console.log(res,'选择线路');
if (res.data.data != 0 && res.data.data != null) {
this.$refs.iframe.contentWindow.handleChangeLine(
res.data.data.line_name
);
} else if (res.data.data == null) {
this.$refs.iframe.contentWindow.handleChangeLine("");
}
});
},
detailedOne() {
let myChart = this.$echarts.init(document.getElementById("detailedOne"));
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();
});
},
shuzihuaCharts() {
let myChart = this.$echarts.init(document.getElementById("shuzihua"));
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: [
{
x: "center",
data: ["平均停电时间(小时)", "平均停电频次(次/户)"],
textStyle: {
fontSize: 18,
color: "#fff",
},
},
{
x: "center",
top: "5%",
data: ["总时户数", "停电次数", "应采数"],
textStyle: {
fontSize: 18,
color: "#fff",
},
},
],
xAxis: [
{
type: "category",
data: ["2019", "2020", "2021", "2022"],
axisPointer: {
type: "shadow",
},
axisLabel: {
color: "#fff",
fontSize: "18",
},
},
],
yAxis: [
{
type: "value",
min: 0,
max: 5,
interval: 1,
axisLabel: {
formatter: "{value} 万",
textStyle: {
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,
},
},
},
{
type: "value",
min: 0,
max: 0.5,
interval: 0.1,
axisLabel: {
formatter: "{value}",
textStyle: {
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",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(240,230,140,.2) " },
{ offset: 0.5, color: "rgb(240,230,140,.6)" },
{ offset: 0, color: "rgb(240,230,140)" },
]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
data: [0.13, 0.23, 0.13, 0.23],
},
{
name: "平均停电频次(次/户)",
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(65,105,225,.2) " },
{ offset: 0.5, color: "rgb(65,105,225,.6)" },
{ offset: 0, color: "rgb(65,105,225)" },
]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
data: [0.23, 0.13, 0.23, 0.13],
},
{
name: "总时户数",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value;
},
},
itemStyle: {
normal: {
color: "#0080ff",
lineStyle: {
color: "#0080ff",
},
},
},
data: [4, 3, 2, 4],
},
{
name: "停电次数",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value;
},
},
itemStyle: {
normal: {
color: "#a6a600",
lineStyle: {
color: "#a6a600",
},
},
},
data: [2, 3, 4, 3],
},
{
name: "应采数",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value;
},
},
itemStyle: {
normal: {
color: "#977000",
lineStyle: {
color: "#977000",
},
},
},
data: [3, 1, 4, 2],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
detailedTwo() {
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
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();
});
},
detailedTwo11() {
var fontColor = '#30eee9';
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
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();
});
},
horizontalChart() {
var myChart = this.$echarts.init(document.getElementById("horizontalChart"));
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 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();
});
},
barCharts() {
var myChart = this.$echarts.init(document.getElementById("barCharts"));
let value = 18;
let legendName = ['华北', '华中', '华东', '华南', '东北', '西北'];
var option = {
// backgroundColor: '#031845',
// title:{
// text:"123",
// left:'center',
// top:'45%',
// textStyle:{
// color:"#FFF",
// fontSize:"80px",
// }
// },
tooltip: {
trigger: 'item',
formatter: "{b} : {d}% <br/> {c}"
},
// graphic: {
// elements: [
// {
// type: 'text',
// left: 'center', // 相对父元素居中
// top: 'center', // 相对父元素上下的位置
// style: {
// fill: '#FFF',
// text: ['357'],
// zlevel:"100",
// font: '80px Arial Normal',
// }
// }]
// },
// title: {
// text:'总考生数',
// left:'center',
// top:'center',
// padding:[24,0],
// textStyle:{
// color:'#fff',
// fontSize:18*scale,
// align:'center'
// }
// },
title: {
subtext: '59.53万',
text: '总计',
x: 'center',
y: '40%',
textStyle: {
fontSize: 24,
fontWeight: 'normal',
color: '#00FFFF',
},
subtextStyle: {
fontSize: 28,
fontWeight: 'normal',
align: "center",
color: '#CCCCCC'
},
},
series: [{
type: 'pie',
radius: ['80', '120'],
center: ['50%', '50%'],
color: ['#80C269', '#00FFFF', '#0090F1', '#FFA800', '#4658F6'],
itemStyle: {
normal: {
borderWidth: 5,
borderColor: '#031845',
}
},
data: [{
value: 27,
name: '严重不满人员'
},
{
value: 30,
name: '关注群体'
},
{
value: 24,
name: '散居外国人'
},
{
value: 27,
name: '上访重点人'
},
{
value: 27,
name: '重点精神病'
}
],
labelLine: {
normal: {
show: true,
length: 50,
length2: 50,
lineStyle: {
color: '#CCCCCC',
width: 2
}
}
},
label: {
normal: {
formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
rich: {
b: {
fontSize:14,
color: '#FFF',
align: 'left',
padding: 4
},
hr: {
borderColor: '#CCCCCC',
width: '100%',
borderWidth: 2,
height: 0
},
c: {
fontSize: 14,
align: 'center',
padding: 4,
color: '#00EDED'
}
}
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
roseCharts() {
var myChart = this.$echarts.init(document.getElementById("roseCharts"));
var option = {
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
// title: {
// text: '网络/安全设备',
// left: '60',
// top: 0,
// textAlign: 'center',
// textStyle: {
// color: '#fff',
// fontSize: 14,
// fontWeight: 0
// }
// },
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "15",
// bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: '#A3E2F4',
fontSize: 12,
fontWeight: 0
},
data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']
},
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: {
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();
});
},
detailedThree(dataList) {
// console.log(this.threeImg,'图片');
// var equipment = [dataList.yjlts, dataList.yjlyj];
var that = this;
// console.log(that,'指向');
var colorList = [
"#0090ff",
"#06d3c4",
"#66b0ed",
"#7cb79d",
"#2361b4",
"rgb(198,123,244)",
];
var colorList1 = ["rgb(198,123,244)", "#2361b4"];
// 饼图数据
var threeList = dataList.map((ele) => {
return { name: ele.gd_type_name, value: ele.total };
});
// console.log(threeList, "饼图数据");
// var legendData = dataList.concat(
// {
// value: equipment[0],
// name: "运检类投诉",
// },
// {
// value: equipment[1],
// name: "运检类意见",
// }
// );
this.myChartBin = this.$echarts.init(
document.getElementById("detailedThree")
);
// var graphicList = [];
// legendData.forEach((ele, index) => {
// if (index <= 2) {
// graphicList.push({
// type: "image",
// style: {
// image: this.threeImg,
// width: 164,
// height: 41,
// x: 250,
// y: 55 * (index + 1),
// },
// });
// } else {
// graphicList.push({
// type: "image",
// style: {
// image: this.threeImg,
// width: 164,
// height: 41,
// x: 424,
// y: 55 * (index - 2),
// },
// });
// }
// });
this.option = {
borderColor: "none",
tooltip: {
formatter: function (param) {
if (param.data.type == null) {
return param.data.name + ":" + param.value + "个";
} else {
return param.data.name + ":" + param.value + "个";
}
},
},
legend: {
icon: "pin",
// height: 90,
top: 20,
show: false,
// bottom:0,
// itemGap: 40,
// lineHeight: 80,
// padding: [30, 0, 30, 0],
// right: '20%',
// orient: "vertical", //垂直显示
x: "center", //延Y轴居中
data: dataList.map((ele) => {
return ele.gd_type_name;
}),
textStyle: {
color: "#ffffff",
fontSize: 15,
// width:20,
// height:60,
},
},
series: [
{
name: "",
type: "pie",
radius: [0, "70%"],
center: ["50%", "50%"],
startAngle: 60, //默认角度
label: {
position: "inner",
show: false,
},
itemStyle: {
normal: {
borderColor: "none",
borderWidth: 2,
fontSize: 16,
color: function (params) {
return colorList[params.dataIndex];
},
},
},
selectedMode: "single",
data: threeList,
},
// {
// name: "运检类",
// type: "pie",
// radius: ["70%", "80%"],
// center: ["20%", "50%"],
// startAngle: 30,
// itemStyle: {
// normal: {
// fontSize: 16,
// color: function (params) {
// return colorList1[params.dataIndex];
// },
// // color:'#F4C907',
// },
// },
// label: {
// normal: {
// formatter: function (params) {
// return params.data.name + ":" + params.data.type + "个";
// },
// color: "auto",
// show: false,
// fontSize: 16,
// },
// },
// data: [
// {
// value: equipment[0],
// name: "运检类投诉",
// type: equipment[0],
// },
// {
// value: equipment[1],
// name: "运检类意见",
// type: equipment[1],
// },
// ],
// animation: false,
// },
],
};
this.myChartBin.setOption(this.option);
window.addEventListener("resize", () => {
this.myChartBin.resize();
});
},
doing() {
this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
this.myChartBin.setOption(this.option);
},
detailedFour(dataList) {
let yearBzData = [];
let yearChcg = [];
let yearChbc = [];
let yearWchz = [];
let yearJieDi = [];
let yearFenJi = []
for (let i = 0; i < dataList.length; i++) {
yearBzData.push(dataList[i].bz);
yearChcg.push(dataList[i].chcg);
yearChbc.push(dataList[i].chbc);
yearWchz.push(dataList[i].wchz);
yearJieDi.push(dataList[i].jd);
yearFenJi.push(dataList[i].fjbh)
}
// console.log(yearJieDi,'接地数据');
let that = this;
let myChart = this.$echarts.init(document.getElementById("detailedFour"));
var option = {
tooltip: {
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
fontSize: 16,
},
},
},
grid: {
borderWidth: 0,
top: 30,
bottom: "17%",
left: "6%",
right: "6%",
textStyle: {
color: "#fff",
},
},
legend: {
icon: "rect",
right: "4%",
textStyle: {
color: "#ffffff",
},
data: ["重合成功", "重合不成", "无重合闸", "接地", "分级保护"],
},
calculable: true,
xAxis: [
{
type: "category",
trigger: "axis",
axisLine: {
show: false,
lineStyle: {
color: "#fff",
fontSize: 16,
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 14,
rotate: 30,
},
data: yearBzData,
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgb(83,83,83)",
fontSize: 16,
},
},
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 16,
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
splitArea: {
show: false,
},
},
],
series: [
{
name: "重合成功",
type: "bar",
stack: "Total1",
barMaxWidth: 15,
barGap: "10%",
label: {
show: true,
formatter: function (params) {
if (params.value == 0) {
return "";
} else {
return params.value;
}
},
},
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(194,190,190,1)",
},
{
offset: 1,
color: "rgba(194,190,190,0)",
},
]),
borderColor: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(194,190,190,1)",
},
{
offset: 1,
color: "rgba(194,190,190,0)",
},
]
),
},
},
data: yearChcg,
},
{
name: "重合不成",
type: "bar",
barMaxWidth: 15,
stack: "Total1",
label: {
show: true,
formatter: function (params) {
if (params.value == 0) {
return "";
} else {
return params.value;
}
},
},
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(86,254,226,1)",
},
{
offset: 1,
color: "rgba(86,254,226,0)",
},
]),
borderColor: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(86,254,226,1)",
},
{
offset: 1,
color: "rgba(86,254,226,0)",
},
]
),
},
},
data: yearChbc,
},
{
name: "无重合闸",
type: "bar",
barMaxWidth: 15,
stack: "Total1",
label: {
show: true,
formatter: function (params) {
if (params.value == 0) {
return "";
} else {
return params.value;
}
},
},
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(237,125,49,1)",
},
{
offset: 1,
color: "rgba(237,125,49,0)",
},
]),
borderColor: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(237,125,49,1)",
},
{
offset: 1,
color: "rgba(237,125,49,0)",
},
]
),
barBorderRadius: 0,
},
},
data: yearWchz,
},
{
name: "接地",
type: "bar",
barMaxWidth: 15,
stack: "Total1",
label: {
show: true,
formatter: function (params) {
if (params.value == 0) {
return "";
} else {
return params.value;
}
},
},
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(35,160,247,1)",
},
{
offset: 1,
color: "rgba(35,160,247,0)",
},
]),
borderColor: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(35,160,247,1)",
},
{
offset: 1,
color: "rgba(35,160,247,0)",
},
]
),
barBorderRadius: 0,
},
},
data: yearJieDi,
},
{
name: "分级保护",
type: "bar",
barMaxWidth: 15,
stack: "Total1",
label: {
show: true,
formatter: function (params) {
if (params.value == 0) {
return "";
} else {
return params.value;
}
},
},
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(156,73,200,1)",
},
{
offset: 1,
color: "rgba(156,73,200,0)",
},
]),
borderColor: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(156,73,200,1)",
},
{
offset: 1,
color: "rgba(156,73,200,0)",
},
]
),
barBorderRadius: 0,
},
},
data: yearFenJi,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
detailedFive() {
let myChart = this.$echarts.init(document.getElementById("detailedFive"));
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();
});
},
//报警详情信息弹窗
enlargeBtn(index) {
let that = this;
this.pageShow = false
if (index == 0) {
// let endDate = this.$moment(new Date())
// .format("YYYY-MM-DD hh:mm:ss");
// let startDate = this.$moment(new Date()).subtract(1,'h').format('YYYY-MM-DD hh:mm:ss')
// this.page = 1;
// let cabData = {
// token: localStorage.getItem("token"),
// pageSize: this.pageSize,
// page: this.page,
// sn: "",
// startDate: startDate,
// endDate: endDate,
// };
// getCabinetAlarmList(cabData).then((res) => {
// if (res.data.data.data != null) {
// this.totals = res.data.data.total;
// this.alarmInformationData = res.data.data.data;
// }
// });
this.$refs.audio.currentTime = 0; //从头开始播放提示音
this.$nextTick(() => {
this.$refs.audio.play();
});
this.alarmInformationShow = true;
this.$nextTick(() => {
this.pageShow = true
})
this.realTimeAlarmShow = false;
this.handleCurrentChange(1);
} else if (index == 1) {
this.enlargeShow = false;
// this.$refs.iframe.contentWindow.fullscreen(1);
document.getElementById("left").style.display = "none";
document.getElementById("right").style.display = "none";
document.getElementById("middle").style.width = "100%";
document.getElementById("middle").style.height = "100%";
document.getElementById("detailed").style.display = "none";
document.getElementById("threeModel").style.height = "100%";
document.getElementById("threeModel").style.width = "100%";
}
},
//报警详情信息弹窗
enlargeBtn1(index) {
this.pageShow = false
if (index == 0) {
// this.$refs.audio.currentTime = 0; //从头开始播放提示音
// this.$refs.audio.play();
// this.alarmInformationShow = true;
// this.realTimeAlarmShow = false;
this.$refs.audio.currentTime = 0; //从头开始播放提示音
this.$nextTick(() => {
this.$refs.audio.play();
});
this.alarmInformationShow = true;
this.$nextTick(() => {
this.pageShow = true
})
this.realTimeAlarmShow = false;
this.handleCurrentChange(1);
} else if (index == 1) {
this.enlargeShow = true;
// this.$refs.iframe.contentWindow.fullscreen(1);
document.getElementById("left").style.display = "flex";
document.getElementById("left").style.width = "17.18%";
document.getElementById("right").style.display = "flex";
document.getElementById("right").style.width = "17.18%";
document.getElementById("middle").style.width = "55.7%";
document.getElementById("middle").style.height = "100%";
document.getElementById("detailed").style.display = "flex";
document.getElementById("detailed").style.height = "350px";
}
},
handleClose() {
this.alarmInformationShow = false;
this.$refs.audio.pause();
this.page = 1;
this.totals = 0;
},
handleDate(index) {
this.currentIndex = index;
// if (index == 0) {
//周配变停运
getPbtyqk({
action: index == 0 ? "week" : "month",
}).then((res) => {
let dataPbty = [];
dataPbty = res.data.data;
this.detailedFive(dataPbty);
let dataPb = [];
let dataCf = [];
for (let i = 0; i < dataPbty.length; i++) {
dataPb.push(dataPbty[i].pbsl);
dataCf.push(dataPbty[i].cftytc);
}
this.topContent[0].count = dataPb.reduce((x, y) => x + y);
this.topContent[1].count = dataCf.reduce((x, y) => x + y);
let pbCount =
(this.topContent[1].count / this.topContent[0].count) * 100;
let pbCountString = pbCount.toString();
if (pbCountString.indexOf(".") != -1) {
this.topContent[2].count =
pbCountString.substring(0, pbCountString.indexOf(".") + 3) + "%";
} else {
this.topContent[2].count = pbCountString + "%";
}
});
// }else if (index == 1) {
// //月配变停运
// getPbtyqk({
// action:"month"
// }).then((res)=>{
// let dataPbty = [];
// dataPbty = res.data.data
// this.detailedFive(dataPbty);
// let dataPb = [];
// let dataCf = [];
// for (let i = 0; i < dataPbty.length; i++) {
// dataPb.push(dataPbty[i].pbsl);
// dataCf.push(dataPbty[i].cftytc);
// }
// this.topContent[0].count = dataPb.reduce((x, y) => x + y)
// this.topContent[1].count = dataCf.reduce((x, y) => x + y)
// let pbCount = (this.topContent[1].count/this.topContent[0].count)*100
// let pbCountString = pbCount.toString()
// if (pbCountString.indexOf(".") != -1) {
// this.topContent[2].count = pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
// }else{
// this.topContent[2].count = pbCountString +'%'
// }
// })
// }
},
addColor(index) {
if (this.currentIndex == index) {
return { active: this.acolor };
}
},
},
watch: {
//监听内容
value(newVal, oldVal) {
if (newVal != oldVal && newVal != "") {
this.selectLine(newVal);
} else if (newVal == "") {
this.selectLine("");
this.value = "";
}
},
rowTime: {
deep: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal, "pppppppppppppppp");
if (newVal != oldVal && newVal != "" && oldVal != "") {
this.enlargeBtn(0);
}
},
},
},
};
</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;
}
}
// 滚动条的宽度
/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 {
// width: 604px;
width: 17.18%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&>div {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
position: relative;
.cartitle {
height: 52px;
width: 100%;
// background: url("../assets/images/carTitle.png") no-repeat;
font-size: 21px;
font-weight: 600;
color: #ffffff;
line-height: 52px;
// text-align: left;
text-indent: 26px;
}
.content {
padding: 24px 31px 0 31px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.line {
width: 262px;
display: flex;
flex-flow: column nowrap;
.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);
}
}
}
}
}
#detailedTwo1 {
// width: 100%;
// height: calc(100% - 52px);
width: 100%;
height: calc(100% - 200px);
}
#horizontalChart {
// width: 100%;
// height: calc(100% - 52px);
width: 100%;
height: calc(100% - 150px);
}
#barCharts {
// width: 100%;
// height: calc(100% - 52px);
width: 60%;
height: calc(100% - 200px);
position: absolute;
top: 28%;
left: 33%;
}
}
}
.left1 {
// width: 604px;
width: 17.18%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&>div {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
.cartitle {
height: 52px;
width: 100%;
// background: url("../assets/images/carTitle.png") no-repeat;
font-size: 21px;
font-weight: 600;
color: #ffffff;
line-height: 52px;
// text-align: left;
text-indent: 26px;
}
.content {
padding: 24px 31px 0 31px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.line {
width: 262px;
display: flex;
flex-flow: column nowrap;
.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);
}
}
}
}
}
#detailedTwo1 {
width: 100%;
height: calc(100% - 52px);
}
#detailedOne {
width: 100%;
height: calc(100% - 200px);
}
#horizontalChart {
// width: 100%;
// height: calc(100% - 52px);
width: 100%;
height: calc(100% - 200px);
}
}
}
.middle {
// width: 1590px;
width: 32.7%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
.imgboxone {
background: url("../assets/02/地图弹窗三个数据外框.png") no-repeat;
background-size: 100%;
float: right;
width: 40vh;
height: 25vh;
position: relative;
top: 5vh;
right: 1vh;
.contents {
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.lines {
width: 100%;
display: flex;
flex-flow: column nowrap;
background: url("../assets/02/弹窗里的小框子.png") no-repeat;
}
.total {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
margin-bottom: 15%;
.num {
float: left;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #ffffff;
}
}
}
}
.imgboxtwo {
padding: 0 0 0 20px;
background: url("../assets/02/地图弹窗四个内容的框.png") no-repeat;
background-size: 100%;
float: left;
width: 40vh;
height: 25vh;
position: relative;
top: 52vh;
left: 30vh;
display: flex;
.contentUl {
display: flex;
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
/* flex布局 */
display: flex;
// 开启换行
flex-wrap: wrap;
// 主轴上两端对齐
justify-content: space-between;
// 副轴上两端对齐
align-content: space-between;
//li盒子大小设置
li {
h5 {
float: left;
}
span {
font-size: 30px;
}
width: 49.5%;
//高度调整
height: 49%;
list-style: none;
font-size: 24px;
color: #fff;
background: url("../assets/02/弹窗里的小框子.png") no-repeat;
}
}
}
.map {
background: url("../assets/indexN/地图.png") no-repeat;
vertical-align: middle;
display: table-cell;
text-align: center;
margin-left: -20%;
}
}
.right {
// width: 604px;
width: 17.18%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&>div {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
position: relative;
.cartitle {
height: 52px;
width: 100%;
// background: url("../assets/images/carTitle.png") no-repeat;
font-size: 21px;
font-weight: 600;
color: #ffffff;
line-height: 52px;
// text-align: left;
text-indent: 26px;
}
.content {
padding: 24px 31px 0 31px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.line {
width: 262px;
display: flex;
flex-flow: column nowrap;
.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);
}
}
}
}
}
}
.one {
.top {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
.topContent {
width: 30%;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
}
}
}
#detailedThree {
width: 100%;
// height: calc(100% - 52px);
height: 100%;
}
#detailedTwo {
width: 100%;
height: calc(100% - 52px);
}
#detailedFive {
width: 100%;
height: calc(100% - 150px);
}
}
.right1 {
// width: 604px;
width: 17.18%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&>div {
width: 100%;
background: url("../assets/indexN/boxLr.png") no-repeat;
background-size: 100% 100%;
position: relative;
.cartitle {
height: 52px;
width: 100%;
// background: url("../assets/images/carTitle.png") no-repeat;
font-size: 21px;
font-weight: 600;
color: #ffffff;
line-height: 52px;
// text-align: left;
text-indent: 26px;
}
.content {
padding: 24px 31px 0 31px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.line {
width: 262px;
display: flex;
flex-flow: column nowrap;
.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);
}
}
}
}
}
}
#detailen {
width: 100%;
height: calc(100% - 150px);
}
#shuzihua {
width: 100%;
height: calc(100% - 150px);
}
.one {
.top {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
.topContent {
width: 30%;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
}
}
}
#detailedThree {
width: 100%;
// height: calc(100% - 52px);
height: 100%;
}
#detailedTwo {
width: 100%;
height: calc(100% - 52px);
}
#detailedFive {
width: 100%;
height: calc(100% - 150px);
}
}
.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;
}
}
//弹窗样式
.componentShow {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 111;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
}
.realTimeAlarm {
width: 517px;
height: 136px;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
top: 40%;
background: url("../assets/images/realTimeAlarmKuang.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
.content {
color: #ffffff;
width: 75%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 4%;
}
}
.alarmInformation {
width: 900px;
height: 380px;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
top: 28%;
background: url("../assets/images/baojingxinxiKuang.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 10px 13px;
::-webkit-scrollbar {
display: none;
}
.top {
height: 10%;
width: 91%;
display: flex;
align-content: flex-start;
justify-content: space-between;
.title {
font-size: 20px;
font-weight: 900;
color: transparent;
align-items: center;
display: flex;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to bottom,
rgb(255, 255, 255),
rgb(86, 244, 254));
}
}
.content {
height: 82%;
width: 100%;
overflow: auto;
.user_skills {
/deep/ .el-table {
background-color: transparent !important;
}
/deep/ .el-table th {
background-color: transparent !important;
}
/deep/ .el-table__header {
height: 48px;
background: url("../assets/images/tableBg.png") no-repeat;
background-size: 100% 100%;
}
/deep/ .el-table__header th {
border: none;
padding: 0;
height: 40px;
.cell {
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
&.el-table__cell.is-leaf {
border: none !important;
}
}
/deep/ .el-table tr {
background-color: transparent;
color: #fff !important;
}
/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;
}
/deep/ .el-table th.el-table__cell>.cell {
color: #ffffff;
}
/deep/.el-table .el-table__cell {
padding: 3px 0;
}
&::before {
//去除底部白线
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
.el-table::before {
background-color: transparent;
}
::v-deep .el-table .el-table__body tr.el-table__row td {
background: rgba(79, 218, 255, 0.1) !important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: rgba(79, 218, 255, 0.06) !important;
}
}
}
}
.dateSelect {
display: flex;
font-size: 12px;
background: url("../assets/images/dateKuang.png") no-repeat;
background-size: 100% 100%;
height: 25px;
width: 61px;
align-items: center;
}
.active {
width: 32px;
height: 25px;
color: rgb(78, 230, 207);
background: url("../assets/images/dateAction.png") no-repeat;
background-size: 100% 100%;
line-height: 26px;
}
}
.suoxiao {
position: absolute;
bottom: 0;
right: 0;
}
// }
</style>
<style lang="less" scoped>
.three {
.three-content {
width: 100%;
height: calc(100% - 52px);
display: flex;
.three-left {
width: 40%;
height: 100%;
}
.three-right {
width: 60%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
ul {
width: 100%;
li {
width: 164px;
height: 41px;
margin-top: 15px;
background-image: url(../assets/images/pieBorder.png);
float: left;
color: #fff;
line-height: 41px;
font-size: 18px;
}
li:nth-child(2n) {
margin-left: 10px;
}
}
}
}
.content {
padding: 24px 31px 0 31px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
.line {
width: 262px;
display: flex;
flex-flow: column nowrap;
.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);
}
}
}
}
}
#roseCharts {
// width: 100%;
// height: calc(100% - 52px);
width: 60%;
height: calc(100% - 200px);
position: absolute;
top: 28%;
left: 33%;
}
}
.selectChange {
width: 100% !important;
height: 100% !important;
.el-select {
margin-left: -44px;
/deep/ .el-input__inner {
background: url("../assets/images/selectCard.png") no-repeat;
background-size: 100% 100%;
border: none;
padding-left: 58px;
}
/deep/ .el-input__prefix,
/deep/ .el-input__suffix {
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
height: 100%;
text-align: center;
margin-right: 17px;
}
/deep/ .el-input__inner::-webkit-input-placeholder {
color: rgb(78, 230, 207); // 初始化的文字颜色
}
/deep/ .el-input__inner {
color: rgb(78, 230, 207);
}
}
}
// .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
// }
</style>