弹窗样式内容

guanqb

2022-11-15 71a7d1da8a740f1579a8d9f658182e6f9d2e116a

弹窗样式内容

 src/components/map/components/mapPopup.vue

@@ -1,6 +1,43 @@
<template>
    <div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="wwwwwwwww">55555555555</div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="container">
            <div class="title">
                详细信息
                <div class="close" @click="closePopup"></div>
            </div>
            <div class="item">
                <div>所属派出所:</div>
                <div>{{dataPopup.policeName}}</div>
            </div>
            <div class="item">
                <div>警情类别:</div>
                <div>{{dataPopup.type}}</div>
            </div>
            <div class="item">
                <div>警情状态:</div>
                <div>{{dataPopup.state}}</div>
            </div>
            <div class="item">
                <div>报警电话:</div>
                <div>{{dataPopup.comingPhone}}</div>
            </div>
            <div class="item">
                <div>接警时间:</div>
                <div>{{dataPopup.dealTime}}</div>
            </div>
            <div class="item">
                <div>经办民警:</div>
                <div>{{dataPopup.dealPolice}}</div>
            </div>
            <div class="item">
                <div>报警人:</div>
                <div>{{dataPopup.callPeople}}</div>
            </div>
            <div class="item">
                <div>报警人联系人:</div>
                <div>{{dataPopup.callPhone}}</div>
            </div>
        </div>
    </div>
</template>

@@ -10,19 +47,72 @@
    name: 'mapPopup',
    computed: {
        ...mapGetters([
            'detailsPopup'
            'detailsPopup',
            'dataPopup'
        ])
    },
    methods: {
        closePopup () {
            this.$store.commit('SET_DETAILSPOPUP', false)
        }
    }
}
</script>

<style>
.wwwwwwwww {
<style lang="scss" scoped>
.container {
    position: fixed;
    left: 0;
    z-index: 1 !important;
    width: 200px;
    height: 300px;
    background: red;
    width: 280px;
    height: 360px;
    background: $bg-color;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: flex-start;
    align-content: flex-start;
    .title {
        height: 40px;
        line-height: 30px;
        width: 100%;
        position: relative;
        .close {
            position: absolute;
            right: 5px;
            top: -5px;
        }
        .close::before {
            font-family: element-icons;
            content: '\e6db';
            cursor: pointer;
            font-size: 16px;
        }
        .close:hover::before {
            color: #3d95f3;
        }
    }
    .item {
        display: flex;
        flex-direction: row;
        width: calc(100% - 20px);
        height: 36px;
        line-height: 36px;
        margin: 0 10px;
        text-align: left;

        & > div:first-child {
            width: 100px;
            text-align: justify;
            display: inline-block;
            text-align-last: justify;
            margin-right: 20px;
        }

        & > div:nth-of-type(2) {
            width: calc(100% - 120px);
        }
    }
}
</style>

 src/store/getters.js

@@ -1,4 +1,5 @@
const getters = {
    detailsPopup: (state) => state.popupParams.detailsPopup
    detailsPopup: (state) => state.popupParams.detailsPopup,
    dataPopup: (state) => state.popupParams.dataPopup
}
export default getters

 src/store/modules/popupParams.js

@@ -1,10 +1,14 @@
const popupParams = {
    state: {
        detailsPopup: false
        detailsPopup: false,
        dataPopup: {}
    },
    mutations: {
        SET_DETAILSPOPUP (state, detailsPopup) {
            state.detailsPopup = detailsPopup
        },
        SET_DATAPOPUP (state, dataPopup) {
            state.dataPopup = dataPopup
        }
    },
    actions: {

 src/views/home/components/bottomContainer.vue

@@ -179,6 +179,7 @@
                    siteWd: Number(item.position[1])
                })
                this.$store.commit('SET_DETAILSPOPUP', true)
                this.$store.commit('SET_DATAPOPUP', item)
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'divFormsDomBox',
                    position: [

 src/views/home/components/rightContainer.vue

@@ -168,7 +168,7 @@
                    formatter: function (params) {
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#949494">监控：${params.data.monitorCount}台</span><br /><span style="color:#fe2929">手台${params.data.phoneCount}台</span><span style="margin-left:10px;color:#69a9ff">手持记录仪：${params.data.recorderCount}台</span>`
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
                        }
@@ -230,7 +230,20 @@
                        labelLine: {
                            show: false
                        },
                        data: dataArr
                        data: dataArr,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#00fe01', '#949494', '#fe2929', '#69a9ff']
                                    } else {
                                        colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ],
                grid: {
@@ -507,6 +520,7 @@
            }
            return dataArr
        },

        getEquimentChartStateData (newArr) {
            let working = 0
            let spare = 0