zzy + 样式修改、图层接入

src/components/BuildingOverview.vue

@@ -56,8 +56,8 @@
 							{{item.per}}
 						</div>
 					</div>
-					<div class="item_bottom" :style="`width:${item.per};background: linear-gradient(270deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);`">
-	
+					<div class="item_bottom" :style="`width:${item.per_show};background: linear-gradient(270deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);`">
+            <img src="@/assets/imgs/guangquan.png" alt="" />
 					</div>
 				</div>
 			</div>
@@ -102,6 +102,7 @@
 			let total = 0
 			obj.value = res.data.data.Rows[0]
 			obj.value.fwzs = (Number(obj.value.fwzs)/10000).toFixed(2)
+      obj.value.jzmj = (Number(obj.value.jzmj)).toFixed(0)
 			arr.value.forEach(item=>{
 				if(item.id == 1){
 					item.num = (Number(obj.value.czfw)/10000).toFixed(2)
@@ -116,7 +117,8 @@
 			})
 			num.value = total.toFixed()
 			arr.value.forEach(item=>{
-				item["per"] = ((Number(item.num)/num.value)*100).toFixed(2) + '%'
+				item["per"] = ((Number(item.num)/num.value)*100).toFixed(2) + '%';
+        item["per_show"] = ((Number(item.num)/num.value)*100 + 5).toFixed(2) + '%'
 			})
 		})
 		
@@ -193,7 +195,7 @@
 									font-weight: bold;
 									font-size: 16px;
 									color: #FFFFFF;
-									background: linear-gradient(80deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);
+									background: linear-gradient(80deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 1) 100%);
 									-webkit-background-clip: text;
 									-webkit-text-fill-color: transparent;
 								}
@@ -207,9 +209,13 @@
 			.content_right {
 				width: 60%;
 				height: 90%;
-	
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
 				.right_item {
-					height: 33.3%;
+					height: 31%;
+          padding-bottom: 1%;
 					box-sizing: border-box;
 	
 					.item_top {
@@ -255,7 +261,15 @@
 	
 					.item_bottom {
 						height: 4px;
-						margin-top: 10px;
+						margin-top: 6px;
+            position: relative;
+            img{
+              width: 12px;
+              height: 12px;
+              position: absolute;
+              bottom: -4px;
+              right: -6px;
+            }
 					}
 				}
 			}

src/service/map.js

@@ -1,4 +1,4 @@
-import {requestInstance_Map_token, requestInstance_Service_token} from "./index.js";
+import {requestInstance_Map_token, requestInstance_Service_token, requestPost} from "./index.js";
 
 export function getMapToken(){
     return requestInstance_Map_token({
@@ -18,4 +18,10 @@ export function getServiceToken(name,password){
             "key": password
         }
     })
+}
+
+export function getLegend(url){
+    return requestInstance_Service_token({
+        url
+    })
 }

src/views/c-cpns/ServiceTree.vue

@@ -105,9 +105,8 @@ export default {
   justify-content: center;
   align-items: center;
   .common-title{
-    width: 350px;
+    width: 100%;
     height: 37px;
-    padding-left: 7px;
     background: url("@/assets/imgs/tkxbt.png") no-repeat;
     background-size: 100% 100%;
     span {

src/views/c-cpns/figureLegend.vue

@@ -1,33 +1,82 @@
 <template>
-  <div id="figureLegend">
+  <div id="figureLegend" v-if="legendImgUrl.length || legendColor.length">
     <div class="common-title">
       <span>图例</span>
     </div>
     <div class="legend-content scroll">
-
+      <div class="legend-item" v-for="item in legendImgUrl" :key="item.label">
+        <span><img :src="'data:image/png;base64,' + item.imageData" alt=""></span>
+        <span>{{item.label}}</span>
+      </div>
+      <div class="legend-item" v-for="item in legendColor" :key="item.label">
+        <span><div class="color-class" :style="{backgroundColor:item.color}"></div></span>
+        <span>{{item.label}}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import {onMounted,watch} from "vue";
+import {ref,onMounted,watch} from "vue";
 import {useMapStore} from "@/store/mapStore.js";
+import {getLegend} from "@/service/map.js";
 
 export default {
   name: "figureLegend",
   setup(){
     const mapStore = useMapStore();
+    let legendImgUrl = ref([]);
+    let legendColor = ref([]);
     watch(() => mapStore.currentLayerList,(val) => {
       showLegend(val)
     },{
       immediate:true,
       deep:true
     })
-    function showLegend(list){
+    async function showLegend(val) {
+      legendImgUrl.value = [];
+      legendColor.value = [];
+      for (let i = 0; i < val.length; i++) {
+        await getSingleLegend(val[i]);
+      }
+    }
+    async function getSingleLegend(params) {
+      await getLegend("https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.TOKEN + '/0?f=json').then(res => {
 
+        if (res?.data?.drawingInfo?.renderer?.symbol) {//简单的单个样式
+          let data = res?.data?.drawingInfo?.renderer?.symbol;
+          if (data?.imageData) {
+            legendImgUrl.value.push({
+              imageData: data.imageData,
+              label: res?.data?.drawingInfo?.renderer?.label || params.label
+            })
+          } else if (data?.color) {
+            legendColor.value.push({
+              color: "rgb(" + data.color.slice(0, 3).toString() + ")",
+              label: res?.data?.drawingInfo?.renderer?.label || params.label
+            })
+          }
+        } else if (res?.data?.drawingInfo?.renderer?.uniqueValueInfos) {
+          let data = res?.data?.drawingInfo?.renderer?.uniqueValueInfos;
+          data.forEach(item => {
+            if (item.symbol?.imageData) {
+              legendImgUrl.value.push({
+                imageData: item.symbol.imageData,
+                label: params.label + '-' + item?.label
+              })
+            } else if (item.symbol?.color) {
+              legendColor.value.push({
+                color: "rgb(" + item.symbol.color.slice(0, 3).toString() + ")",
+                label: params.label + '-' + item?.label
+              })
+            }
+          })
+        }
+      })
     }
     return{
-      showLegend
+      legendImgUrl,
+      legendColor
     }
   }
 }
@@ -47,9 +96,8 @@ export default {
   justify-content: center;
   align-items: center;
   .common-title{
-    width: 350px;
+    width: 100%;
     height: 37px;
-    padding-left: 7px;
     background: url("@/assets/imgs/tkxbt.png") no-repeat;
     background-size: 100% 100%;
     span {
@@ -67,6 +115,19 @@ export default {
   .legend-content{
     width: 100%;
     height: 120px;
+    .legend-item{
+      color: #FFF;
+      span{
+        padding-left: 20px;
+        font-size: 14px;
+      }
+    }
+    .color-class{
+      width: 26px;
+      height: 10px;
+      margin: 0 4px;
+      display: inline-block;
+    }
   }
 }
 </style>