4075 lines
113 KiB
Vue
4075 lines
113 KiB
Vue
<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> |