|
@ -10629,6 +10629,11 @@
|
|||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
},
|
||||
"v-fit-columns": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/v-fit-columns/-/v-fit-columns-0.2.0.tgz",
|
||||
"integrity": "sha512-xR0jIFmTyJeg4VZgEx7z8BIijZnHQegtbwAhG3L3TmyAoq/TXk7H6vzFLNxAVzOj9pSpO/0B2mf7jmuO2nE4Ag=="
|
||||
},
|
||||
"validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
"less": "^4.1.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"moment": "^2.29.4",
|
||||
"v-fit-columns": "^0.2.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"vuex": "^3.0.1"
|
||||
|
|
135
src/App.vue
|
@ -1,12 +1,56 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="top"></div>
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
xxx电力可视化系统
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)">{{item}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">
|
||||
<span>11月30日 周一</span>
|
||||
<span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
|
||||
</div>
|
||||
<div class="weather" v-for="(item,index) in weatherArr">
|
||||
<div class="pic">
|
||||
<img :src="item.pic" alt="">
|
||||
</div>
|
||||
<div class="date">
|
||||
<span>{{item.day}}</span>
|
||||
<span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home',
|
||||
data(){
|
||||
return{
|
||||
routerTitle:['首页','20kv','35kv','站房智辅'],
|
||||
routerActive:0,
|
||||
weatherArr:[
|
||||
{day:'今天',temperature:'27℃-19℃',pic:require('./assets/images/sun.png')},
|
||||
{day:'12月01日',temperature:'27℃-19℃',pic:require('./assets/images/union.png')},
|
||||
{day:'12月02日',temperature:'27℃-19℃',pic:require('./assets/images/windy.png')}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
handleChange(index){
|
||||
this.routerActive = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "./assets/index.css";
|
||||
#app {
|
||||
|
@ -15,14 +59,95 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
background: url('./assets/images/homePg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: rgb(13, 41, 65);
|
||||
height: 100px;
|
||||
/* background: rgba(147, 230, 244,0.6); */
|
||||
/* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
|
||||
background: url('./assets/images/topBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
width: 815px;
|
||||
height: 97px;
|
||||
background: url('./assets/images/titleBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 22px;
|
||||
color: #ffffff;
|
||||
line-height: 97px;
|
||||
padding-left: 86px;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.middle{
|
||||
width: auto;
|
||||
height: 78px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
.router{
|
||||
width: 244px;
|
||||
height: 100%;
|
||||
line-height: 78px;
|
||||
color: rgb(41,114,124);
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #ffffff;
|
||||
background: url('./assets/images/routerActive.png') no-repeat;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
// width: 740px;
|
||||
height: 78px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
padding-right: 15px;
|
||||
.time{
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
.weather{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
margin-left: 36px;
|
||||
.pic{
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
}
|
||||
.date{
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
margin-left: 19px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
</style>
|
||||
|
|
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 870 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 183 KiB |
After Width: | Height: | Size: 158 KiB |
After Width: | Height: | Size: 2.5 MiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 459 B |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 282 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 2.4 KiB |
|
@ -5,7 +5,9 @@ import store from './store'
|
|||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
import Plugin from 'v-fit-columns';
|
||||
Vue.use(Plugin);
|
||||
import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
|
|
|
@ -1,37 +1,458 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<div class="content">
|
||||
111
|
||||
<div class="left">
|
||||
<div class="one" style="height: 405px">
|
||||
<div class="cartitle">盐都区供电公司概况</div>
|
||||
<div class="content">
|
||||
<div class="line">
|
||||
<div class="total">
|
||||
<div class="pic">
|
||||
<img src="@/assets/images/rouer.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<span style="font-size: 45px; font-weight: 600">304</span>
|
||||
<span style="font-size: 18px">配电路线</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="lists">
|
||||
<div class="title">电缆化率</div>
|
||||
<div class="number">43.6%</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">配电站开关</div>
|
||||
<div class="number">169</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">配电室</div>
|
||||
<div class="number">579</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">户外环网柜</div>
|
||||
<div class="number">1440</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="total">
|
||||
<div class="pic">
|
||||
<img src="@/assets/images/routerLong.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<span style="font-size: 45px; font-weight: 600">4128</span>
|
||||
<span style="font-size: 18px">路线长度</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="lists">
|
||||
<div class="title">架空路线</div>
|
||||
<div class="number">2328</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">架空绝缘导线</div>
|
||||
<div class="number">2012.6</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">架空绝缘化率</div>
|
||||
<div class="number">86.45%</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="title">电缆路线</div>
|
||||
<div class="number">1800</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two" style="height: 570px">
|
||||
<div class="cartitle">全市本周配网故障次数</div>
|
||||
<div class="table user_skills">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; height: 100%"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column label="" align="center" width="10">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="班组" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="line" label="故障路线" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="why" label="故障原因" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="sucss" label="重合成功" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column prop="unsucss" label="重合不成" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="nonesucss" label="无重合闸" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="接地" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="合计" width="60">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="one" style="height: 635px; width: 100%">
|
||||
<div class="unityBtn">
|
||||
<div
|
||||
class="btn"
|
||||
:class="{ btnAct: btnActive == index }"
|
||||
v-for="(item, index) in btnArr"
|
||||
@click="handleUnity(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen">
|
||||
<div class="btn"></div>
|
||||
<div class="btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailed">
|
||||
<div class="two" style="height: 350px; width: 780px">
|
||||
<div class="cartitle">本周路线故障跳闸明细</div>
|
||||
<div id="detailedOne"></div>
|
||||
</div>
|
||||
<div class="three" style="height: 350px; width: 780px">
|
||||
<div class="cartitle">本年度路线故障调整明细</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="one" style="height: 310px">
|
||||
<div class="cartitle">盐都配变停运管理情况</div>
|
||||
</div>
|
||||
<div class="two" style="height: 340px">
|
||||
<div class="cartitle">盐都供电质量统计</div>
|
||||
</div>
|
||||
<div class="three" style="height: 310px">
|
||||
<div class="cartitle">工单统计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCompanyInfo} from '../api/index.js'
|
||||
import { getCompanyInfo } from "../api/index.js";
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
name: "home",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
CompanyInfo: {},
|
||||
tableData: [
|
||||
{
|
||||
name: "大岗供电所",
|
||||
line: "10kv龙灯线",
|
||||
why: "125-10",
|
||||
sucss: "1",
|
||||
unsucss: "1",
|
||||
noneunsucss: "/",
|
||||
address: "/",
|
||||
total: "2",
|
||||
},
|
||||
],
|
||||
btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所", "热力图"],
|
||||
btnActive: 0,
|
||||
};
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
CompanyInfo:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
// 盐都区供电公司概况
|
||||
getCompanyInfo().then(res=>{
|
||||
this.CompanyInfo = res.data.data
|
||||
console.log(this.CompanyInfo,'aaaa');
|
||||
})
|
||||
getCompanyInfo().then((res) => {
|
||||
this.CompanyInfo = res.data.data;
|
||||
});
|
||||
this.detailedOne();
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
handleUnity(index) {
|
||||
this.btnActive = index;
|
||||
},
|
||||
detailedOne() {
|
||||
var myChart = this.$echarts.init(document.getElementById("detailedOne"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
show:false,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["工区", "三新", "盐都", "滨海", "大丰", "东台", "阜宁", "建湖", "射阳", "响水"],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:'故障次数',
|
||||
type: "value",
|
||||
data:[0,2,4,6,8,10],
|
||||
nameTextStyle:{
|
||||
color:'#ffffff'
|
||||
},
|
||||
axisLabel:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Direct",
|
||||
type: "bar",
|
||||
barWidth:22,
|
||||
itemStyle:{
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0, 1, 0, 0,
|
||||
[
|
||||
{offset: 0, color: 'rgba(23,74,100,0.6)'},
|
||||
{offset: 1, color: 'rgb(86,254,226)'}
|
||||
]
|
||||
)
|
||||
},
|
||||
data: [1,1, 4, 6,5, 9, 4,5,0,3],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontStyle:'normal',
|
||||
fontWeight:'normal',
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.home{
|
||||
.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;
|
||||
}
|
||||
/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 !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 !important;
|
||||
// word-break: break-all;
|
||||
}
|
||||
&::before {
|
||||
//去除底部白线
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
width: 100%;
|
||||
background: url("../assets/images/homeCard.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: 20px;
|
||||
.num {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.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: 12px;
|
||||
padding: 0 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
& > div {
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
padding: 20px 14px 0 14px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 52px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle {
|
||||
width: 1590px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
.one {
|
||||
background: url("../assets/images/homeCard.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.unityBtn {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 94px;
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
color: rgb(28, 95, 98);
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
background: url("../assets/images/btnAct.png") no-repeat;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btnAct {
|
||||
color: #ffffff;
|
||||
background: url("../assets/images/unityBtn.png") no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailed {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
background: url("../assets/images/detailedCard.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.cartitle {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: url("../assets/images/detailed.png") no-repeat;
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 52px;
|
||||
text-align: left;
|
||||
text-indent: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#detailedOne{
|
||||
width: 100%;
|
||||
height: calc(100% - 52px);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 604px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
width: 100%;
|
||||
background: url("../assets/images/homeCard.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|