新增预警积分排名

src/App.vue

@@ -150,5 +150,33 @@ v-deep .el-loading-mask {
   left: -10px;
   transform: translateY(-50%) translateX(-50%);
 }
-
+.popupCustomBox{
+  position: relative;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  background: #06254282;
+  color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  .popupCustomTitle_title{
+    font-size: 12px;
+    line-height: 24px;
+    text-transform: none;
+    margin-bottom: 0;
+    border-bottom: 1px dashed #ececec;
+    margin-bottom: 2px;
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid #06254282;
+  }
+}
 </style>

src/components/GdMap/mapUtil.js

@@ -1,4 +1,5 @@
 import emitter from "@/utils/eventBus.js";
+import { ElContainer } from "element-plus";
 
 export function MapUtil(map) {
   let _that = this;
@@ -84,6 +85,7 @@ export function MapUtil(map) {
         el.style.width = size ? size : "25px";
         if (flag.includes('jczMap_')) el.style.width = '45px';
         if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
+        if (flag == 'hm') _that.makerPopup(item, flag, 'Custom') //展示气泡框
         // 确保坐标格式正确，使用对象格式传递坐标
         const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] })
         el.addEventListener("click", () => {
@@ -141,24 +143,63 @@ export function MapUtil(map) {
     });
   }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  // 展示气泡框  
+  MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{
+    // Dark   Light   Custom
+    if(style == 'Dark' || style == 'Light') { 
+      let list = zdyContent(flag,item);// 默认的样式
+      map.createPopup([item.jd,item.wd],{
+        style:style, // 气泡框样式:
+        data:list,
+        title:item.ssbm,
+        closeButton:false,
+        anchor:'bottom',
+        pixelOffset:[0,-50]
+      })
+    }else {
+      map.createPopup([item.jd,item.wd],{
+        style:'Custom', // // 自定义样式
+        attrs:{
+          class:'popupCustom'
+        },
+        container: zdyContentHtml(flag,item),
+        closeButton:false,
+        anchor:'bottom',
+        pixelOffset:[0,-30]
+      })
+    }
+  }
+  // 弹窗自定义默认内容
+  function zdyContent(flag,item){
+    switch (flag) {
+      case 'hm':
+        return [
+          { label:'临安码线索数量',value:item.lamsx },
+          { label:'布控预警数量',value:item.bkyj },
+          { label:'红色预警数量',value:item.hsyj },
+          { label:'信息采集数量',value:item.xxcjsl },
+        ]
+    }
+  }
+  // 弹窗自定义标签内容
+  function zdyContentHtml(flag,item){
+    let html = ''
+    switch (flag) {
+      case 'hm':
+        html = `
+        <div class="popupCustomBox">
+          <div class="popupCustomTitle_title">${item.ssbm}</div>
+          <div>临安码线索数量：${item.lamsx}</div>
+          <div>布控预警数量：${item.bkyj}</div>
+          <div>红色预警数量：${item.hsyj}</div>
+          <div>信息采集数量：${item.xxcjsl}</div>
+        </div>
+        `
+      break;
+    }
+    return html;
+  }
+   
   // 信息框展示
   MapUtil.prototype.makerShowTitle = (item, points, flag, text, offset) => {
 
@@ -174,6 +215,7 @@ export function MapUtil(map) {
     // 设置样式
     const el = document.createElement('div');
     if (flag == 'hm') {
+      textTitle = item.ssbm;
       // 直接设置元素样式属性，避免对象赋值的兼容性问题
       el.style.fontSize = '12px';
       el.style.color = '#ffffffff';
@@ -565,10 +607,6 @@ export function MapUtil(map) {
     _that._self[flag].push(line)
   }
 
-
-
-
-
   /**
    * 回显平面- 圆 - 多边形 - 矩形
    * @param {*} type 回显形状

src/views/home/index.vue

@@ -81,7 +81,8 @@
     <!-- 底部 -->
     <div class="home-foot-t">
       <div style="width: 33%;">
-        <WarningDistrict></WarningDistrict>
+        <!-- <WarningDistrict></WarningDistrict> -->
+        <WarningPoints></WarningPoints>
       </div>
       <div style="width: 33%;">
         <WarningLevels></WarningLevels>
@@ -98,6 +99,7 @@
 </template>
 
 <script setup>
+import { qcckGet ,qcckPost} from "@/api/qcckApi.js";
 import { ref, onMounted, onUnmounted } from 'vue'
 import LeftDialog from './dialog/leftDialog'
 import GdMap from "@/components/GdMap/index.vue";
@@ -114,6 +116,7 @@ import Experience from './model/experience.vue'
 import Calendar from './model/calendar.vue'
 import KeyPpersonneltypes from './model/keyPpersonneltypes.vue'
 import WarningDistrict from './model/WarningDistrict.vue'
+import WarningPoints from './model/warningPoints.vue'
 import { getItem, setItem } from "@/utils/storage";
 import emitter from "@/utils/eventBus.js";
 import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
@@ -216,10 +219,17 @@ const getDepId = () => {
 }
 const makerCenter = () => {
   const dw = require("@/assets/point/dingwei.png")
-  const coords = centralPoint.map(item => {
-    return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
+  qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
+    let list = res || [];
+    list.forEach(item => {
+      let obj = centralPoint.find(i => i.name == item.ssbm);
+      if(obj){
+        item.jd = obj.point[0];
+        item.wd = obj.point[1];
+      }
+    })
+    emitter.emit("addPointArea", { coords:list, icon: dw, flag: "hm", size: '14px', showTitle: false, offset: [0, -25] });
   })
-  emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
 }
 //播放音频
 const ispLayBack = ref(true)

src/views/home/model/warningPoints.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="comom-title">
+        <span class="title">预警积分排名</span>
+    </div>
+     <div class="comom-cnt zdryBox">
+        <DarkTable
+            customClass="zdy_bkcz_table"
+            :tableData="pageData.tableData"
+            :tableColumn="pageData.tableColumn"
+            :tableHeight="pageData.tableHeight"
+            :key="pageData.keyCount"
+            :isScroll="true"
+            :tableConfiger="pageData.tableConfiger"
+            >
+        </DarkTable>
+     </div>
+</template>
+
+<script setup>
+import { reactive,onMounted } from 'vue'
+import DarkTable from '@/components/aboutTable/DarkTable.vue'
+import { qcckGet } from "@/api/qcckApi.js";
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    showIndex: false,
+    stripe: true
+  },
+  tableColumn: [
+    { label: "姓名", prop: "ryxm", showOverflowTooltip: true },
+    { label: "身份证", prop: "rysfzh", showOverflowTooltip: true },
+    { label: "积分", prop: "sffz", showOverflowTooltip: true },
+    { label: "排名", prop: "order", showOverflowTooltip: true },
+  ]
+});
+onMounted(() => {
+  getList()
+})
+
+const getList = () => {
+  pageData.tableConfiger.loading = true
+  qcckGet({},'/mosty-gsxt/tbYjxx/selectYjxxFzTen').then(res => {
+      let list = res || []
+      pageData.tableData = list.map((item, index) => {
+        item.order = index + 1
+        return item
+      })
+    pageData.tableConfiger.loading = false
+  }).catch(() => {
+    pageData.tableConfiger.loading = false
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+::v-deeep .comom-title {
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deep .el-table td.el-table__cell {
+  color: #ffffff;
+}
+
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: rgba(0, 61, 130, 0.75);
+}
+</style>
+
+<style lang="scss">
+
+.zdy_bkcz_table td.el-table__cell {
+  color: #ffffff !important;
+}
+.zdy_bkcz_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+</style>