SmartCommunity/commandCenter/src/views/commandDispatch/index.vue

<template>
    <div class="index-content">
        <div
            class="img-content"
            :class="{ mouseStyle: openCur == 1 }"
            ref="divImg"
            :style="`backgroundImage:url(${modelPictureUrl});backgroundSize: 100% 100%;`"
            @click="openCur == 1 ? paintingPoint($event) : null"
        ></div>
        <div class="point" :style="`left:${item.xcoordinate}%;top:${item.ycoordinate}%`" v-for="(item, index) in points" :key="index">
            <span class="point-type" :class="`point-type${item.deviceType}`" @click="openCur !== 2 ? togglePop(item) : null"></span>
            <span class="textStyle">{{ item.deviceName }}</span>
            <span class="pointClose" @click="pointClose(item)" v-if="openCur == 2">x</span>
        </div>
        <div class="index-content-left" v-if="showChart">
            <last-month-alarm></last-month-alarm>
            <alarm-trend-analysis></alarm-trend-analysis>
            <proportion-of-alarm-types></proportion-of-alarm-types>
            <work-order-processing-status></work-order-processing-status>
        </div>
        <div class="index-content-right-buttom" @click="toggleShow"><span></span>{{ !showChart ? '显示' : '隐藏' }}图表</div>
        <div class="index-dotting-list" :class="showChart ? '' : 'showChart'" v-if="menuListShow">
            <div class="list-type" @click="addPoint()" :class="{ thisDotting: openCur == 1 }">
                <span class="zoniot_font zoniot-icon-tianjia1"></span>添加
            </div>
            <div class="list-type" @click="editPoint" :class="{ thisDotting: openCur == 2 }">
                <span class="zoniot_font zoniot-icon-bianji3"></span>编辑
            </div>
            <!-- <div class="list-type" @click="submitPoint" :class="{ thisDotting: openCur == 3 }">
                <span class="zoniot_font zoniot-icon-baocun"></span>保存
            </div> -->
        </div>
        <div class="rightFloatType" :class="showChart ? '' : 'showChart'">
            <el-checkbox-group v-model="showPointArr">
                <el-checkbox :class="'typeIcon' + items.type" v-for="items in deviceArr" :label="items.type" :key="items.type">{{
                    items.label
                }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="index-content-right" v-if="showChart">
            <water-consumption></water-consumption>
            <power-consumption></power-consumption>
            <patrol-task-completion-rate></patrol-task-completion-rate>
            <key-areas></key-areas>
        </div>
        <div class="index-content-buttom" v-if="showChart">
            <passenger-flow-statistics></passenger-flow-statistics>
        </div>
        <modular-loading :loadding="false" tipsText="地图加载中"></modular-loading>
    </div>
</template>

<script>
import smallModuleIndex from '@views/smallModule/index.js';
import { mapState } from 'vuex';
export default {
    mixins: [smallModuleIndex],
    data() {
        return {
            showChart: true,
            loadding: true,
            openCur: null,
            modelPictureUrl: '',
            deviceArr: [
                {
                    type: 1,
                    label: '摄像头'
                },
                {
                    type: 2,
                    label: '门禁机'
                },
                {
                    type: 3,
                    label: '停车道闸'
                },
                {
                    type: 4,
                    label: '水表'
                },
                {
                    type: 5,
                    label: '电表'
                }
            ],
            mixins_query: {
                communityId: ''
            },
            showPointArr: [1, 2, 3, 4, 5],
            point: [],
            imgUrl: require('@/assets/img/homeIcon/bg_bottom.png')
        };
    },
    computed: {
        ...mapState(['homeCommunityAll']),
        points() {
            let showArr = [];
            this.point.map((item) => {
                if (this.showPointArr.includes(item.deviceType)) {
                    showArr.push(item);
                }
            });
            return showArr;
        },
        menuListShow() {
            if (
                !!this.$store.getters['getMenuList'] &&
                !!this.$store.getters['getMenuList'][0] &&
                !!this.$store.getters['getMenuList'][0].children &&
                !!this.$store.getters['getMenuList'][0].children[0].name == '添加点位'
            ) {
                return true;
            } else {
                return false;
            }
        }
    },
    watch: {
        //全局社区接口调用
        homeCommunityAll(val) {
            try {
                this.mixins_query.communityId = val;
                this.getData();
                this.getImg();
            } catch {}
        }
    },
    methods: {
        addPoint() {
            if (this.openCur == 1) {
                this.openCur = null;
            } else {
                this.openCur = 1;
            }
        },
        editPoint() {
            if (this.openCur == 2) {
                this.openCur = null;
            } else {
                this.openCur = 2;
            }
        },
        submitPoint() {
            this.openCur = 3;
        },
        togglePop(row) {
            let url = '',
                width = '2.89rem',
                height = '2.25rem',
                showHide = false;

            if (row.deviceType == 1) {
                url = 'typeCamera';
            } else if (row.deviceType == 2) {
                url = 'typeAccessControl';
            } else if (row.deviceType == 3) {
                url = 'typeCard';
                showHide = true;
            } else if (row.deviceType == 4) {
                url = 'typeHydropower';
                height = '2.65rem';
            } else if (row.deviceType == 5) {
                url = 'typeHydropower';
                height = '1.2rem';
            }
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: `/commandDispatch/pop/${url}.vue`,
                    title: row.deviceName,
                    notip: true,
                    width: width,
                    height: height,
                    fullscreen: false,
                    showFooter: true,
                    showAlarm: true,
                    showHide: showHide,
                    props: {
                        row,
                        callback: resolve
                    }
                });
            }).then(() => {});
        },
        paintingPoint(e) {
            let width = window.getComputedStyle(this.$refs.divImg).width.replace(/px/, ''),
                height = window.getComputedStyle(this.$refs.divImg).height.replace(/px/, '');
            let pointObj = {
                xcoordinate: Number(((e.x / width) * 100).toFixed(6)),
                ycoordinate: Number(((e.y / height) * 100).toFixed(6))
            };
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/commandDispatch/pop/dottingEquipment.vue',
                    title: '添加设备',
                    notip: true,
                    width: '3.89rem',
                    height: '2.25rem',
                    props: {
                        pointObj,
                        deviceArr: this.deviceArr,
                        callback: resolve
                    }
                });
            }).then(() => {
                this.getData();
            });
        },
        pointClose(item) {
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.get('/sc-community/community/layer/delete', { id: item.id }).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {});
        },
        toggleShow() {
            this.showChart = !this.showChart;
        },
        getData() {
            this.$http
                .post('/sc-community/community/layer/list', this.mixins_query)
                .then(({ status, data, msg }) => {
                    if (status == 0 && !!data) {
                        this.point = data;
                    } else {
                        this.$message.error(msg);
                    }
                    loading.close();
                })
                .catch(() => {});
        },
        getImg() {
            this.$http
                .get('/sc-community/assets/community/find/' + this.mixins_query.communityId)
                .then(({ status, data, msg }) => {
                    if (status == 0 && !!data) {
                        this.modelPictureUrl = data.modelPictureUrl;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        }
    },

    created() {
        if (!!this.mixins_query.communityId) {
            this.getImg();
            this.getData();
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@views/commandDispatch/style.scss';
</style>