| | |
| | | * @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: 安保活动 |
| | | * |
| | |
| | | <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"> |
| | |
| | | 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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | |
| | | <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> |
| | | |
| | |
| | | </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> |
| | |
| | | </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 |
| | |
| | | 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: [], |
| | |
| | | } |
| | | }, |
| | | created () { |
| | | // 获取下拉列表数据 |
| | | this.getActivityType() |
| | | |
| | | this.getPoliceList() |
| | | this.getCarList() |
| | | this.getSecurityList(this.currentPage, this.pagesize) |
| | | }, |
| | | mounted () { |
| | | |
| | | |
| | | this.$parent.$parent.resize('400px', true) |
| | | |
| | | this.$nextTick(() => { |
| | |
| | | }, |
| | | |
| | | 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 = [] |
| | |
| | | list.push(new global.DC.Position(lng, lat)) |
| | | } |
| | | return list |
| | | }, |
| | | |
| | | inputChange (e) { |
| | | console.log(e) |
| | | }, |
| | | |
| | | // 点击搜索 |
| | |
| | | // 获取活动列表 |
| | | 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() |
| | | }) |
| | |
| | | .search-box { |
| | | padding: 0 10px; |
| | | |
| | | & > div:first-child { |
| | | &>div:first-child { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | & > div { |
| | | &>div { |
| | | margin-top: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | .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; |
| | | |
| | |
| | | |
| | | .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) { |
| | |
| | | |
| | | li { |
| | | button { |
| | | width: 60px; |
| | | height: 30px; |
| | | margin: 0 5px; |
| | | background-color: $bg-color; |
| | |
| | | |
| | | .second-container { |
| | | position: absolute; |
| | | top: 10px; |
| | | top: 0px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | width: 240px; |
| | | background: $bg-color; |
| | | |
| | | :deep(.el-tree) { |
| | | background: transparent; |
| | |
| | | } |
| | | |
| | | :deep(.el-tree-node) { |
| | | background: $bg-color; |
| | | background: transparent; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .second-container.spread { |
| | | left: 410px; |
| | | left: 444px; |
| | | } |
| | | |
| | | .second-container.take-back { |
| | |
| | | line-height: 28px; |
| | | display: flex; |
| | | |
| | | & > div { |
| | | &>div { |
| | | text-align: left; |
| | | } |
| | | |
| | |
| | | |
| | | li { |
| | | button { |
| | | width: 60px; |
| | | height: 30px; |
| | | margin: 0 5px; |
| | | background-color: $bg-color; |