首页

package-lock.json

@@ -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",

package.json

@@ -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"

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;
+  height: 100px;
-  background: rgb(13, 41, 65);
+  /* 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>

src/main.js

@@ -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
 

src/views/Home.vue

@@ -1,37 +1,458 @@
 <template>
   <div class="home">
-    <div class="content">
+    <div class="left">
-      111
+      <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',
+  name: "home",
-  components: {
+  components: {},
+  data() {
+    return {
+      CompanyInfo: {},
+      tableData: [
+        {
+          name: "大岗供电所",
+          line: "10kv龙灯线",
+          why: "125-10",
+          sucss: "1",
+          unsucss: "1",
+          noneunsucss: "/",
+          address: "/",
+          total: "2",
+        },
+      ],
+      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所", "热力图"],
+      btnActive: 0,
+    };
   },
-  data(){
+  mounted() {
-    return{
-      CompanyInfo:{}
-    }
-  },
-  mounted(){
     // 盐都区供电公司概况
-    getCompanyInfo().then(res=>{
+    getCompanyInfo().then((res) => {
-      this.CompanyInfo = res.data.data
+      this.CompanyInfo = res.data.data;
-      console.log(this.CompanyInfo,'aaaa');
+    });
-    })
+    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>