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