Browse Source

update图片预览组件

yunxing 4 năm trước cách đây
mục cha
commit
50f3216623

+ 4 - 0
src/api/other.js

@@ -3,3 +3,7 @@ import httputils from '@/api/httputils'
 export function queryGlams({ getParams }) {
 export function queryGlams({ getParams }) {
     return httputils.getJson(`/data/sms_zhsxjl/query`, getParams)
     return httputils.getJson(`/data/sms_zhsxjl/query`, getParams)
 }
 }
+// 辅助用房 统计表
+export function querygcfzyfhz({ getParams }) {
+    return httputils.getJson(`/data/sms_gcfzyfhz/query`, getParams)
+}

+ 5 - 1
src/api/public.js

@@ -24,4 +24,8 @@ export function graphQuery(params) {
 // app查询图例统计信息
 // app查询图例统计信息
 export function appGraphElementQuery(params) {
 export function appGraphElementQuery(params) {
     return httputils.postJson(`/serve/topology-wanda/graphElement/statistic/appQuery`, params)
     return httputils.postJson(`/serve/topology-wanda/graphElement/statistic/appQuery`, params)
-}
+}
+// 查询图片
+export function queryPic({ getParams }) {
+    return httputils.getJson(`/data/sms_proimgup/query`, getParams)
+}

+ 42 - 4
src/components/ImagePreview.vue

@@ -22,12 +22,14 @@
  * @param { Array } imgList 显示的图片数组  ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
  * @param { Array } imgList 显示的图片数组  ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
  * @eg 示例:
  * @eg 示例:
  * 模板中:
  * 模板中:
- * <ImagePreview  :visible.sync='showImgPreview' :imgList='imgList' />
+ * <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
+ * js中
  * import ImagePreview from '../../components/ImagePreview'
  * import ImagePreview from '../../components/ImagePreview'
     components: { ImagePreview },
     components: { ImagePreview },
 
 
     // 点击按钮时,显示预览组件,设置图片数组
     // 点击按钮时,显示预览组件,设置图片数组
     showPhoto() {
     showPhoto() {
+        this.imgKey = `img${new Date().getTime()}` //重新渲染组件,解决 横竖屏切换时,图片宽度错乱的问题
         this.imgList = ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
         this.imgList = ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
         this.showImgPreview = true
         this.showImgPreview = true
     },
     },
@@ -57,11 +59,12 @@ export default {
     data() {
     data() {
         return {
         return {
             currentIndex: 1,
             currentIndex: 1,
-            direction: false,
+            direction: '竖屏',
             show: false,
             show: false,
         }
         }
     },
     },
     components: {},
     components: {},
+    created() {},
     beforeMount() {},
     beforeMount() {},
     mounted() {},
     mounted() {},
     methods: {
     methods: {
@@ -69,11 +72,37 @@ export default {
             this.currentIndex = index + 1
             this.currentIndex = index + 1
         },
         },
         changeOri() {
         changeOri() {
-            this.direction = !this.direction
-            console.log(this.direction)
+            if (this.direction === '竖屏') {
+                this.roateX()
+                this.direction = '横屏'
+            } else if (this.direction === '横屏') {
+                this.roateY()
+                this.direction = '竖屏'
+            }
+        },
+        roateX() {
+            console.log('横屏')
+            window.webkit &&
+                webkit.messageHandlers.cordova_iab.postMessage(
+                    JSON.stringify({
+                        method: 'roateX',
+                    })
+                )
+        },
+
+        // 竖屏
+        roateY() {
+            console.log('竖屏')
+            window.webkit &&
+                webkit.messageHandlers.cordova_iab.postMessage(
+                    JSON.stringify({
+                        method: 'roateY',
+                    })
+                )
         },
         },
         close() {
         close() {
             this.$emit('update:visible', false)
             this.$emit('update:visible', false)
+            setTimeout(() => {}, 300)
         },
         },
     },
     },
 }
 }
@@ -93,4 +122,13 @@ export default {
         text-align: center;
         text-align: center;
     }
     }
 }
 }
+// 竖屏
+@media screen and (orientation: portrait) {
+    /deep/ .van-swipe-item {
+        // width: 375px !important;
+    }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+}
 </style>
 </style>

+ 76 - 11
src/views/otherMatter/AuxiliaryRoom.vue

@@ -4,11 +4,11 @@
         <div class='count'>
         <div class='count'>
             <div class='left'>
             <div class='left'>
                 总间数(间)
                 总间数(间)
-                <i>{{roomCount || '--'}}</i>
+                <i>{{listSummary.rooms || '--'}}</i>
             </div>
             </div>
             <div class='right'>
             <div class='right'>
                 总面积(㎡)
                 总面积(㎡)
-                <i>{{area || '--'}}</i>
+                <i>{{listSummary.area || '--'}}</i>
             </div>
             </div>
         </div>
         </div>
         <div class='table'>
         <div class='table'>
@@ -19,16 +19,22 @@
                 <div class='operate'>操作</div>
                 <div class='operate'>操作</div>
             </div>
             </div>
             <div class='content'>
             <div class='content'>
-                <div class='info' v-for='item in 15' :key='item'>
+                <div class='info' v-for='(item,index) in list' :key='index'>
+                    <div class='floor'>{{item.floor}}</div>
+                    <div class='rooms'>{{item.afterkf}}</div>
+                    <div class='area'>{{item.area}}</div>
+                    <div class='operate' @click='showImage(item)'>查看分布图</div>
+                </div>
+                <!-- <div class='info' v-for='item in 5' :key='item'>
                     <div class='floor'>F6</div>
                     <div class='floor'>F6</div>
                     <div class='rooms'>{{item}}</div>
                     <div class='rooms'>{{item}}</div>
                     <div class='area'>36</div>
                     <div class='area'>36</div>
                     <div class='operate' @click='showImage(item)'>查看分布图</div>
                     <div class='operate' @click='showImage(item)'>查看分布图</div>
-                </div>
+                </div>-->
             </div>
             </div>
         </div>
         </div>
         <!-- 现场照片预览 -->
         <!-- 现场照片预览 -->
-        <ImagePreview class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
+        <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
         <div style='margin-top:50px'>
         <div style='margin-top:50px'>
             <van-button @click='roateX' type='primary'>横屏</van-button>
             <van-button @click='roateX' type='primary'>横屏</van-button>
             <van-button @click='roateY' type='primary'>竖屏</van-button>
             <van-button @click='roateY' type='primary'>竖屏</van-button>
@@ -43,29 +49,88 @@ import Vue from 'vue'
 import { Button } from 'vant'
 import { Button } from 'vant'
 Vue.use(Button)
 Vue.use(Button)
 import ImagePreview from '@/components/ImagePreview'
 import ImagePreview from '@/components/ImagePreview'
+import { mapGetters } from 'vuex'
 
 
+import { querygcfzyfhz } from '@/api/other'
+import { queryPic } from '@/api/public'
 export default {
 export default {
     name: 'AuxiliaryRoom',
     name: 'AuxiliaryRoom',
     props: {},
     props: {},
     components: { ImagePreview },
     components: { ImagePreview },
     data() {
     data() {
         return {
         return {
-            roomCount: 30,
-            area: 397,
-            list: [],
+            list: [], //列表数据
+            listSummary: {}, //汇总
             showImgPreview: false, //是否展示图片预览
             showImgPreview: false, //是否展示图片预览
             imgList: [], //图片数组
             imgList: [], //图片数组
+            imgKey: `img${new Date().getTime()}`,
         }
         }
     },
     },
+    computed: {
+        ...mapGetters(['plazaId', 'floorsArr']),
+    },
+    created() {
+        this.getList()
+    },
     beforeMount() {},
     beforeMount() {},
     mounted() {},
     mounted() {},
     methods: {
     methods: {
+        async getList() {
+            let getParams = {
+                plazaId: this.plazaId,
+                orderBy: 'floor,1',
+            }
+            let res = await querygcfzyfhz({ getParams })
+            if (!res?.data) {
+                return false
+            }
+            this.list = res.data
+            //   afterkf: 5
+            //         area: 179.5
+            //         floor: "B1"
+            //         recordtime: 1596055219000
+            //         region: "B1"
+            //     siteid: "1000423"
+            // this.listSummary
+            let rooms = 0,
+                area = 0
+            res.data.map((item) => {
+                rooms += item.afterkf
+                area += item.area
+            })
+            area = Number(area.toFixed(2))
+            this.listSummary = { rooms, area }
+            console.log(res)
+        },
         /**
         /**
          *  显示分布图
          *  显示分布图
          */
          */
-        showImage(data) {
-            this.imgList = []
-            this.showImgPreview = true
+        async showImage(data) {
+            // TODO: 如何处理 楼层
+            /*   code: "F5"
+            gcname: "f5"
+            gcode: "5F"
+            gname: "f5"
+            seq: 500 */
+            // 获取楼层
+            this.imgKey = `img${new Date().getTime()}`
+            const floor = this.floorsArr.filter((i) => i.code === data.floor)[0].gcname
+            let getParams = {
+                module: '1004', //TODO: 固定1004?
+                floor: floor,
+                plazaId: this.plazaId,
+            }
+            let res = await queryPic({ getParams })
+            if (!res?.data) {
+                this.imgList = []
+                return false
+            }
+            let imgList = []
+            res.data.map((item) => {
+                imgList.push(item.url)
+            })
+            this.imgList = imgList.concat(imgList)
+            imgList.length && (this.showImgPreview = true)
         },
         },
         roateX() {
         roateX() {
             console.log('横屏')
             console.log('横屏')

+ 4 - 0
src/views/overview/UpdateRecord.vue

@@ -131,6 +131,7 @@ export default {
                 return false
                 return false
             }
             }
             this.count = res.count
             this.count = res.count
+
             let listArr = res?.data || []
             let listArr = res?.data || []
             // 处理时间
             // 处理时间
             listArr.map((item) => {
             listArr.map((item) => {
@@ -168,6 +169,9 @@ export default {
                 }
                 }
             }
             }
             console.log(this.list)
             console.log(this.list)
+            if (this.list.length === this.count) {
+                this.loading = false
+            }
         },
         },
         handleObjTypeChange(data) {
         handleObjTypeChange(data) {
             console.log(data)
             console.log(data)

+ 49 - 16
src/views/overview/UpdateRecordDetail.vue

@@ -110,35 +110,35 @@
 
 
         <!-- 任务信息 -->
         <!-- 任务信息 -->
         <div class='task-info-container' v-show='showTask'>
         <div class='task-info-container' v-show='showTask'>
-            <van-nav-bar :title='taskTitle' left-arrow @click-left='showTask = false' />
+            <van-nav-bar :title='taskText+"信息"' left-arrow @click-left='showTask = false' />
             <ul class='task-info'>
             <ul class='task-info'>
                 <li>
                 <li>
-                    <span class='name'>工单编号:</span>
-                    <span class='data'>2890531</span>
+                    <span class='name'>{{taskText}}编号:</span>
+                    <span class='data'>{{taskData.No}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
-                    <span class='name'>工单状态:</span>
-                    <span class='data'>新建</span>
+                    <span class='name'>{{taskText}}状态:</span>
+                    <span class='data'>{{taskData.status}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
-                    <span class='name'>工单描述:</span>
-                    <span class='data'>这是一条工单任务描述</span>
+                    <span class='name'>{{taskText}}描述:</span>
+                    <span class='data'>{{taskData.description}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
                     <span class='name'>填报人:</span>
                     <span class='name'>填报人:</span>
-                    <span class='data'>新建</span>
+                    <span class='data'>{{taskData.reporter}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
                     <span class='name'>联系电话:</span>
                     <span class='name'>联系电话:</span>
-                    <span class='data'>18820293022</span>
+                    <span class='data'>{{taskData.phone}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
                     <span class='name'>填报时间:</span>
                     <span class='name'>填报时间:</span>
-                    <span class='data'>2020-09-21</span>
+                    <span class='data'>{{taskData.reportDate}}</span>
                 </li>
                 </li>
                 <li>
                 <li>
                     <span class='name'>验收时间:</span>
                     <span class='name'>验收时间:</span>
-                    <span class='data'>2020-09-21</span>
+                    <span class='data'>{{taskData.acceptanceDate}}</span>
                 </li>
                 </li>
             </ul>
             </ul>
         </div>
         </div>
@@ -161,13 +161,22 @@ export default {
     components: { ImagePreview },
     components: { ImagePreview },
     data() {
     data() {
         return {
         return {
-            type: 1, //  1,4,5,3  维保, 维, 其他事项, 综合事项
+            type: 1, //  1,4,5,3  维保, 维, 其他事项, 综合事项
             title: '', //页面title
             title: '', //页面title
             showTask: false, //是否展示工单/任务信息 页面
             showTask: false, //是否展示工单/任务信息 页面
             showImgPreview: false, //是否展示图片预览
             showImgPreview: false, //是否展示图片预览
             imgList: [], //图片数组
             imgList: [], //图片数组
             data: {}, //页面显示数据
             data: {}, //页面显示数据
-            taskTitle: '', //    工单,任务信息 页面title
+            taskText: '', //    工单,任务信息 页面title
+            taskData: {
+                No: '--',
+                status: '--',
+                description: '--',
+                reporter: '--',
+                phone: '--',
+                reportDate: '--',
+                acceptanceDate: '--',
+            },
         }
         }
     },
     },
     computed: {
     computed: {
@@ -300,11 +309,35 @@ export default {
         },
         },
         // 点击任务编号,显示任务信息
         // 点击任务编号,显示任务信息
         showTaskInfo() {
         showTaskInfo() {
-            // 维保有任务编号,或者维修有工单编号,显示
+            if (this.type === 5 || this.type === 3) {
+                return false
+            }
+            let data = this.data
+            // 维保有任务编号, 或者维修有工单编号, 显示
             if (this.type === 1) {
             if (this.type === 1) {
-                this.taskTitle = '任务信息'
+                this.taskText = '任务'
+                // 维保
+                this.taskData = {
+                    No: data.wb_gzglid || '--', //任务编号
+                    status: data.status || '--', //状态
+                    description: data.description || '--', //描述
+                    reporter: data.reportedby || '--', //填报人
+                    phone: data.phone || '--', //联系电话    // TODO: 联系电话
+                    reportDate: data.reportdate || '--', //填报时间
+                    acceptanceDate: data.sjjssj || '--', //验收时间
+                }
             } else if (this.type === 4) {
             } else if (this.type === 4) {
-                this.taskTitle = '工单信息'
+                this.taskText = '工单'
+                // 维修
+                this.taskData = {
+                    No: data.wonum || '--', //工单编号
+                    status: data.status || '--', //状态
+                    description: data.description || '--', //描述
+                    reporter: data.reportedby || '--', //填报人
+                    phone: data.phone || '--', //联系电话    // TODO: 联系电话
+                    reportDate: data.reportdate || '--', //填报时间
+                    acceptanceDate: data.sjjssj || '--', //验收时间
+                }
             }
             }
             if (this.data.wb_gzglid || this.data.wonum) {
             if (this.data.wb_gzglid || this.data.wonum) {
                 this.showTask = true
                 this.showTask = true