增加地图交互

src/api/index.js

@@ -28,3 +28,19 @@ export function getOwnerList(data) {
     data
   })
 }
+// 获取事件列表
+export function getEventList(data) {
+  return request({
+    url: '/wcwy/large/event/list',
+    method: 'post',
+    data
+  })
+}
+// 获取事件统计数量
+export function getEventCount(data) {
+  return request({
+    url: '/wcwy/large/event/colour',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

src/utils/cesium.js

@@ -20,6 +20,16 @@ export function cesiumInit(id) {
     //   requestVertexNormals: true, // required for terrain lighting
     // }),
   });
+   const token = "789e558be762ff832392a0393fd8a4f1";
+  const tdtUrl = "https://t{s}.tianditu.gov.cn/";
+  const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
+  const imgMap = new Cesium.UrlTemplateImageryProvider({
+    url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
+    subdomains: subdomains,
+    tilingScheme: new Cesium.WebMercatorTilingScheme(),
+    maximumLevel: 18,
+  });
+  const imageryLayer = viewer.imageryLayers.addImageryProvider(imgMap);
   viewer.scene.screenSpaceCameraController.inertiaTranslate = 0;
   viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
   viewer.scene.postProcessStages.fxaa.enabled = true; //开启抗锯齿

src/utils/cesiumTools.js

@@ -2,38 +2,31 @@ import * as Cesium from "cesium";
 import { viewer } from "./cesium.js";
 
 //绘制图标
-export function drawIcon(position, type) {
-  const iconSize = 23;
+export function drawIcon(position, imgName, data = {}) {
       return viewer.entities.add({
           position: position,
-          data: {},
+          data,
           billboard: {
             image: new URL(
-              `../assets/imgs/blue_dw_icon.png`,
+              `../assets/imgs/${imgName}.png`,
               import.meta.url
             ).href, // 图标图片的路径
             width: 40,
             height: 50 ,
-            // pixelOffset: new Cesium.Cartesian2(
-            //   idx * iconSize - iconOffset,
-            //   -10
-            //   // -iconSize * 2
-            // ),
             disableDepthTestDistance: Number.POSITIVE_INFINITY,
           },
         })
 }
-export function drawLabel(position, text, data = {}, labelOptions = {}) {
-
+export function drawLabel(position, text, backgroundColor, data = {}, labelOptions = {}) {
   return viewer.entities.add({
     position: position,
-    data: data,
+    data,
     label: {
       text,
       fillColor: Cesium.Color.WHITE,
       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
       showBackground: true,
-      backgroundColor: Cesium.Color.fromCssColorString('#003860'),
+      backgroundColor: Cesium.Color.fromCssColorString(backgroundColor),
       backgroundPadding: new Cesium.Cartesian2(10, 8),
       font: "18px sans-serif",
       pixelOffset: new Cesium.Cartesian2( 0, -50),

src/view/components/communitySelect.vue

@@ -16,16 +16,11 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, watch } from "vue";
+import { ref, defineEmits, watch, onMounted } from "vue";
 const props = defineProps(['communityList'])
 const emit = defineEmits(['communityChange'])
 let showList = ref(false)
 let selectIndex = ref(-1)
-watch(() => props.communityList, (val) => {
-  if (val.length) {
-    itemClick(val[0], 0)
-  }
-})
 function getAssetImg(imgName) {
   return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
 }
@@ -33,9 +28,13 @@ function showToggle() {
   showList.value = !showList.value
 }
 function itemClick(item, index) {
+  console.log('itemClick', item, index)
   selectIndex.value = index
   emit('communityChange', selectIndex.value)
 }
+onMounted(() => {
+  itemClick(props.communityList[0], 0)
+})
 </script>
 
 <style lang="scss" scoped>

src/view/components/screenLeft.vue

@@ -81,12 +81,12 @@
               <div class="legend-item line-y">
                 <div class="color" style="background: #1894EE"></div>
                 <div class="label">公共停车位数量</div>
-                <div class="value">197个</div>
+                <div class="value">{{currentHouseInfo.publicParkingTotal}}个</div>
               </div>
               <div class="legend-item line-y">
                 <div class="color" style="background: #05EA81"></div>
                 <div class="label">产权车位数量</div>
-                <div class="value">20个</div>
+                <div class="value">{{currentHouseInfo.personalParkingTotal}}个</div>
               </div>
             </div>
           </div>
@@ -100,12 +100,12 @@
               <div class="legend-item line-y">
                 <div class="color" style="background: #39CAD1"></div>
                 <div class="label">业主入住率</div>
-                <div class="value">80%</div>
+                <div class="value">{{currentHouseInfo.occupancyRate}}</div>
               </div>
               <div class="legend-item line-y">
                 <div class="color" style="background: #009AFF"></div>
                 <div class="label">业主出租率</div>
-                <div class="value">20%</div>
+                <div class="value">{{currentHouseInfo.rentalRate}}</div>
               </div>
             </div>
           </div>
@@ -139,6 +139,9 @@ let overviewData = ref([
   { label: "物业一级收费标准", valueKey: "propertyFees", color: "#FABB24", unit: "元/月" },
 ]);
 watch(() => props.currentHouseInfo, (val) => {
+  pieChartInit()
+  carportChartInit()
+  checkinChartInit()
 })
 function itemHover(index) {
   if (index === 5) {
@@ -151,6 +154,14 @@ function itemLeave(index) {
   }
 }
 function pieChartInit() {
+  let data = [
+    {name: '高层', value: props.currentHouseInfo.houseHighTotal},
+    {name: '小高层', value: props.currentHouseInfo.houseSmallHighTotal},
+    {name: '多层', value: props.currentHouseInfo.houseManyTotal},
+    {name: '别墅', value: props.currentHouseInfo.houseVillaTotal},
+    {name: '商铺', value: props.currentHouseInfo.houseBusinessTotal},
+    {name: '公寓', value: props.currentHouseInfo.houseApartmentTotal},
+  ]
   pieChart = echarts.init(document.getElementById("pieChart"));
   pieChart.setOption({
     grid: {
@@ -165,7 +176,7 @@ function pieChartInit() {
     },
     series: [
       {
-        name: "Nightingale Chart",
+        name: "房屋类型统计",
         type: "pie",
         radius: [10, 80],
         center: ["50%", "50%"],
@@ -173,19 +184,19 @@ function pieChartInit() {
         itemStyle: {
           borderRadius: 8,
         },
-        data: [
-          { value: 40, name: "rose 1" },
-          { value: 38, name: "rose 2" },
-          { value: 32, name: "rose 3" },
-          { value: 30, name: "rose 4" },
-          { value: 28, name: "rose 5" },
-          { value: 26, name: "rose 6" },
-        ],
+        data,
       },
     ],
   });
 }
 function carportChartInit() {
+  let sum = Number(props.currentHouseInfo.personalParkingTotal) + Number(props.currentHouseInfo.publicParkingTotal)
+  let color = [
+    [Number(props.currentHouseInfo.publicParkingTotal) / sum, "#1894EE"],
+  ]
+  if (Number(props.currentHouseInfo.personalParkingTotal) > 0) {
+    color.push([1, "#05EA81"])
+  }
   carportChart = echarts.init(document.getElementById("carportChart"));
   carportChart.setOption({
         series: [
@@ -215,10 +226,7 @@ function carportChartInit() {
               roundCap: true,
               lineStyle: {
                 width: 10,
-                color: [
-                  [0.8, "#1894EE"],
-                  [1, "#05EA81"],
-                ],
+                color,
               },
             },
             axisTick: {
@@ -249,6 +257,13 @@ function carportChartInit() {
       })
 }
 function checkinChartInit() {
+  var percentIndex = props.currentHouseInfo.occupancyRate.indexOf("%");
+  var numStr = props.currentHouseInfo.occupancyRate.substring(0, percentIndex).replace(/[^0-9.]/g, '');
+  var occupancyRateNumber = parseFloat(numStr) / 100;
+  let color = [
+    [occupancyRateNumber, "#39CAD1"],
+    [1, "#009AFF"],
+  ]
   checkinChart = echarts.init(document.getElementById("checkinChart"));
   checkinChart.setOption({
         series: [
@@ -278,10 +293,7 @@ function checkinChartInit() {
               roundCap: true,
               lineStyle: {
                 width: 10,
-                color: [
-                  [0.8, "#39CAD1"],
-                  [1, "#009AFF"],
-                ],
+                color,
               },
             },
             axisTick: {
@@ -311,11 +323,6 @@ function checkinChartInit() {
         ],
       })
 }
-onMounted(() => {
-  pieChartInit();
-  carportChartInit();
-  checkinChartInit()
-});
 </script>
 
 <style lang="scss" scoped>

src/view/components/screenRight.vue

@@ -31,10 +31,10 @@
             <img src="../../assets/imgs/rypz_icon.png" style="width: 28px; height: 29px;" />
             <div class="label fs-12">人员配置</div>
           </div>
-          <div class="info-content">
-            <div class="info-item">
-              <div class="value">8</div>
-              <div class="label">保安人数</div>
+          <div class="info-content line-y staffing">
+            <div class="info-item" v-for="item in staffingList">
+              <div class="value">{{ currentHouseInfo[item.valueKey] }}</div>
+              <div class="label">{{ item.label }}人数</div>
             </div>
           </div>
       </div>
@@ -43,11 +43,9 @@
             <img src="../../assets/imgs/glkh_icon.png" style="width: 27px; height: 26px;" />
             <div class="label fs-12">管理考核</div>
           </div>
-          <div class="info-content">
-            <div class="info-item">
-              <div class="value">每周</div>
-              <div class="label">楼道清理</div>
-            </div>
+          <div class="info-content examine">
+            <p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">{{ currentHouseInfo.propertyAssessment }}</p>
+            <p v-else>无</p>
           </div>
       </div>
         <div class="company-info line-y">
@@ -125,12 +123,18 @@
 
 <script setup>
 import { onMounted, ref, reactive, watch} from "vue";
-import { getOwnerList } from '../../api/index.js'
+import { getOwnerList, getEventList, getEventCount } from '../../api/index.js'
 import memberTable from "./memberTable.vue";
 const props = defineProps(["currentHouseInfo"]);
 let ownerTitle = ref('')
 let ownerList = ref('')
 let tableShow = ref(false)
+let staffingList = ref([
+  { label: '保安', valueKey: 'propertySafeTotal'},
+  { label: '保洁', valueKey: 'propertyCleanTotal'},
+  { label: '工程', valueKey: 'propertyProjectTotal'},
+  { label: '客服', valueKey: 'propertyCustomTotal'},
+])
 let countData = ref([
   { label: '红色', value: '12', color: '#F3232D'},
   { label: '黄色', value: '2', color: '#FFEC56'},
@@ -146,6 +150,9 @@ let tableData = ref([
 let keyword = ref('')
 watch(() => props.currentHouseInfo, (val) => {
   getOwnerListFunc(val.communityId, val.id)
+  getEventListFunc(val.id)
+  console.log('start', new Date(val.propertyStartTime))
+  console.log('end', new Date(val.propertyEndTime))
 })
 function getOwnerListFunc(communityId, houseId) {
   getOwnerList({
@@ -158,6 +165,18 @@ function getOwnerListFunc(communityId, houseId) {
     }
   })
 }
+function getEventListFunc(houseId) {
+  getEventCount({
+    houseId
+  }).then(res => {
+    console.log('getEventCount', res)
+  })
+  getEventList({
+    houseId
+  }).then(res => {
+    console.log('getEventList', res)
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -222,6 +241,13 @@ function getOwnerListFunc(communityId, houseId) {
           }
         }
       }
+      .staffing{
+        flex: 1;
+        justify-content: space-between;
+      }
+      .examine{
+        color: #fff;
+      }
     }
   }
   .member{

src/view/index.vue

@@ -3,12 +3,12 @@
     <screen-header></screen-header>
     <screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
     <screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
-    <community-select :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
+    <community-select ref="communitySelectRef" v-if="userTypeInfo.type === 6" :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, nextTick } from 'vue'
 import { cesiumInit } from '../utils/cesium.js'
 import * as Cesium from "cesium";
 import screenHeader from './components/screenHeader.vue';
@@ -18,25 +18,33 @@ import communitySelect from './components/communitySelect.vue';
 import { drawIcon, drawLabel } from '../utils/cesiumTools'
 import { getCommunityList, getHouseList, getHouseInfo } from '../api/index.js'
 import { getUserType } from '../api/user'
+const communitySelectRef = ref(null)
 let viewer = null
 let communityList = ref([])
 let userTypeInfo = ref({})
-let currentCommunityId = ref('')
+let currentCommunityInfo = ref({})
 let currentHouseInfo = ref({})
-watch(currentCommunityId, (val) => {
-  getHouseListFunc(val)
+watch(currentCommunityInfo, (val) => {
+  console.log('currentCommunityInfo', val)
+  let position = JSON.parse(val.solid)
+  flyTo({longitude: position.x, latitude: position.y})
+  getHouseListFunc(val.id)
 })
 function communityChangeHandle(index) {
-  currentCommunityId.value = communityList.value[index].id
+  currentCommunityInfo.value = communityList.value[index]
 }
+// 获取登录用户信息
 function getUserTypeInfo() {
   getUserType().then(res => {
     userTypeInfo.value = res.data
-    if (userTypeInfo.value.type === 3) {
+    if (userTypeInfo.value.type === 6) {
       // 街道管理员
-      
+      drawCommunityMarker(communityList.value)
     } else if (userTypeInfo.value.type === 4) {
       // 社区管理员
+      let communityInfo = communityList.value.find(item => item.id === userTypeInfo.value.communityId)
+      console.log('communityInfo', communityInfo)
+      drawCommunityMarker([communityInfo])
       getHouseListFunc(userTypeInfo.value.communityId)
 
     } else if (userTypeInfo.value.type === 5) {
@@ -46,39 +54,89 @@ function getUserTypeInfo() {
 
   })
 }
+// 获取小区列表
 function getHouseListFunc(communityId) {
   getHouseList(communityId).then(res => {
-    console.log(res)
+    drawHouseMarker(res.data)
+    getHouseInfoFunc(res.data[0].id)
+  })
+}
+// 绘制社区标记
+function drawCommunityMarker(arr) {
+  arr.forEach(item => {
+    let position = degreesToCartesian(JSON.parse(item.solid)) 
+    drawLabel(position, item.name, '#0B6832', {...item, type: 'community'})
+    drawIcon(position, 'green_dw_icon', {...item, type: 'community'})
   })
 }
+// 绘制小区标记
+function drawHouseMarker(arr) {
+  arr.forEach(item => {
+    let position = JSON.parse(item.solid)
+    drawLabel(position, item.name, '#003860', {...item, type: 'house'})
+    drawIcon(position, 'blue_dw_icon', {...item, type: 'house'})
+  })
+}
+// 获取小区信息
 function getHouseInfoFunc(houseId) {
   getHouseInfo(houseId).then(res => {
     currentHouseInfo.value = res.data
+    let position = JSON.parse(currentHouseInfo.value.solid)
+    drawIcon(position, 'blue_dw_icon')
+    drawLabel(position, currentHouseInfo.value.name, '#003860')
+    flyTo(cartesianToDegrees(position))
   })
 }
+// cesium笛卡尔坐标转成经纬度坐标
+function cartesianToDegrees(cartesian) {
+  let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+  let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+  let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+  return {
+    longitude,
+    latitude,
+  };
+}
+// cesium 经纬度转笛卡尔坐标 
+function degreesToCartesian(position) {
+  let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y);
+  return cartesian3;
+}
+// 镜头飞到某个位置
+function flyTo(position) {
+  viewer.camera.flyTo({
+    destination: Cesium.Cartesian3.fromDegrees(
+      position.longitude,
+      position.latitude,
+      1200 // 最后一个参数是高度（单位：米）
+    ),
+    orientation: {
+      heading: Cesium.Math.toRadians(0),
+      pitch: Cesium.Math.toRadians(-90),
+      roll: 0.0,
+    },
+    duration: 0.5, // 飞行时间（单位：秒）
+  });
+}
 onMounted(async () => {
-  getCommunityList().then(res => {
-    communityList.value = res.data
-  })
+  let communityRes = await getCommunityList()
   getUserTypeInfo()
-  // viewer = cesiumInit('cesiumContainer')
-  // viewer.camera.flyTo({
-  //   destination: Cesium.Cartesian3.fromDegrees(
-  //     121.51073873593016,
-  //     29.881809534805857,
-  //     800 // 最后一个参数是高度（单位：米）
-  //   ),
-  //   duration: 0, // 飞行时间（单位：秒）
-  // });
-  // const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-  // handler.setInputAction((click) => {
-  //   const ray = viewer.camera.getPickRay(click.position);
-  //   let position = viewer.scene.globe.pick(ray, viewer.scene);
-  //   if (position) {
-  //     drawIcon(position)
-  //     drawLabel(position, '程博华庭')
-  //   }
-  // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  communityList.value = communityRes.data
+  viewer = cesiumInit('cesiumContainer')
+  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+  handler.setInputAction((click) => {
+    let pickObj = viewer.scene.pick(click.position)
+    if (pickObj) {
+      console.log('pickObj', pickObj)
+      let type = pickObj.id._data.type
+      if (type === 'community') {
+        // 社区
+      } else if (type === 'house') {
+        // 小区
+        getHouseInfoFunc(pickObj.id._data.id)
+      }
+    }
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 })
 </script>