shuishen
2022-12-29 237204bde8401ba4bdae3ac365558d7d9e9e8599
changes
7 files modified
1 files added
288 ■■■■■ changed files
public/img/icon/police-people.png patch | view | raw | blame | history
src/App.vue 7 ●●●●● patch | view | raw | blame | history
src/api/activity/index.js 22 ●●●●● patch | view | raw | blame | history
src/styles/base/index.scss 1 ●●●● patch | view | raw | blame | history
src/styles/element-ui/element-ui.scss 8 ●●●●● patch | view | raw | blame | history
src/styles/media/index.scss 25 ●●●●● patch | view | raw | blame | history
src/views/activity/index.vue 221 ●●●●● patch | view | raw | blame | history
vue.config.js 4 ●●●● patch | view | raw | blame | history
public/img/icon/police-people.png
src/App.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 15:58:10
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-28 16:34:58
 * @LastEditTime: 2022-12-29 10:54:35
 * @FilePath: \srs-police-affairs\src\App.vue
 * @Description: app.vue
 * 
@@ -25,8 +25,8 @@
    created () {
        if (window.screen.availWidth) {
            this.currentWidth = window.screen.availWidth + 'px'
            this.currentHeight = window.screen.availHeight + 'px'
            this.currentWidth = window.screen.width + 'px'
            this.currentHeight = window.screen.height + 'px'
        }
    }
}
@@ -34,7 +34,6 @@
<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
src/api/activity/index.js
@@ -152,4 +152,26 @@
            securityId
        }
    })
}
/**
 * 获取业务字典
 * @returns
 */
export const getServiceDictionary = () => {
    return request({
        url: `/api/blade-system/dict-biz/parent-list?current=1&size=9999`,
        method: 'get'
    })
}
/**
 * 获取活动类型
 * @returns
 */
export const getActivityType = (parentId) => {
    return request({
        url: `/api/blade-system/dict-biz/child-list?current=1&size=9999&parentId=${parentId}`,
        method: 'get'
    })
}
src/styles/base/index.scss
@@ -11,6 +11,7 @@
    width: 100%;
    height: 100%;
    font-size: 16px;
    overflow-x: hidden;
}
ul {
src/styles/element-ui/element-ui.scss
@@ -137,12 +137,14 @@
    // background-color: rgba(0, 92, 169, 0.3);
    background-color: $table-body-tr-n-color;
}
.el-select-dropdown__empty{
.el-select-dropdown__empty {
    background-color: rgba(9, 53, 182, 0.93) !important;
    color: #fff;
}
.el-date-range-picker.has-sidebar {
    width: 756px!important;
    width: 756px !important;
}
@@ -154,7 +156,7 @@
/* 日历样式 */
.el-picker-panel {
    background-color: $table-body-tr-2n-color;
    background-color: rgba(8, 56, 185, 1);
    color: #ffffff;
    border: 1px solid #93bee7 !important;
}
src/styles/media/index.scss
@@ -1307,6 +1307,9 @@
                                    }
                                    .category-value {
                                        display: flex;
                                        align-items: center;
                                        .category-input {
                                            width: 80%;
                                            height: countSizeVh(32);
@@ -1446,7 +1449,8 @@
                            ul {
                                li {
                                    button {
                                        width: countSizeVw(60, 1920);
                                        padding: 0 countSizeVh(6);
                                        min-width: countSizeVw(60, 1920);
                                        line-height: countSizeVh(30);
                                        height: countSizeVh(30);
                                        margin: 0 countSizeVw(5, 1920);
@@ -1459,7 +1463,7 @@
                        }
                        .second-container {
                            top: countSizeVh(10);
                            top: countSizeVh(0);
                            width: countSizeVw(240, 1920);
                            .el-tree-node__content {
@@ -1490,7 +1494,7 @@
                        }
                        .second-container.spread {
                            left: countSizeVw(410, 1920);
                            left: countSizeVw(444, 1920);
                        }
                        .second-container.take-back {
@@ -1523,15 +1527,17 @@
                                }
                                .el-switch__core {
                                    height: countSizeVw(14, 1920);
                                    width: countSizeVw(30, 1920) !important;
                                    border-radius: countSizeVw(10, 1920);
                                    height: countSizeVh(14);
                                    border-radius: countSizeVh(7);
                                    border: countSizeVh(1) solid #DCDFE6;
                                }
                                .el-switch__core:after {
                                    top: countSizeVh(1);
                                    left: countSizeVh(1);
                                    margin: auto;
                                    top: 0;
                                    bottom: 0;
                                    left: 0;
                                    width: countSizeVw(12, 1920);
                                    height: countSizeVw(12, 1920);
                                }
@@ -1551,10 +1557,11 @@
                            ul {
                                li {
                                    button {
                                        width: countSizeVw(60, 1920);
                                        padding: 0 countSizeVh(6);
                                        margin: 0 countSizeVw(5, 1920);
                                        min-width: countSizeVw(60, 1920);
                                        height: countSizeVh(30);
                                        line-height: countSizeVh(30);
                                        margin: 0 countSizeVw(5, 1920);
                                        border: countSizeVh(1) solid #cecece;
                                        border-radius: countSizeVw(4, 1920);
                                        font-size: countSizeVh(16);
src/views/activity/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-01 15:26:21
 * @LastEditTime: 2022-12-29 14:27:04
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -17,34 +17,13 @@
                <div>
                    <div class="category">活动类型:</div>
                    <div class="category-value">
                        <el-select
                            size="small"
                            v-model="activityType"
                            placeholder="请选择"
                            @change="activityTypeChange"
                        >
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                class="activity-option"
                            ></el-option>
                        <el-select size="small" v-model="activityType" placeholder="请选择" @change="activityTypeChange">
                            <el-option v-for="item in activityOptions" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey" class="activity-option"></el-option>
                        </el-select>
                    </div>
                </div>
                <div>
                    <div class="category">活动名称:</div>
                    <div class="category-value">
                        <input
                            type="text"
                            placeholder="请输入搜索条件"
                            v-model="searchActivity"
                            class="category-input"
                        />
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
                </div>
                <div>
                    <div class="category">选择时间:</div>
                    <div class="category-value">
@@ -55,31 +34,26 @@
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>-->
                        <el-date-picker
                            v-model="selectTime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            @change="activityTimeChange"
                        ></el-date-picker>
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                            @change="activityTimeChange"></el-date-picker>
                    </div>
                </div>
                <div>
                    <div class="category">活动名称:</div>
                    <div class="category-value">
                        <input type="text" placeholder="请输入活动名称" v-model="searchActivity" class="category-input"
                            @input="inputChange" />
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div
                        class="row-box"
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList"
                        :key="index"
                        @click="activityListClick(item, index)"
                    >
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList" :key="index" @click="activityListClick(item, index)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -92,9 +66,7 @@
                            </div>
                            <div>
                                <div class="category">活动时间:</div>
                                <div
                                    class="category-value"
                                >{{ item.startTime }} 至 {{ item.updateTime }}</div>
                                <div class="category-value">{{ item.startTime }} 至 {{ item.endTime }}</div>
                            </div>
                            <div>
                                <div class="category">活动详情:</div>
@@ -104,14 +76,8 @@
                    </div>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
@@ -119,22 +85,22 @@
        <div class="draw-btn-box" v-show="dialogVisible">
            <ul>
                <li>
                    <button @click="draw('billboard','policeman')">警员</button>
                    <button @click="draw('billboard', 'policeman')">警员</button>
                </li>
                <li>
                    <button @click="draw('polyline','policeman')">警员路线</button>
                    <button @click="draw('polyline', 'policeman')">警员路线</button>
                </li>
                <li>
                    <button @click="draw('polygon','policeman')">警员范围</button>
                    <button @click="draw('polygon', 'policeman')">警员范围</button>
                </li>
                <li>
                    <button @click="draw('billboard','policecar')">警车</button>
                    <button @click="draw('billboard', 'policecar')">警车</button>
                </li>
                <li>
                    <button @click="draw('polyline','policecar')">警车路线</button>
                    <button @click="draw('polyline', 'policecar')">警车路线</button>
                </li>
                <li>
                    <button @click="draw('polygon','policecar')">警车范围</button>
                    <button @click="draw('polygon', 'policecar')">警车范围</button>
                </li>
            </ul>
        </div>
@@ -151,56 +117,34 @@
            <div class="row-box">
                <div class="category">活动名称:</div>
                <div class="category-value">xxx活动</div>
                <div class="category-value">{{ activityDetails.name }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动时间:</div>
                <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动内容1:</div>
                <div class="category-value">
                    在接到停电通知的状况下,管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户,并在主要出入口发布停电通告;同时,
                    工程物料部应做好停电前的应变工作。
                    {{ activityDetails.content }}
                </div>
            </div>
            <div class="row-box">
                <div class="category">活动内容2:</div>
                <div class="category-value">
                    在没有接到任何通知、突然发生停电的状况下,工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电,应立即派人查找原因采取措施,防止故障扩
                    大;若系外部停电,一方面要防止突然来电引发事故,一方面致电电力局查询停电状 况,了解何时恢复供电,并将了解的状况通知管理运作部。
                </div>
            </div>
            <div class="row-box">
                <div class="category">活动内容3:</div>
                <div class="category-value">保安部立即会同工程物料部派人分头前往各楼检查电梯运行状况,发现电梯关人立 即按照电梯困人应急预案施救。</div>
            </div>
            <div class="row-box">
                <div class="category">应急预案:</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>
            <div class="row-box">
                <div class="category">开启轨迹:</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineBtnSwitch"
                        @change="switchBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>
@@ -244,22 +188,12 @@
            </ul>
        </div>
        <el-dialog
            :title="policeChooseTitle"
            :modal="true"
            :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose"
            :close-on-click-modal="true"
            class="choose-police-box"
        >
        <el-dialog :title="policeChooseTitle" :modal="true" :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
            <div>
                <el-select size="small" v-model="policeType" placeholder="请选择">
                    <el-option
                        v-for="item in policeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <el-button @click="determine">确定</el-button>
                <el-button @click="cancel">取消</el-button>
@@ -269,7 +203,7 @@
</template>
<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar } from '@/api/activity/index.js'
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType } from '@/api/activity/index.js'
let analyseLayer = null
let analysePolygon = null
@@ -284,25 +218,12 @@
            currentPage: 1,
            pagesize: 4,
            pagesCount: 1,
            activityOptions: [{
                value: '1',
                label: '教育活动'
            }, {
                value: '2',
                label: '科技活动'
            }, {
                value: '3',
                label: '公益活动'
            }, {
                value: '4',
                label: '组织活动'
            }, {
                value: '5',
                label: '文娱活动'
            }, {
                value: '6',
                label: '体育活动'
            }],
            activityOptions: [
                {
                    dictKey: '',
                    dictValue: '全部'
                }
            ],
            policeOption: [],
            policemanOption: [],
            policecarOption: [],
@@ -468,13 +389,14 @@
        }
    },
    created () {
        // 获取下拉列表数据
        this.getActivityType()
        this.getPoliceList()
        this.getCarList()
        this.getSecurityList(this.currentPage, this.pagesize)
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$nextTick(() => {
@@ -503,6 +425,15 @@
    },
    methods: {
        getActivityType () {
            getServiceDictionary().then(response => {
                const activityType = response.data.data.records.filter(item => item.code == "securityType")
                getActivityType(activityType[0].id).then(res => {
                    this.activityOptions.push(...res.data.data)
                })
            })
        },
        // 生成热力图坐标
        generatePosition (num) {
            let list = []
@@ -512,6 +443,10 @@
                list.push(new global.DC.Position(lng, lat))
            }
            return list
        },
        inputChange (e) {
            console.log(e)
        },
        // 点击搜索
@@ -646,7 +581,12 @@
        // 获取活动列表
        getSecurityList (current, size, type, name, startTime, endTime) {
            getSecurityList(current, size, type, name, startTime, endTime).then(res => {
                this.activityList = res.data.data.records
                this.activityList = res.data.data.records.map(item => {
                    item.startTime = item.startTime.substring(0, 16)
                    item.endTime = item.endTime.substring(0, 16)
                    return item
                })
                this.pagesCount = res.data.data.pages
                this.addActivityPoint()
            })
@@ -1104,11 +1044,11 @@
        .search-box {
            padding: 0 10px;
            & > div:first-child {
            &>div:first-child {
                margin-top: 0;
            }
            & > div {
            &>div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -1178,12 +1118,12 @@
                .row-box {
                    margin: 10px;
                    padding: 10px;
                    background: rgba(25, 23, 99, 0.7);
                    background: $table-body-tr-2n-color;
                    cursor: pointer;
                    font-size: 14px;
                    .row-content {
                        & > div {
                        &>div {
                            display: flex;
                            line-height: 28px;
@@ -1203,12 +1143,12 @@
                .row-box:hover {
                    // background-color: $table-header-bg-color;
                    background-color: rgba(0, 0, 138, 0.8);
                    background-color: rgba(17, 38, 163, 0.5);
                }
                .row-box.on {
                    // background: $table-header-bg-color;
                    background-color: rgba(0, 0, 138, 0.8);
                    background-color: rgba(17, 38, 163, 0.5);
                }
                :deep(.el-dialog) {
@@ -1247,7 +1187,6 @@
            li {
                button {
                    width: 60px;
                    height: 30px;
                    margin: 0 5px;
                    background-color: $bg-color;
@@ -1263,10 +1202,11 @@
    .second-container {
        position: absolute;
        top: 10px;
        top: 0px;
        display: flex;
        flex-direction: column;
        width: 240px;
        background: $bg-color;
        :deep(.el-tree) {
            background: transparent;
@@ -1277,13 +1217,13 @@
        }
        :deep(.el-tree-node) {
            background: $bg-color;
            background: transparent;
            color: #fff;
        }
    }
    .second-container.spread {
        left: 410px;
        left: 444px;
    }
    .second-container.take-back {
@@ -1327,7 +1267,7 @@
            line-height: 28px;
            display: flex;
            & > div {
            &>div {
                text-align: left;
            }
@@ -1357,7 +1297,6 @@
            li {
                button {
                    width: 60px;
                    height: 30px;
                    margin: 0 5px;
                    background-color: $bg-color;
vue.config.js
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-01 14:31:03
 * @LastEditTime: 2022-12-29 11:38:33
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description:
 *
@@ -153,7 +153,7 @@
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称,即是你的api接口的服务器地址
                target: "http://192.168.0.125:82",
                target: "http://192.168.0.107:82",
                // ws: true, //启用webSocket
                changeOrigin: true, //开启代理跨域
                pathRewrite: {