Browse Source

集团首页修改

fujunwen 4 years ago
parent
commit
f95759a787
2 changed files with 218 additions and 18 deletions
  1. BIN
      src/assets/images/icons/warning.png
  2. 218 18
      src/views/statistics/index.vue

BIN
src/assets/images/icons/warning.png


+ 218 - 18
src/views/statistics/index.vue

@@ -29,10 +29,10 @@
                 <TreeSelect
                     class="special-my-tree-select"
                     ref="treeSelect"
-                    width='300'
+                    width="240"
                     :hideClear='true'
                     :isReadOnly='false'
-                    :caption='"选择管理分区:"'
+                    :caption='"管理分区:"'
                     :data='regulateDistrictData'
                     :placeholder="placeholder"
                     :disabled='false'
@@ -66,9 +66,7 @@
                                 <div class='system-equipments'   >
                                     <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
                                         <div class="title">
-                                            <el-tooltip effect="dark" :content="equip.category_name" placement="top">
-                                                <P :style="{width: equip.category_name.length>6 ? '10rem' : 'auto'}">{{equip.category_name}}</p>
-                                            </el-tooltip>
+                                            <P :style="{width: equip.category_name.length>6 ? '10rem' : 'auto'}"  :title="equip.category_name">{{equip.category_name}}</p>
                                             <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}"  v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                         </div>
                                         <p> <span class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
@@ -77,9 +75,7 @@
                                 <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="margin-top:0.4rem;">
                                     <div class='number' v-for='(equip , index) in item.restAssetTypeList' :key='index'>
                                         <div class="title">
-                                            <el-tooltip effect="dark" :content="equip.category_name" placement="top">
-                                                <P>{{equip.category_name}}</p>
-                                            </el-tooltip>
+                                            <P :title="equip.category_name">{{equip.category_name}}</p>
                                             <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                         </div>
                                         <p> <span  class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
@@ -165,23 +161,101 @@
                 </section>
             </section>
         </main>
+       <el-dialog  :visible.sync="dialogVisible" width="80%"  :custom-class="'my-dialog'">
+            <div class="table-content">
+                <div class="table-title">
+                    {{currentSelectedSys.smsxtname}}
+                </div>
+                <div class="table-tabs">
+                    <Tabs
+                        type="card" 
+                        :data="tabData" 
+                        v-model="activeName"
+                        @change="tabChange"
+                    ></Tabs>
+                </div>
+                <div class="table-select">
+                     <!-- v-model="selectedZone" -->
+                    <TreeSelect
+                        v-if="testTree"
+                        class="special-my-tree-select"
+                        ref="treeSelect"
+                        width="240"
+                        :hideClear='true'
+                        :isReadOnly='false'
+                        :caption='"管理分区:"'
+                        v-model="selectedDialogZone"
+                        :data='regulateDistrictData'
+                        @change='selectDialogProject'
+                    />
+                </div>
+                <section>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th width="10%">序号</th>
+                                <th width="20%">中心</th>
+                                <th width="20%">区域</th>
+                                <th width="20%">广场名称</th>
+                                <th width="30%">异常原因</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- <tr>
+                                <td colspan="5">异常数量汇总:<span>{{ exceptionSum }}</span></td>
+                            </tr> -->
+                            <tr v-for="(td , index) in exceptionData" :key="index">
+                                <td >{{index + 1}}</td>
+                                <td >{{td.center}}</td>
+                                <td >{{td.zone}}</td>
+                                <td >{{td.name}}</td>
+                                <td >{{td.exceptionReason}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <Pagination
+                        v-show="pageCount>9"
+                        :pageCount="pageCount"
+                        style="float:right;margin-top:20px;"
+                        :page="currentPage"
+                        :pageSize="pageSize"
+                        :pageCountShow="true"
+                        @change="currentChangeHandle"
+                    />
+                </section>
+            </div> 
+        </el-dialog>
     </div>
 </template>
 
 <script>
 let myMaps = null
-import { Loading } from 'element-ui';
+import { Loading, Dialog } from 'element-ui';
+import { Tabs } from 'meri-design';
 import { login } from '@/api/login'
-import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus } from '@/api/homePage'
+import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus,  getExceptionNum} from '@/api/homePage'
 import { formatTime } from '@/utils/format.js'
 import { mapGetters } from 'vuex'
-import { sortBy } from 'lodash'
+import { sortBy, cloneDeep } from 'lodash'
 import moment from 'moment'
 import L from 'leaflet'
 import 'leaflet-contextmenu'
 export default {
     data() {
         return {
+            pageCount:0,
+            pageSize:10,
+            currentPage:0,
+            exceptionSum: 0,
+            tabData:[],
+            dialogBoxKey:1,
+            dialogVisible:false,
+            testTree:true,
+            exceptionData:[],
+            storeExceptionData: [],
+            activeName:'',
+            systemExceptionData:{},
+            showMask:false, // 控制遮罩层的显示隐藏
             placeholder:'全部',
             crumbsHtml: [], // 导航数据
             zoneNames: {   // 各个中心对应的拼音名称
@@ -255,13 +329,18 @@ export default {
             currentSelectedSys: {}, // 当前所选择的系统
             currentSysId: '', // 当前系统ID
             regulateDistrictData: [], // 分区数据
+            dialogDistrictData: [], // 弹窗分区数据
+            currentDialogCcode: '',
+            currentDialogLevel: '',
+            currentDialogTab: '',
             maintainList: [],  // 专维  维保  第三方检测 数据
             barColors :{  // // 专维  维保  第三方检测 颜色
                 0: 'linear-gradient(to right, #369CF7 , #025BAA)',   // 蓝色
                 1: 'linear-gradient(to right, #F58300 , #F58300)',   // 黄色
-                2: 'linear-gradient(to right, #F54E45 , #F54E45)'    // 红色
+                2: 'linear-gradient(to right, rgba(32,100,96,0.6) , rgba(32,100,96))'    // 红色
             },
             selectedZone:'',
+            selectedDialogZone: '',
             loadingInstance:null
         }
     },
@@ -269,17 +348,66 @@ export default {
         ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
     },
     watch: {
-         
     },
+    components:{Tabs, Dialog},
     created() {
         this.currentTime()
     },
     mounted() {
-        window.vm = this
         this.getFrameworkTreeData()
         window.addEventListener('resize', this.reinitalMap, false)
     },
-    methods: {  
+    methods: {
+        currentChangeHandle (page) {
+            this.currentPage = page.newPage
+            this.exceptionData =  this.storeExceptionData.slice((page.newPage - 1)*this.pageSize, (page.newPage) * this.pageSize)
+        },
+        selectDialogProject(id , district) {
+            let {ccode, level} = district
+            if (ccode && level) {
+                this.currentDialogCcode = ccode
+                this.currentDialogLevel = level
+                this.fetchExceptionNum(this.currentSysId, this.currentDialogTab, ccode, level)
+            }
+        },
+        tabChange (tab) {
+            this.currentDialogTab = tab.id
+            this.fetchExceptionNum(this.currentSysId, tab.id, this.currentDialogCcode, this.currentDialogLevel)
+        },  
+        fetchExceptionNum (smsxt, categoryCode, ccode, level) {
+            let params = {getParams:{smsxt , categoryCode, ccode, level}}
+            getExceptionNum(params).then(res => {
+                if (res.result === 'success') {
+                    let flattenArr = []
+                    recursionData(res.data)
+                    flattenArr.forEach(item => {
+                        let path = item.path.split('/')
+                        item.center = path[0]
+                        item.zone = path[1]
+                    })
+                    this.storeExceptionData = cloneDeep(flattenArr)
+                    this.exceptionData =  this.storeExceptionData.slice(this.currentPage, this.pageSize)
+                    this.pageCount = flattenArr.length
+                    function recursionData(data, parent) {
+                        data.forEach(item => {
+                            item.name = item.cname
+                            item.id = item.ccode
+                            if (parent) {
+                                item.path = parent + '/' + item.cname
+                            }
+                            if (item.level === 0) {
+                                item.exceptionReason = item.classExList[0].description
+                                flattenArr.push(item)
+                            }
+                            let children = item.children
+                            if (Array.isArray(children) && children.length) {
+                                recursionData(children, item.level ==1? '' : item.path ? item.path :item.cname  )
+                            }
+                        })
+                    }
+                }
+            })
+        },
         expandRestItems (item, index) {
             this.systemList.forEach(eq => {
                 if (eq.smsxt !== item.smsxt) {
@@ -486,6 +614,10 @@ export default {
                     this.currentLevel = level // 初始化的时候判断是哪一级    //1集团 2中心 3区域 0广场
                     data.open = true  // 默认展开第一级
                     this.regulateDistrictData = [data]
+                    this.dialogDistrictData = cloneDeep(this.regulateDistrictData)
+                    let firstNode = this.dialogDistrictData[0]
+                    this.selectedDialogZone = this.currentDialogCcode = firstNode.ccode
+                    this.currentDialogLevel = firstNode.level
                     this.currentDistrictData = res.treeData
                     this.getSystemList(data.ccode, level ).then(res => {
                         this.initMap()
@@ -798,12 +930,23 @@ export default {
          * @Params  system:当前选择的系统
          */
         getInfoOfProject(system) {
+            this.tabData = []
+            system.assetTypeList.forEach(item => {
+                this.tabData.push({
+                    name: item.category_name,
+                    id:item.category_code
+                })
+            })
+            this.activeName = this.tabData[0].id
+            this.currentDialogTab = this.activeName
+            this.dialogVisible = true
             this.systemList.forEach(item => {
                 item.selected = false
             })
             system.selected = true
             this.currentSelectedSys = system
             this.currentSysId = system.smsxt
+            this.fetchExceptionNum(this.currentSysId, this.activeName, this.currentDialogCcode, this.currentDialogLevel)
             //1集团 2中心 3区域 0广场
             this.clearAllLayers()
             if (this.currentLevel === 1) {
@@ -1014,7 +1157,7 @@ export default {
                         if (contentHtml) {
                             that.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.data.cname, 'project', geo.zoom)
                         }
-                    })
+                    })   
                 }
             })
             groupLayer.addTo(myMaps)
@@ -1144,11 +1287,68 @@ export default {
     animation: selectDownUpExtendTop .3s reverse
 }
  /deep/ .p-tree-single-panel{
-     height: 400px!important;
+    height: 400px!important;
+ }
+ /deep/ .el-dialog__header{
+    display: none!important;
+ }
+ /deep/ .el-dialog__body{
+    padding-top:0;
  }
+
 .overview {
     height: 100vh;
     background: rgba(247, 249, 250, 1);
+    .my-dialog{
+        .table-content{
+            margin: 0;
+            padding-bottom: 40px;
+            .table-title{
+                height: 56px;
+                line-height: 56px;
+                border-bottom:1px solid  rgba(0, 0, 0, 0.06);
+                font-size: 16px;
+                font-weight: bold;
+                color:#000;
+            }
+            .table-tabs{
+                margin:16px 0;
+            }
+            .table-select{
+                margin-bottom: 12px;
+            }
+            table{
+                width:100%;
+                thead{
+                    height: 40px;
+                    line-height: 40px;
+                    background: #F8F9FA;
+                    th{
+                        font-size: 12px;
+                        color:#646A73;
+                        font-weight: normal;
+                        padding: 0 24px;
+                    }
+                }
+                tbody{
+                    // tr:first-child{
+                    //     font-size:14px;
+                    //     font-weight: bold;
+                    //     color: #1F2429;
+                    // }
+                    tr{
+                        height: 48px;
+                        line-height: 48px;
+                        border-bottom:1px solid #E4E6E7;
+                        td{
+                            padding: 0 24px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
     .menu {
         height: 48px;
         min-width: 1366px;
@@ -1375,7 +1575,7 @@ export default {
                                 cursor: pointer;
                                 transform: rotate(0);
                                 transform-origin: center;
-                                z-index: 10000;
+                                z-index: 100;
                                 transform: translateY(-7px);
                                 img{
                                     width:14px;