Quellcode durchsuchen

提交综合事项

yunxing vor 4 Jahren
Ursprung
Commit
c651eafd23

+ 2 - 1
src/App.vue

@@ -15,7 +15,8 @@
             <van-tabbar-item>
                 <span>项目概况</span>
                 <template #icon='props'>
-                    <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' style='color:#ffffff;background-color:#1989fa' />
+                    <!-- style='color:#ffffff;background-color:#1989fa' -->
+                    <i v-if='props.active' class='iconfont wanda-xiangmugaikuang2' style='color:#fff;background-color:#1989fa;' />
                     <i v-else class='iconfont wanda-xiangmugaikuang'></i>
                 </template>
             </van-tabbar-item>

+ 11 - 0
src/router/index.ts

@@ -75,6 +75,17 @@ const routes: Array<RouteConfig> = [
             showTabbar: true,
         },
     },
+    // 其他事项 --> 综合事项 --> 政府/其他 事项列表页面
+    {
+        path: '/comprehensiveMatterList',
+        name: 'ComprehensiveMatterList',
+        component: () => import(/* webpackChunkName: "comprehensiveMatter" */ '../views/otherMatter/ComprehensiveMatterList.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
     //  其他事项 --> 辅助用房
     {
         path: '/auxiliaryRoom',

+ 29 - 8
src/views/otherMatter/AuxiliaryRoom.vue

@@ -18,14 +18,18 @@
                 <div class='area'>面积(㎡)</div>
                 <div class='operate'>操作</div>
             </div>
-            <div class='content' v-for='i in 5' :key='i'>
-                <div class='floor'>F6</div>
-                <div class='rooms'>8</div>
-                <div class='area'>36</div>
-                <div class='operate'>查看分布图</div>
+            <div class='content'>
+                <div class='info' v-for='item in 15' :key='item'>
+                    <div class='floor'>F6</div>
+                    <div class='rooms'>{{item}}</div>
+                    <div class='area'>36</div>
+                    <div class='operate' @click='showImage(item)'>查看分布图</div>
+                </div>
             </div>
         </div>
-        <div style='margin-top:10px'>
+        <!-- 现场照片预览 -->
+        <ImagePreview class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
+        <div style='margin-top:50px'>
             <van-button @click='roateX' type='primary'>横屏</van-button>
             <van-button @click='roateY' type='primary'>竖屏</van-button>
         </div>
@@ -38,20 +42,31 @@
 import Vue from 'vue'
 import { Button } from 'vant'
 Vue.use(Button)
+import ImagePreview from '@/components/ImagePreview'
+
 export default {
     name: 'AuxiliaryRoom',
     props: {},
-    components: {},
+    components: { ImagePreview },
     data() {
         return {
             roomCount: 30,
             area: 397,
             list: [],
+            showImgPreview: false, //是否展示图片预览
+            imgList: [], //图片数组
         }
     },
     beforeMount() {},
     mounted() {},
     methods: {
+        /**
+         *  显示分布图
+         */
+        showImage(data) {
+            this.imgList = []
+            this.showImgPreview = true
+        },
         roateX() {
             console.log('横屏')
             webkit.messageHandlers.cordova_iab.postMessage(
@@ -77,6 +92,7 @@ export default {
 .auxiliary-room {
     width: 100%;
     height: 100%;
+    overflow: hidden;
     // background-color: cyan;
     padding: 16px;
     .title {
@@ -106,6 +122,7 @@ export default {
     // 表格内容
     .table {
         width: 100%;
+        height: calc(100% - 65px);
         margin-top: 10px;
         .header {
             width: 100%;
@@ -120,6 +137,10 @@ export default {
             padding: 0 15px;
         }
         .content {
+            height: calc(100% - 40px);
+            overflow: auto;
+        }
+        .info {
             width: 100%;
             height: 40px;
             line-height: 40px;
@@ -132,7 +153,7 @@ export default {
             border-bottom: 1px solid #eff0f1;
         }
         .header,
-        .content {
+        .info {
             .floor {
                 flex: 2;
             }

+ 141 - 8
src/views/otherMatter/ComprehensiveMatter.vue

@@ -2,7 +2,41 @@
     <div class='comprehensive-matter'>
         <!-- <van-list v-model='loading' :finished='finished' finished-text='加载到底了' @load='onLoad'>
             <van-cell v-for='item in list' :key='item' :title='item' />
-        </van-list> -->
+        </van-list>-->
+        <div class='time'>
+            <van-button round size='small' :class='active === 0?"active":""' @click='changeTime(0)'>一个月内</van-button>
+            <van-button round size='small' :class='active === 1?"active":""' @click='changeTime(1)'>半年内</van-button>
+            <van-button round size='small' :class='active === 2?"active":""' @click='changeTime(2)'>一年内</van-button>
+            <van-button round size='small' :class='active === 3?"active":""' @click='changeTime(3)'>全部</van-button>
+        </div>
+        <div class='main'>
+            <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
+                <div class='container' v-for='(item,index) in 15' :key='index'>
+                    <div class='government-department' v-if='true'>
+                        <van-cell :title='`政府部门${index}`' is-link :value='`${index}项`' @click='goToMattersFetail(item)' />
+                    </div>
+                    <div class='other-department' v-if='index==4'>
+                        <van-cell title='其他' :arrow-direction='arrowDirection' is-link @click='changeOtherShowStatus' />
+                        <div class='other-container' v-show='showOther'>
+                            <van-cell
+                                :title='`自定义其他部门${index}`'
+                                title-class='other-cell'
+                                :value='`${index}项`'
+                                is-link
+                                @click='goToMattersFetail(item)'
+                            />
+                            <van-cell
+                                :title='`自定义其他部门${index}`'
+                                title-class='other-cell'
+                                :value='`${index}项`'
+                                is-link
+                                @click='goToMattersFetail(item)'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </van-list>
+        </div>
     </div>
 </template>
 <script>
@@ -10,22 +44,33 @@
  * 综合事项
  */
 import Vue from 'vue'
-import { List, Cell } from 'vant'
-Vue.use(List).use(Cell)
+import { List, Cell, Button } from 'vant'
+Vue.use(List).use(Cell).use(Button)
 export default {
     name: 'ComprehensiveMatter',
     props: {},
     components: {},
     data() {
         return {
+            active: 0,
             list: [],
             loading: false,
             finished: false,
+            page: 1,
+            count: 0,
+            arrowDirection: 'up', //其他 箭头方向
+            showOther: true,
         }
     },
     beforeMount() {},
     mounted() {},
     methods: {
+        /**
+         * 更改时间
+         */
+        changeTime(active) {
+            this.active = active
+        },
         onLoad() {
             // 异步更新数据
             // setTimeout 仅做示例,真实场景中一般为 ajax 请求
@@ -43,19 +88,107 @@ export default {
                 }
             }, 1000)
         },
+        /**
+         * 点击其他右侧上下箭头,显隐其他部门
+         */
+        changeOtherShowStatus() {
+            if (this.showOther) {
+                this.showOther = false
+                this.arrowDirection = 'down'
+            } else {
+                this.showOther = true
+                this.arrowDirection = 'up'
+            }
+        },
+        /**
+         *  跳转 列表页面
+         */
+        goToMattersFetail(data) {
+            this.$router.push({ name: 'ComprehensiveMatterList', params: data })
+        },
     },
 }
 </script>
 <style lang='less' scoped>
 .comprehensive-matter {
     width: 100%;
-    height: calc(100% - 50px);
+    height: 100%;
+    background-color: #f5f6f7;
     overflow: auto;
-    background-color: lightblue;
-    /deep/.van-list {
+    // 时间切换按钮
+    .time {
         width: 100%;
-        height: calc(100%- 150px);
-        background-color: lightgreen;
+        height: 60px;
+        padding: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        background-color: #f5f6f7;
+        /deep/ .van-button {
+            width: 75px;
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            background: #f1f1f1;
+            border-radius: 16px;
+            border: 1px solid #dcdcdc;
+        }
+        .active {
+            background-color: #025baa !important;
+            color: #fff;
+        }
+    }
+    .main {
+        width: 100%;
+        height: calc(100% - 60px);
+        overflow: auto;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        .matters-list {
+            width: 100%;
+            background-color: #fff;
+            overflow: auto;
+            .container {
+                width: 100%;
+                .government-department {
+                    width: 100%;
+                    padding: 0 15px;
+                }
+                /deep/ .van-cell {
+                    height: 55px;
+                    border-bottom: 1px solid #e6e6e6;
+                    display: flex;
+                    align-items: center;
+                    padding-left: 0;
+                    padding-right: 0;
+                    .van-cell__title {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #333333;
+                    }
+                }
+                // 其他部门
+                .other-department {
+                    width: 100%;
+                    padding: 0 15px;
+                    .other-container {
+                        width: 100%;
+                        padding-left: 15px;
+                        border-bottom: 1px solid #e6e6e6;
+                        /deep/ .van-cell:last-child {
+                            border-bottom: none;
+                        }
+                    }
+                }
+            }
+        }
     }
+    // /deep/.van-list {
+    //     width: 100%;
+    //     height: calc(100%- 150px);
+    // }
 }
 </style>

+ 180 - 0
src/views/otherMatter/ComprehensiveMatterList.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class='comprehensive-matter-list'>
+        <van-nav-bar title='政府部门xx' left-arrow @click-left='backPage' />
+        <div class='main'>
+            <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
+                <div class='card' v-for='(item,index) in list' :key='index'>
+                    <div class='date-attachment'>
+                        <div class='date'>
+                            <span class='label'>日期:</span>
+                            <span class='data'>{{item.date}}</span>
+                        </div>
+                        <div class='attachment'>
+                            <span class='label'>附件:</span>
+                            <span class='data'>{{item.id}}</span>
+                        </div>
+                    </div>
+                    <div class='record'>
+                        <span class='label'>记录事项:</span>
+                        <!-- 该条的showMore为true或者undefined,数据最多显示3行 -->
+                        <div
+                            class='data'
+                            :class='item.showMore || item.showMore === undefined ?"van-multi-ellipsis--l3":"" '
+                        >三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却最多显示4行,显示不下…</div>
+                    </div>
+                    <div class='work' v-if='item.showMore === false'>
+                        <span class='label'>工作要求:</span>
+                        <div class='data'>这里是工作要求具体内容</div>
+                    </div>
+                    <div class='matter' v-if='item.showMore === false'>
+                        <span class='label'>整改事项:</span>
+                        <div class='data'>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
+                    </div>
+                    <div class='show-more' v-if='item.showMore || item.showMore === undefined ' @click='changeStatus(item,false)'>展开</div>
+                    <div class='show-less' v-else @click='changeStatus(item,true)'>
+                        <!-- TODO: 收起 箭头 -->
+                        <!-- <i></i> -->
+                        收起
+                    </div>
+                </div>
+            </van-list>
+        </div>
+    </div>
+</template>
+<script>
+/**
+ * 综合事项,政府/其他部门 列表页面
+ */
+import Vue from 'vue'
+import { NavBar, List } from 'vant'
+Vue.use(NavBar).use(List)
+
+export default {
+    name: 'ComprehensiveMatterList',
+    props: {},
+    data() {
+        return {
+            // 列表数据
+            list: [
+                // { index: 0, date: '2020-08-20', id: 1 },
+                // { index: 1, date: '2020-08-20', id: 2 },
+                // { index: 2, date: '2020-08-20', id: 3 },
+                // { index: 3, date: '2020-08-20', id: 4 },
+            ],
+            // 点击条的信息
+            currentInfo: {
+                showMore: true,
+            },
+            loading: false, // list加载中
+            finished: false, //list组件,加载完成
+            page: 1, //页码
+            size: 5, //分页条数
+            count: 0, //总条数
+        }
+    },
+    components: {},
+    created() {
+        for (let i = 0; i < 6; i++) {
+            this.list.push({ index: i, date: '2020-08-15', id: new Date().getTime() })
+        }
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        // 返回上一个页面
+        backPage() {
+            this.$router.go(-1)
+        },
+        /**
+         * 切换 展开,收起
+         */
+        changeStatus(item, showMore) {
+            this.currentInfo = item
+            this.$set(this.currentInfo, 'showMore', showMore)
+        },
+        onLoad() {
+            setTimeout(() => {
+                for (let i = 0; i < 6; i++) {
+                    this.list.push({ index: i, date: '2020-08-15', id: new Date().getTime() })
+                }
+
+                // 加载状态结束
+                this.loading = false
+
+                // 数据全部加载完成
+                if (this.list.length >= 40) {
+                    this.finished = true
+                }
+            }, 1000)
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.comprehensive-matter-list {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f6f7;
+    .main {
+        width: 100%;
+        height: calc(100% - 45px);
+        overflow: auto;
+        .card {
+            width: 100%;
+            padding: 15px;
+            background-color: #fff;
+            margin-bottom: 10px;
+            .date-attachment,
+            .record,
+            .work,
+            .matter {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                line-height: 20px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #666666;
+                margin-bottom: 12px;
+                .label {
+                    width: 70px;
+                }
+                .data {
+                    flex: 1;
+                    color: #333;
+                }
+            }
+            // 日期,附件
+            .date-attachment {
+                .label {
+                    // margin-right: 10px;
+                    display: inline-block;
+                    width: 45px;
+                }
+                .attachment {
+                    color: #025baa;
+                    .data {
+                        color: #025baa;
+                    }
+                }
+            }
+            .show-more,
+            .show-less {
+                margin: 0 auto;
+                width: 72px;
+                height: 30px;
+                text-align: center;
+                background: #e5eef6;
+                border-radius: 2px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 400;
+                color: #025baa;
+                font-size: 14px;
+                border-radius: 3px;
+            }
+        }
+    }
+}
+</style>

+ 1 - 1
src/views/otherMatter/index.vue

@@ -22,7 +22,7 @@ export default {
     components: { ComprehensiveMatter, AuxiliaryRoom },
     data() {
         return {
-            active: 1,
+            active: 0,
         }
     },
     beforeMount() {},

+ 2 - 1
src/views/overview/UpdateRecord.vue

@@ -63,6 +63,7 @@ export default {
             loading: false,
             finished: false,
             page: 1,
+            size: 6,
             count: 0,
         }
     },
@@ -116,7 +117,7 @@ export default {
             let getParams = {
                 plazaId: this.plazaId,
                 page: this.page,
-                size: 5,
+                size: this.size,
                 // TODO: 一年 改一个月
                 changeDateStartDate: moment().subtract(1, 'years').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
                 changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填