|
@@ -55,30 +55,30 @@
|
|
|
:key='index'
|
|
|
>
|
|
|
<div class='system-name'>
|
|
|
- <div :class='["img", item.selected ? "selected":""]'><img :src='imgSrc(item.smsxt)' /></div>
|
|
|
- <span>{{item.smsxtname}}</span>
|
|
|
+ <img :src='imgSrc(item.smsxt)' />
|
|
|
+ <span>{{item.smsxtname.replace('系统','')}}</span>
|
|
|
</div>
|
|
|
<section v-if='item.assetTypeList.length' class="system-equipments-container">
|
|
|
<div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
|
|
|
<img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
|
|
|
<img v-else src="../../assets/images/icons/grey.png">
|
|
|
</div>
|
|
|
- <div class='system-equipments' style="padding-top:2rem; margin-bottom:2rem;">
|
|
|
+ <div class='system-equipments' >
|
|
|
<div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
|
|
|
<div class="title">
|
|
|
<P :style="{width: equip.category_name.length>6 ? '10rem' : 'auto'}" :title="equip.category_name">{{equip.category_name}}</p>
|
|
|
- <span :style="{right: equip.is_exception_num > 99 ? '-2rem' : equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
|
|
|
+ <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
|
|
|
</div>
|
|
|
- <p> <span>{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
|
|
|
+ <p> <span class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="padding-bottom:2rem;">
|
|
|
+ <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">
|
|
|
<P :title="equip.category_name">{{equip.category_name}}</p>
|
|
|
- <span :style="{right: equip.is_exception_num > 99 ? '-2rem' : equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
|
|
|
+ <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
|
|
|
</div>
|
|
|
- <p> <span>{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
|
|
|
+ <p> <span class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
|
|
|
</div>
|
|
|
</section>
|
|
|
</section>
|
|
@@ -90,20 +90,22 @@
|
|
|
<section class='map-box'>
|
|
|
<section class='cards-list'>
|
|
|
<div class='card' @click='navToManageNumber'>
|
|
|
- <div class='img'>
|
|
|
- <img src='../../assets/images/icons/ratio.png' />
|
|
|
+ <div class="card-title">
|
|
|
+ <img src='../../assets/images/icons/curve.png' />
|
|
|
+ <p>上线管理说明书广场数量</p>
|
|
|
+ </div>
|
|
|
+ <div class="describe">
|
|
|
+ <span style="margin-right:20px;">上线数量 <strong>{{plazaInfoCount.upwcCount}}</strong></span>
|
|
|
</div>
|
|
|
- <p>上线管理说明书广场数量</p>
|
|
|
- <strong>{{plazaInfoCount.upwcCount}}</strong>
|
|
|
</div>
|
|
|
<div class='card' @click='navToIntroduceUpdate'>
|
|
|
- <div class='img'>
|
|
|
- <img src='../../assets/images/icons/audit.png' />
|
|
|
+ <div class="card-title">
|
|
|
+ <img src='../../assets/images/icons/amount.png' />
|
|
|
+ <p>当月说明书更新数量</p>
|
|
|
</div>
|
|
|
- <p>当月说明书更新数量</p>
|
|
|
<div class="describe">
|
|
|
- <span style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></span>
|
|
|
- <span>更新事项数量<strong>{{plazaInfoCount.zhsxChangeCount}}</strong></span>
|
|
|
+ <div style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></div>
|
|
|
+ <div>更新事项数量<strong>{{plazaInfoCount.zhsxChangeCount}}</strong></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
@@ -323,20 +325,26 @@ export default {
|
|
|
* @Param data 当前点击的项
|
|
|
*/
|
|
|
createNavpathByData(data) {
|
|
|
- let pathArr = data.path.split('/')
|
|
|
- let newArr = []
|
|
|
- pathArr.forEach(item => {
|
|
|
- newArr.push(item.split('&'))
|
|
|
- })
|
|
|
- this.crumbsHtml = newArr
|
|
|
- if (data.level === 1) {
|
|
|
- this.currentZoneData = data
|
|
|
+ if (data.path) {
|
|
|
+ let pathArr = data.path.split('/')
|
|
|
+ let newArr = []
|
|
|
+ pathArr.forEach(item => {
|
|
|
+ newArr.push(item.split('&'))
|
|
|
+ })
|
|
|
+ this.crumbsHtml = newArr
|
|
|
+ if (data.level === 1) {
|
|
|
+ this.currentZoneData = data
|
|
|
+ this.crumbsHtml = []
|
|
|
+ } else if (data.level === 0) {
|
|
|
+ this.crumbsHtml.pop()
|
|
|
+ this.currentZoneData = this.getDataByCityCcode(data.cparentcode)
|
|
|
+ } else {
|
|
|
+ this.currentZoneData = data
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
this.crumbsHtml = []
|
|
|
- } else if (data.level === 0) {
|
|
|
- this.crumbsHtml.pop()
|
|
|
- this.currentZoneData = this.getDataByCityCcode(data.cparentcode)
|
|
|
- } else {
|
|
|
- this.currentZoneData = data
|
|
|
+ this.currentZoneData = this.regulateDistrictData[0]
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -375,10 +383,6 @@ export default {
|
|
|
* @Param data 返回选中项的数据
|
|
|
*/
|
|
|
selectProjectItem(ids) {
|
|
|
- if (!ids && this.currentZoneData) {
|
|
|
- this.pantGroupMap(this.regulateDistrictData[0], this.systemList[0].smsxt)
|
|
|
- this.createNavpathByData(this.regulateDistrictData[0])
|
|
|
- }
|
|
|
let data = this.getDataByCityCcode(ids)
|
|
|
if (data.level !== 0) { // level=0时 plazaId必填
|
|
|
this.currentLevel = data.level
|
|
@@ -388,6 +392,7 @@ export default {
|
|
|
} else {
|
|
|
let parentNode = this.getDataByCityCcode(data.cparentcode)
|
|
|
this.currentLevel = parentNode.level
|
|
|
+ this.selectedZone = parentNode.ccode
|
|
|
this.queryPlazaInfoCount(parentNode.ccode, parentNode.level)
|
|
|
this.getEventStatusData(parentNode.level, parentNode.ccode)
|
|
|
this.getSystemList(parentNode.ccode, parentNode.level)
|
|
@@ -729,12 +734,13 @@ export default {
|
|
|
center: new L.LatLng(38, 103),
|
|
|
zoom: 4,
|
|
|
crs: L.CRS.EPSG3857,
|
|
|
- // minZoom:
|
|
|
zoomControl: false,
|
|
|
boxZoom: false,
|
|
|
attributionControl: false,
|
|
|
contextmenu: true,
|
|
|
contextmenuWidth: 140,
|
|
|
+ minZoom: 4,
|
|
|
+ maxZoom: 10,
|
|
|
closePopupOnClick:true,
|
|
|
doubleClickZoom:false,
|
|
|
wheelPxPerZoomLevel:20
|
|
@@ -996,7 +1002,6 @@ export default {
|
|
|
})
|
|
|
Promise.all(promiseAll).then(result => {
|
|
|
this.loadingInstance.close()
|
|
|
- console.log(layerArr, this.currentLevel)
|
|
|
if (this.currentLevel === 3) {
|
|
|
layerArr.forEach(item => {
|
|
|
|
|
@@ -1313,51 +1318,46 @@ export default {
|
|
|
overflow-y:auto;
|
|
|
ul {
|
|
|
li.system-item {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
+ align-items: stretch;
|
|
|
width: calc(100% - 3.2rem);
|
|
|
- margin-left: 1.6rem;
|
|
|
+ margin-left: 0.8rem;
|
|
|
+ margin-bottom: 0.4rem;
|
|
|
box-sizing: border-box;
|
|
|
- border: 1px solid white;
|
|
|
+ border: 1px solid #eff0f1;
|
|
|
border-radius: 4px;
|
|
|
- border-bottom: 1px solid #eff0f1;
|
|
|
transition: 0.5s;
|
|
|
cursor: pointer;
|
|
|
.system-name {
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ bottom: 0;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- width: 25%;
|
|
|
- padding: 1.2rem 0 1.2rem 1rem ;
|
|
|
- border-right: 1px solid #EFF0F1;
|
|
|
- .img {
|
|
|
- height: 2.8rem;
|
|
|
- width: 2.8rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 50%;
|
|
|
- background: #dce7f0;
|
|
|
- filter: saturate(0%);
|
|
|
- img {
|
|
|
- width: 3.2rem;
|
|
|
- height: 3.2rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .selected {
|
|
|
- filter: saturate(100%);
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink:1;
|
|
|
+ flex-grow:1;
|
|
|
+ width: 18%;
|
|
|
+ height: auto;
|
|
|
+ img {
|
|
|
+ width: 3.2rem;
|
|
|
+ height: 3.2rem;
|
|
|
+ margin-bottom: 0.6rem;
|
|
|
}
|
|
|
span {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 0.8rem;
|
|
|
- color: #1f2429;
|
|
|
+ color: white;
|
|
|
font-size: 1.4rem;
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
}
|
|
|
.system-equipments-container{
|
|
|
position: relative;
|
|
|
- width:75%;
|
|
|
+ width:88%;
|
|
|
+ padding: 0.6rem;
|
|
|
+ margin-left: 18%;
|
|
|
.more{
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
@@ -1381,12 +1381,16 @@ export default {
|
|
|
.system-equipments {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding-left: 1.4rem;
|
|
|
.number {
|
|
|
- width: 33.3%;
|
|
|
+ width: 30%;
|
|
|
+ margin-right: 1%;
|
|
|
+ background: #EFF0F1;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 1.4rem 0 1rem 0.4rem;
|
|
|
.title{
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
|
+ line-height: 1;
|
|
|
p{
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
@@ -1399,7 +1403,7 @@ export default {
|
|
|
}
|
|
|
span {
|
|
|
position: absolute;
|
|
|
- top: -1.6rem;
|
|
|
+ top: -1rem;
|
|
|
right: -2rem;
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 0.9rem;
|
|
@@ -1408,12 +1412,15 @@ export default {
|
|
|
background: #fde3e2;
|
|
|
}
|
|
|
}
|
|
|
- p:nth-of-type(2) {
|
|
|
+ p {
|
|
|
span:first-child {
|
|
|
color: #1f2429;
|
|
|
font-size: 1.8rem;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+ .amount{
|
|
|
+ font-size: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1424,13 +1431,25 @@ export default {
|
|
|
border-color: rgba(0, 118, 197, 0.6);
|
|
|
box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
|
|
|
}
|
|
|
- li:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
li:hover {
|
|
|
border-color: #E4E5E7;
|
|
|
box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
|
|
|
}
|
|
|
+ li:nth-of-type(1), li:nth-of-type(4), li:nth-of-type(7) {
|
|
|
+ .system-name{
|
|
|
+ background: linear-gradient(to left, #4064CC, #6C8BE2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-of-type(2), li:nth-of-type(5), li:nth-of-type(6) {
|
|
|
+ .system-name{
|
|
|
+ background: linear-gradient(to left, #3998DB, #70BBEF);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-of-type(3), li:nth-of-type(8) {
|
|
|
+ .system-name{
|
|
|
+ background: linear-gradient(to left, #30AE88, #53D5B1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1443,21 +1462,29 @@ export default {
|
|
|
.card {
|
|
|
width: 50%;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 12px 16px;
|
|
|
border-radius: 4px;
|
|
|
background: white;
|
|
|
- .img {
|
|
|
+ .card-title{
|
|
|
+ position: relative;
|
|
|
+ height: 5rem;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- width: 4.4rem;
|
|
|
- height: 4.4rem;
|
|
|
- border-radius: 50%;
|
|
|
+ padding: 10px 12px;
|
|
|
+ color:white;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-image: url("../../assets/images/icons/title_bg.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 100%;
|
|
|
img {
|
|
|
width: 2rem;
|
|
|
height: 2rem;
|
|
|
+ margin-right: 1.2rem;
|
|
|
}
|
|
|
}
|
|
|
+ .describe{
|
|
|
+ padding: 2rem 4rem;
|
|
|
+ }
|
|
|
}
|
|
|
div:first-child.card{
|
|
|
margin-right: 12px;
|
|
@@ -1469,13 +1496,11 @@ export default {
|
|
|
div:nth-of-type(2) .img {
|
|
|
background: rgba(0, 214, 185, 0.14);
|
|
|
}
|
|
|
- p {
|
|
|
- color: #646c73;
|
|
|
- margin: 12px 0 8px 0;
|
|
|
- }
|
|
|
+
|
|
|
strong {
|
|
|
color: #1f2429;
|
|
|
font-size: 2.4rem;
|
|
|
+ margin-left: 3rem;
|
|
|
}
|
|
|
}
|
|
|
.map-container {
|