压缩图片

src/view/community.vue

@@ -32,6 +32,20 @@
       </div>
     </div>
     <SiteSelector />
+    <m-drawer v-model="showDrawer">
+      <div class="community-device">
+        <p>类型：{{ drawerInfo.key }}</p>
+        <p>地点：{{ drawerInfo.relationName }}</p>
+        <div v-if="drawerInfo.beforPhoto">
+          <p>改造前</p>
+          <img :src="drawerInfo.beforPhoto" />
+        </div>
+        <div v-if="drawerInfo.afterPhoto">
+          <p>改造后</p>
+          <img :src="drawerInfo.afterPhoto" />
+        </div>
+      </div>
+    </m-drawer>
   </m-grid>
 </template>
 
@@ -101,8 +115,12 @@ export default defineComponent({
         data: pointData,
       })
     }
+    const showDrawer = ref(false)
+    const drawerInfo = ref<any>({})
     const handleMapClick = (e: any) => {
       console.log('point-data: ', e)
+      drawerInfo.value = e
+      showDrawer.value = true
     }
     const handleComplete = (instance: any) => {
       let center = [-135.98002789627407, -722.1597065437004]
@@ -177,6 +195,8 @@ export default defineComponent({
       title,
       map,
       handleComplete,
+      showDrawer,
+      drawerInfo,
       handleMapClick,
       btns,
       curBtn,
@@ -188,6 +208,10 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../components/MyComponent/main.styl'
+.community-device
+  $full()
+  img
+    width 50%
 .btns
   position fixed
   z-index 9999

src/view/community/community-photo.vue

@@ -32,6 +32,7 @@ export default defineComponent({
     const showModal = ref(false)
     const src = ref<string | null>(null)
     const handleClick = async (id: string) => {
+      if (!id) return
       const [{ remark2 }] = (
         await ajax.get({
           url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
@@ -42,24 +43,24 @@ export default defineComponent({
     }
     return {
       list: [
-        // { name: '重庆北路205号入口', photo: photo1 },
-        // { name: '重庆北路205号道路', photo: photo2 },
-        // { name: '重庆北路205号电梯', photo: photo3 },
-        {
-          name: '威海路163',
-          photo: photo1,
-          id: '05e1a5f24a224d66955ba2d22d6f64d3',
-        },
-        {
-          name: '威海路167',
-          photo: photo2,
-          id: 'fc82739cb3354262850c715aa9098c83',
-        },
-        {
-          name: '成都北路140',
-          photo: photo3,
-          id: '3c23b0ecd6bb4d73842617010a84cbcf',
-        },
+        { name: '重庆北路205号入口', photo: photo1 },
+        { name: '重庆北路205号道路', photo: photo2 },
+        { name: '重庆北路205号电梯', photo: photo3 },
+        // {
+        //   name: '威海路163',
+        //   photo: photo1,
+        //   id: '05e1a5f24a224d66955ba2d22d6f64d3',
+        // },
+        // {
+        //   name: '威海路167',
+        //   photo: photo2,
+        //   id: 'fc82739cb3354262850c715aa9098c83',
+        // },
+        // {
+        //   name: '成都北路140',
+        //   photo: photo3,
+        //   id: '3c23b0ecd6bb4d73842617010a84cbcf',
+        // },
       ],
       handleClick,
       showModal,

src/view/community/manage-issue.vue

@@ -18,7 +18,7 @@
           :value="item.value"
           type="dashboard"
           :show-info="false"
-          :color="[getColor(item.value), '#FF0C0C']"
+          :color="[getColor(item.value), '#F76B1C']"
           :rate="1.2"
           :stroke-width="8"
           :gap-degree="100"
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { ChartTypes } from '@/components/MyComponent'
 import Circle from '../components/circle.vue'
 import store from '@/store'
@@ -121,11 +121,11 @@ export default defineComponent({
       },
     })
     const issues = ref([
-      { name: '绿化面积㎡', value: 658 },
-      { name: '监控点位', value: 28 },
-      { name: '垃圾箱房', value: 15 },
-      { name: '非机动车位', value: 150 },
-      { name: '物业服务人员', value: 168 },
+      { name: '充电桩', value: 3 },
+      { name: '监控点位', value: 30 },
+      { name: '垃圾箱房', value: 5 },
+      { name: '停车棚', value: 3 },
+      { name: '物业公司', value: 4 },
     ])
     return {
       counts,