警力表格内容换行问题、地块柱状图样式、社区模块下拉框宽度调整、户籍重点人员详情弹窗

guanqb

2023-01-07 71b4841afecaee71a988cde353aee1ed485d1f88

警力表格内容换行问题、地块柱状图样式、社区模块下拉框宽度调整、户籍重点人员详情弹窗

 src/styles/media/index.scss

@@ -340,7 +340,6 @@


                    }

                    .house-page {
                        .container-content {

@@ -2544,9 +2543,11 @@
            top: countSizeVh(116) !important;
            left: countSizeVw(0, 1920) !important;
        }
                    // el-popover-6062

        .el-popover {
            min-width: countSizeVw(150, 1920);
            width: countSizeVw(400, 1920);
            padding: countSizeVh(12);
            border-radius: countSizeVh(4);
            font-size: countSizeVh(14);

 src/views/home/components/leftContainer.vue

@@ -14,11 +14,19 @@
                    </div> -->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 0 }"
                        @click="personTabClick(0)"
                    >
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">164.57万人</div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 1 }"
                        @click="personTabClick(1)"
                    >
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">1人</div>
                    </div>
@@ -28,42 +36,68 @@
                    </div> -->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0"
                    @click="backBegin"
                ></div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    <path
                        id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent">
                    </path>
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                        <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent"
                    />
                    <radialGradient
                        id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c"
                        cx="50%"
                        cy="50%"
                        r="50%"
                    >
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                        <circle
                            cx="0"
                            cy="0"
                            r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"
                        >
                            <animateMotion
                                dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite"></animateMotion>
                                rotate="auto"
                                repeatCount="indefinite"
                            />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -71,11 +105,19 @@
            <div class="box">
                <div class="title">现有房屋</div>
                <div class="sub-tab">
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                        @click="houseTabClick(0)"
                    >
                        <div class="tab-title-small">实有房屋:</div>
                        <div class="tab-title-small">182万户</div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                        @click="houseTabClick(1)"
                    >
                        <div class="tab-title-small">关注场所:</div>
                        <div class="tab-title-small">634个</div>
                    </div>
@@ -84,11 +126,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -96,11 +146,19 @@
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab">
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 0 }"
                        @click="landTabClick(0)"
                    >
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">634个</div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 1 }"
                        @click="landTabClick(1)"
                    >
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">634个</div>
                    </div>
@@ -109,11 +167,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -370,7 +436,7 @@
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            } else if (type == 1) {
                this.peopleTabClick(type);
                this.peopleTabClick(type)
            }
        },

@@ -499,7 +565,7 @@
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '18%'
                    bottom: '24%'
                },
                tooltip: {
                    trigger: 'item',
@@ -517,6 +583,7 @@
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
@@ -540,6 +607,7 @@
                        data: yDate,
                        type: 'bar',
                        barWidth: '24%',
                        barCategoryGap: '10%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
@@ -552,30 +620,30 @@
                    }
                ],
                // zoomData: [  // 有滚动条 平移
                dataZoom: [  // 有滚动条 平移
                    {
                        type: 'slider',
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 40,  // 初始展示40%
                        height: 4,
                        backgroundColor: 'rgba(47,69,84,0.2)',
                        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        handleSize: 0, // 两边手柄尺寸
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '96%',
                    },
                    {
                        type: "inside",  // 支持内部鼠标滚动平移
                        start: 0,
                        end: 40,
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    }
                ]
                // dataZoom: [  // 有滚动条 平移
                //     {
                //         type: 'slider',
                //         show: true,
                //         realtime: true,
                //         start: 0,
                //         end: 40,  // 初始展示40%
                //         height: 4,
                //         backgroundColor: 'rgba(47,69,84,0.2)',
                //         fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         handleSize: 0, // 两边手柄尺寸
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '96%',
                //     },
                //     {
                //         type: "inside",  // 支持内部鼠标滚动平移
                //         start: 0,
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                //     }
                // ]
            }
        },

@@ -992,7 +1060,6 @@
        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;


        .box {
            display: flex;

 src/views/house/index.vue

@@ -190,11 +190,11 @@

                            <div class="content">
                                <div class="one">
                                    <div>
                                    <div @click="goTOPeopleDetail">
                                        <div>160</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                    <div @click="goTOPeopleDetail">
                                        <div style="color:#FF796C">16</div>
                                        <div>重点人口</div>
                                    </div>
@@ -551,6 +551,30 @@
                <el-table-column prop="workplace" label="工作地" width="180"></el-table-column>
            </el-table>-->
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                <el-table-column prop="housingEastate" label="所属责任区"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

@@ -741,6 +765,64 @@
            parkingLotData: [],
            comeOutData: [],
            businessData: [],
            keyPersonVisible: false,
            keyPersonDetailArr: [
                {
                    "name": "张某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "车站所",
                    "housingEastate": "责任区1",
                    "type": "涉恐人员"
                },
                {
                    "name": "黄某某",
                    "sex": "男",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "沙溪所",
                    "housingEastate": "责任区4",
                    "type": "涉恐人员"
                },
                {
                    "name": "邓某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "灵溪所",
                    "housingEastate": "责任区3",
                    "type": "涉恐人员"
                },
                {
                    "name": "章某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "江光所",
                    "housingEastate": "责任区1",
                    "type": "涉恐人员"
                },
                {
                    "name": "王某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "车站所",
                    "housingEastate": "责任区3",
                    "type": "涉恐人员"
                },
                {
                    "name": "贾某某",
                    "sex": "男",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "灵溪所",
                    "housingEastate": "责任区2",
                    "type": "涉恐人员"
                }
            ],

        }
    },
    watch: {
@@ -1150,6 +1232,10 @@
                },
            })
        },

        goTOPeopleDetail () {
            this.keyPersonVisible = true
        },
    },

    destroyed () {
@@ -1442,6 +1528,9 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                & > div {
                                    cursor: pointer;
                                }
                                & > div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
@@ -1462,6 +1551,10 @@

                    .people-info {
                        .content {
                            .one div {
                                cursor: pointer;
                            }

                            .two {
                                margin-top: 16px;
                            }

 src/views/police/index.vue

@@ -107,7 +107,12 @@
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column
                            prop="name"
                            label="名称"
                            min-width="25%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
                            <template slot-scope="scope">
@@ -158,9 +163,14 @@
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
                        <el-table-column
                            prop="name"
                            label="名称"
                            min-width="40%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="20%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="15%">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.state == '在线' }"></div>
                            </template>
@@ -209,7 +219,12 @@
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column
                            prop="name"
                            label="名称"
                            min-width="25%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
                            <template slot-scope="scope">
@@ -1071,6 +1086,12 @@
                    background-color: #4ccc7d;
                }
            }

            :deep(.el-table td.el-table__cell div) {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .track-box {