| New file |
| | |
|---|
| | | <!-- |
|---|
| | | * @Author: shuishen 1109946754@qq.com |
|---|
| | | * @Date: 2022-08-18 16:18:17 |
|---|
| | | * @LastEditors: shuishen 1109946754@qq.com |
|---|
| | | * @LastEditTime: 2022-12-29 15:46:00 |
|---|
| | | * @FilePath: \srs-police-affairs\src\views\activity\index.vue |
|---|
| | | * @Description: 安保活动 |
|---|
| | | * |
|---|
| | | * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. |
|---|
| | | --> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div class="activity-page container"> |
|---|
| | | <div v-show="boxShow" class="container-content"> |
|---|
| | | <div class="title">安保活动</div> |
|---|
| | | <div class="search-box"> |
|---|
| | | <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.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"> |
|---|
| | | <!-- <el-date-picker |
|---|
| | | size="small" |
|---|
| | | v-model="selectTime" |
|---|
| | | type="date" |
|---|
| | | 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> |
|---|
| | | </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 |
|---|
| | | v-show="activityList.length > 0" |
|---|
| | | 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 class="category">活动名称：</div> |
|---|
| | | <div class="category-value">{{ item.name }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="category">申报人数：</div> |
|---|
| | | <div class="category-value">{{ item.number }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="category">活动时间：</div> |
|---|
| | | <div |
|---|
| | | class="category-value" |
|---|
| | | >{{ item.startTime }} 至 {{ item.endTime }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="category">活动详情：</div> |
|---|
| | | <div class="category-value">{{ item.content }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-show="activityList == 0" class="no-data">暂无数据</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> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="draw-btn-box" v-show="arrangeVisible"> |
|---|
| | | <div> |
|---|
| | | <span>警力资源：</span> |
|---|
| | | |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('billboard', 'policeman')"> |
|---|
| | | <img src="../../../public/img/icon/police.png" style="height:100%" /> |
|---|
| | | </button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('polyline', 'policeman')">警员路线</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('polygon', 'policeman')">警员范围</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('billboard', 'policecar')"> |
|---|
| | | <img src="../../../public/img/icon/car.png" style="height:100%" /> |
|---|
| | | </button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('polyline', 'policecar')">警车路线</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="draw('polygon', 'policecar')">警车范围</button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <span>作战标绘：</span> |
|---|
| | | |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <button @click="drawArrow('attack_arrow')">进攻箭头</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="drawArrow('double_arrow')">双箭头</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="drawArrow('fine_arrow')">直箭头</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="drawArrow('tailed_attack_arrow')">燕尾箭头</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="removeAllArrow()">清除</button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <span>撤离路线：</span> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <el-button |
|---|
| | | title="路线绘制" |
|---|
| | | @click="draw('billboard', 'policeman')" |
|---|
| | | icon="el-icon-my-route" |
|---|
| | | ></el-button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }"> |
|---|
| | | <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-show="dialogVisible" class="activity-details-box"> |
|---|
| | | <div class="title"> |
|---|
| | | 活动详情 |
|---|
| | | <div class="close" @click="closeActivityDetails"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="row-box"> |
|---|
| | | <div class="category">活动名称：</div> |
|---|
| | | <div class="category-value">{{ activityDetails.name }}</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="row-box"> |
|---|
| | | <div class="category">活动时间：</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">应急预案：</div> |
|---|
| | | <div class="category-value"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | </div>--> |
|---|
| | | |
|---|
| | | <!-- <div class="row-box"> |
|---|
| | | <div class="category">分析范围：</div> |
|---|
| | | <div class="category-value"> |
|---|
| | | <el-input |
|---|
| | | @input="analyseChange" |
|---|
| | | size="mini" |
|---|
| | | type="number" |
|---|
| | | v-model="analyseInput" |
|---|
| | | placeholder="请输入范围" |
|---|
| | | ></el-input> |
|---|
| | | </div> |
|---|
| | | </div>--> |
|---|
| | | |
|---|
| | | <div class="row-box"> |
|---|
| | | <el-button @click="arrangeDraw">预案布置</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="plan-control"> |
|---|
| | | <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> |
|---|
| | | </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> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="btn-box" v-show="isTrackBtnShow"> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <button @click="play()">播放</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="pause()">暂停</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="restore()">恢复</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="view('1', -20, 100)">第一视角</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="view('2')">上帝视角</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="view('tracked')">跟随视角</button> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <button @click="view('free')">自由视角</button> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <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-select> |
|---|
| | | <el-button @click="determine">确定</el-button> |
|---|
| | | <el-button @click="cancel">取消</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType } from '@/api/activity/index.js' |
|---|
| | | |
|---|
| | | let analyseLayer = null |
|---|
| | | let analysePolygon = null |
|---|
| | | let drawLayers = null |
|---|
| | | let drawArrowLayers = null |
|---|
| | | let plot = undefined |
|---|
| | | let arrowPlot = undefined |
|---|
| | | let tc = undefined |
|---|
| | | let track = undefined |
|---|
| | | let loading = null |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | currentPage: 1, |
|---|
| | | pagesize: 4, |
|---|
| | | pagesCount: 1, |
|---|
| | | activityOptions: [ |
|---|
| | | { |
|---|
| | | dictKey: '', |
|---|
| | | dictValue: '全部' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | policeOption: [], |
|---|
| | | policemanOption: [], |
|---|
| | | policecarOption: [], |
|---|
| | | activityType: '', |
|---|
| | | policeType: '', |
|---|
| | | searchActivity: '', |
|---|
| | | selectTime: '', |
|---|
| | | navType: 0, |
|---|
| | | treeData: [{ |
|---|
| | | id: 1, |
|---|
| | | label: '数据地图', |
|---|
| | | children: [{ |
|---|
| | | id: 2, |
|---|
| | | label: '实时警力', |
|---|
| | | children: [{ |
|---|
| | | id: 7, |
|---|
| | | label: 'BOOM', |
|---|
| | | lng: 116.020595, |
|---|
| | | lat: 28.686225, |
|---|
| | | alt: 100, |
|---|
| | | }, { |
|---|
| | | id: 8, |
|---|
| | | label: 'MDM', |
|---|
| | | lng: 116.030370, |
|---|
| | | lat: 28.685075, |
|---|
| | | alt: 100, |
|---|
| | | }, { |
|---|
| | | id: 9, |
|---|
| | | label: 'pdds', |
|---|
| | | lng: 116.021054, |
|---|
| | | lat: 28.684692, |
|---|
| | | alt: 100, |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | id: 3, |
|---|
| | | label: '视频监控', |
|---|
| | | children: [{ |
|---|
| | | id: 10, |
|---|
| | | label: '监控1', |
|---|
| | | lng: 116.032703, |
|---|
| | | lat: 28.677435, |
|---|
| | | alt: 100, |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | id: 4, |
|---|
| | | label: '治安重点场所', |
|---|
| | | children: [{ |
|---|
| | | id: 10, |
|---|
| | | label: '卡点', |
|---|
| | | lng: 116.029703, |
|---|
| | | lat: 28.683435, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 11, |
|---|
| | | label: '电警点', |
|---|
| | | lng: 115.022703, |
|---|
| | | lat: 28.682435, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 12, |
|---|
| | | label: '岗亭', |
|---|
| | | lng: 116.028002, |
|---|
| | | lat: 28.681302, |
|---|
| | | alt: 100, |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | id: 5, |
|---|
| | | label: '重点单位', |
|---|
| | | children: [{ |
|---|
| | | id: 13, |
|---|
| | | label: '大中型商超', |
|---|
| | | lng: 116.023293, |
|---|
| | | lat: 28.680986, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 14, |
|---|
| | | label: '幼儿园', |
|---|
| | | lng: 116.0275001, |
|---|
| | | lat: 28.679361, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 15, |
|---|
| | | label: '政府事业单位', |
|---|
| | | lng: 116.024398, |
|---|
| | | lat: 28.678066, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 16, |
|---|
| | | label: '机场', |
|---|
| | | lng: 116.0268529, |
|---|
| | | lat: 28.6829572, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 17, |
|---|
| | | label: '银行', |
|---|
| | | lng: 116.025595, |
|---|
| | | lat: 28.681225, |
|---|
| | | alt: 100, |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 6, |
|---|
| | | label: '特殊场所', |
|---|
| | | children: [{ |
|---|
| | | id: 18, |
|---|
| | | label: '印刷店', |
|---|
| | | lng: 116.020370, |
|---|
| | | lat: 28.680075, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 19, |
|---|
| | | label: '废旧金属收购', |
|---|
| | | lng: 116.030054, |
|---|
| | | lat: 28.683692, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 20, |
|---|
| | | label: '开锁店', |
|---|
| | | lng: 116.022703, |
|---|
| | | lat: 28.679435, |
|---|
| | | alt: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 21, |
|---|
| | | label: '酒店', |
|---|
| | | lng: 115.028703, |
|---|
| | | lat: 28.684435, |
|---|
| | | alt: 100, |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 777, |
|---|
| | | label: '热力图' |
|---|
| | | }] |
|---|
| | | }], |
|---|
| | | defaultProps: { |
|---|
| | | children: 'children', |
|---|
| | | label: 'label' |
|---|
| | | }, |
|---|
| | | dialogVisible: false, |
|---|
| | | arrangeVisible: false, |
|---|
| | | currentClickIndex: '', |
|---|
| | | polylineSwitch: false, |
|---|
| | | polylineBtnSwitch: false, |
|---|
| | | analyseInput: 100, |
|---|
| | | activityList: [], |
|---|
| | | activityDetails: {}, |
|---|
| | | boxShow: true, |
|---|
| | | policeChooseTitle: '选择警员', |
|---|
| | | policeChooseVisible: false, |
|---|
| | | overlayObj: {}, |
|---|
| | | isTrackBtnShow: false, |
|---|
| | | showingSecurityId: '', |
|---|
| | | policeIconIsCreated: false, |
|---|
| | | policeIconId: {}, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | // 获取下拉列表数据 |
|---|
| | | this.getActivityType() |
|---|
| | | |
|---|
| | | this.getPoliceList() |
|---|
| | | |
|---|
| | | this.getCarList() |
|---|
| | | |
|---|
| | | this.getSecurityList(this.currentPage, this.pagesize) |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | this.$parent.$parent.resize('400px', true) |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (analyseLayer == null) { |
|---|
| | | analyseLayer = new global.DC.VectorLayer('analyseLayer') |
|---|
| | | global.viewer.addLayer(analyseLayer) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (drawLayers == null) { |
|---|
| | | drawLayers = new global.DC.VectorLayer('drawLayers') |
|---|
| | | global.viewer.addLayer(drawLayers) |
|---|
| | | plot = new global.DC.Plot(global.viewer) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (drawArrowLayers == null) { |
|---|
| | | drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers') |
|---|
| | | global.viewer.addLayer(drawArrowLayers) |
|---|
| | | arrowPlot = new global.DC.Plot(global.viewer) |
|---|
| | | } |
|---|
| | | // 轨迹 |
|---|
| | | let positions = "116.023042, 28.684732; 116.023402, 28.679067; 116.023475, 28.678843; 116.023697, 28.678647; 116.024121, 28.678391; 116.026906, 28.678461; 116.027065, 28.676867; 116.033252, 28.676165" |
|---|
| | | tc = new global.DC.TrackController(global.viewer) |
|---|
| | | track = new global.DC.Track(positions, 15) |
|---|
| | | track.setModel('/model/qiche.gltf', { |
|---|
| | | scale: 0.5 |
|---|
| | | }) |
|---|
| | | tc.addTrack(track) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updated () { |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | loading () { |
|---|
| | | loading = this.$loading({ |
|---|
| | | lock: true, |
|---|
| | | text: '拼命加载中', |
|---|
| | | spinner: 'el-icon-loading', |
|---|
| | | background: 'rgba(0, 0, 0, 0.7)' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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 = [] |
|---|
| | | for (let i = 0; i < num; i++) { |
|---|
| | | let lng = 115.974 + Math.random() * 0.5 |
|---|
| | | let lat = 28.628 + Math.random() * 0.5 |
|---|
| | | list.push(new global.DC.Position(lng, lat)) |
|---|
| | | } |
|---|
| | | return list |
|---|
| | | }, |
|---|
| | | |
|---|
| | | inputChange (e) { |
|---|
| | | console.log(e) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 点击搜索 |
|---|
| | | searchClick () { |
|---|
| | | let startTime = '' |
|---|
| | | let endTime = '' |
|---|
| | | if (this.selectTime) { |
|---|
| | | startTime = this.selectTime[0] |
|---|
| | | endTime = this.selectTime[1] |
|---|
| | | } |
|---|
| | | this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 下拉选择值变化 |
|---|
| | | activityTypeChange () { |
|---|
| | | let startTime = '' |
|---|
| | | let endTime = '' |
|---|
| | | if (this.selectTime) { |
|---|
| | | startTime = this.selectTime[0] |
|---|
| | | endTime = this.selectTime[1] |
|---|
| | | } |
|---|
| | | this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 时间选中值触发 |
|---|
| | | activityTimeChange () { |
|---|
| | | let startTime = '' |
|---|
| | | let endTime = '' |
|---|
| | | if (this.selectTime) { |
|---|
| | | startTime = this.selectTime[0] |
|---|
| | | endTime = this.selectTime[1] |
|---|
| | | } |
|---|
| | | this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取活动警员分布信息 |
|---|
| | | getSecurityPoliceList (securityId) { |
|---|
| | | this.removeAll() |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | getSecurityPoliceList(securityId).then(res => { |
|---|
| | | res.data.data.forEach(item => { |
|---|
| | | if (item.type == 1) { |
|---|
| | | let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type) |
|---|
| | | this.$EventBus.$emit('layerPolylineAdd', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | positions: positionNewArr, |
|---|
| | | material: global.DC.Color.ORANGE.withAlpha(0.6), |
|---|
| | | width: 4, |
|---|
| | | params: { |
|---|
| | | id: item.id, |
|---|
| | | policemanId: item.policemanId |
|---|
| | | }, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | } else if (item.type == 2) { |
|---|
| | | let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type) |
|---|
| | | this.$EventBus.$emit('layerPolygonAdd', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | positions: positionNewArr, |
|---|
| | | material: global.DC.Color.ORANGE.withAlpha(0.6), |
|---|
| | | params: { |
|---|
| | | id: item.id, |
|---|
| | | policemanId: item.policemanId |
|---|
| | | }, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } else if (item.type == 3) { |
|---|
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: positionObj, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取活动警车分布信息 |
|---|
| | | getSecurityCarList (securityId) { |
|---|
| | | this.removeAll() |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'newCarDrawLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | getSecurityCarList(securityId).then(res => { |
|---|
| | | res.data.data.forEach(item => { |
|---|
| | | if (item.type == 1) { |
|---|
| | | let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type) |
|---|
| | | this.$EventBus.$emit('layerPolylineAdd', { |
|---|
| | | layerName: 'newCarDrawLayers', |
|---|
| | | positions: positionNewArr, |
|---|
| | | material: global.DC.Color.BLUE.withAlpha(0.4), |
|---|
| | | width: 8, |
|---|
| | | params: { |
|---|
| | | id: item.id, |
|---|
| | | carId: item.carId |
|---|
| | | }, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | } else if (item.type == 2) { |
|---|
| | | let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type) |
|---|
| | | this.$EventBus.$emit('layerPolygonAdd', { |
|---|
| | | layerName: 'newCarDrawLayers', |
|---|
| | | positions: positionNewArr, |
|---|
| | | material: global.DC.Color.BLUE.withAlpha(0.4), |
|---|
| | | params: { |
|---|
| | | id: item.id, |
|---|
| | | carId: item.carId |
|---|
| | | }, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } else if (item.type == 3) { |
|---|
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId) |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'newCarDrawLayers', |
|---|
| | | type: 'billboard', |
|---|
| | | params: positionObj, |
|---|
| | | incident: this.overlayTypeClick |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取活动列表 |
|---|
| | | getSecurityList (current, size, type, name, startTime, endTime) { |
|---|
| | | this.loading() |
|---|
| | | |
|---|
| | | getSecurityList(current, size, type, name, startTime, endTime).then(res => { |
|---|
| | | 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() |
|---|
| | | |
|---|
| | | loading.close() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取警员列表，生成下拉数据 |
|---|
| | | getPoliceList () { |
|---|
| | | getPoliceList().then(res => { |
|---|
| | | res.data.data.forEach(item => { |
|---|
| | | this.policemanOption.push({ value: `${item.id}`, label: `${item.name}` }) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 获取警车列表，生成下拉数据 |
|---|
| | | getCarList () { |
|---|
| | | getCarList().then(res => { |
|---|
| | | res.data.data.forEach(item => { |
|---|
| | | this.policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}` }) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 修改活动警员 |
|---|
| | | updateActivityPolice (id, policemanId) { |
|---|
| | | updateActivityPolice(id, policemanId).then(res => { |
|---|
| | | this.getSecurityPoliceList(this.showingSecurityId) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 修改活动警车 |
|---|
| | | updateActivityCar (id, carId) { |
|---|
| | | updateActivityCar(id, carId).then(res => { |
|---|
| | | this.getSecurityCarList(this.showingSecurityId) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 活动添加警车和范围 |
|---|
| | | addCarAndRange (carId, position, securityId, type) { |
|---|
| | | addCarAndRange(carId, position, securityId, type).then(res => { |
|---|
| | | this.getSecurityCarList(securityId) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 添加活动图标 |
|---|
| | | addActivityPoint () { |
|---|
| | | this.activityList.forEach(item => { |
|---|
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'activity') |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'activityLayers', |
|---|
| | | type: "billboard", |
|---|
| | | params: positionObj, |
|---|
| | | incident: this.houseSiteClick |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 活动添加警员 |
|---|
| | | addActivityPolice (policemanId, position, securityId, type) { |
|---|
| | | addActivityPolice(policemanId, position, securityId, type).then(res => { |
|---|
| | | this.getSecurityPoliceList(securityId) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 转换 点 坐标数据 |
|---|
| | | convertBillboardPositionDate (data, iconName, plotId, policeId) { |
|---|
| | | let positionStr = data |
|---|
| | | positionStr = data.slice(6, positionStr.length - 1) |
|---|
| | | let positionArr = positionStr.split(" ") |
|---|
| | | let positionObj = {} |
|---|
| | | if (iconName == 'activity') { |
|---|
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/activity.png' } |
|---|
| | | } else if (iconName == 'policeman') { |
|---|
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/police.png', id: plotId, policemanId: policeId } |
|---|
| | | } else if (iconName == 'policecar') { |
|---|
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/car.png', id: plotId, carId: policeId } |
|---|
| | | } |
|---|
| | | return positionObj |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 转换 线面 坐标数据 |
|---|
| | | convertPolylineOrPolygonPositionDate (data, type) { |
|---|
| | | let positionStr = data.slice(11, data.length - 1) |
|---|
| | | let positionArr = positionStr.split(',') |
|---|
| | | let positionNewArr = '' |
|---|
| | | positionArr.forEach(item => { |
|---|
| | | if (type == 1) { |
|---|
| | | positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';' |
|---|
| | | } else { |
|---|
| | | positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return positionNewArr |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 树形控件选中事件 |
|---|
| | | treeCheckClick (e1, e2) { |
|---|
| | | const that = this |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'activeHeatLayer', |
|---|
| | | type: 'HeatLayer' |
|---|
| | | }) |
|---|
| | | if (e1.label == '热力图' && e2.checkedKeys.some(item => { |
|---|
| | | return item == 777 |
|---|
| | | })) { |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'activeHeatLayer', |
|---|
| | | type: "HeatPoint", |
|---|
| | | layerType: 'HeatLayer', |
|---|
| | | params: { |
|---|
| | | positions: that.generatePosition(2000) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'activeLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | e2.checkedNodes.forEach(item => { |
|---|
| | | if (item.lng) { |
|---|
| | | item.url = '/img/icon/position.png' |
|---|
| | | this.$EventBus.$emit('layerPointAdd', { |
|---|
| | | layerName: 'activeLayer', |
|---|
| | | type: "billboard", |
|---|
| | | params: item |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 点击活动列表活动 |
|---|
| | | activityListClick (item, index) { |
|---|
| | | this.removeAll() |
|---|
| | | this.showingSecurityId = item.id |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.getSecurityPoliceList(item.id) |
|---|
| | | this.getSecurityCarList(item.id) |
|---|
| | | if (this.currentClickIndex !== '' && this.currentClickIndex == index) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.analyseInput = 100 |
|---|
| | | |
|---|
| | | this.activityDetails = item |
|---|
| | | |
|---|
| | | this.polylineSwitch = false |
|---|
| | | |
|---|
| | | if (analyseLayer != null) { |
|---|
| | | analyseLayer.clear() |
|---|
| | | } |
|---|
| | | |
|---|
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'activity') |
|---|
| | | |
|---|
| | | let point = new global.DC.Point(`${positionObj.lng}, ${positionObj.lat}`) |
|---|
| | | analyseLayer.addOverlay(point) |
|---|
| | | |
|---|
| | | let coords = global.DC.GeoTools.pointBuffer(`${positionObj.lng}, ${positionObj.lat}`, 100) |
|---|
| | | analysePolygon = new global.DC.Polygon(coords) |
|---|
| | | |
|---|
| | | analysePolygon.setStyle({ |
|---|
| | | material: global.DC.Color.RED.withAlpha(0.4) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | analyseLayer.addOverlay(analysePolygon) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.dialogVisible = true |
|---|
| | | |
|---|
| | | this.currentClickIndex = index |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('toPosition', { |
|---|
| | | siteJd: positionObj.lng, |
|---|
| | | siteWd: positionObj.lat, |
|---|
| | | siteGd: 1500 |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 切换轨迹路线显示 |
|---|
| | | switchChange (e) { |
|---|
| | | if (e == true) { |
|---|
| | | this.$EventBus.$emit('layerPolylineAdd', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | positions: '116.023042, 28.684732; 116.023402, 28.679067; 116.023475, 28.678843; 116.023697, 28.678647; 116.024121, 28.678391; 116.026906, 28.678461; 116.027065, 28.676867; 116.033252, 28.676165', |
|---|
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 255, 0, 0, |
|---|
| | | 255 |
|---|
| | | ), |
|---|
| | | distanceDisplayCondition: { |
|---|
| | | near: 0, //最近距离 |
|---|
| | | far: Number.MAX_VALUE //最远距离 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 切换轨迹播放控件 |
|---|
| | | switchBtnChange (e) { |
|---|
| | | this.isTrackBtnShow = e |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 输入绘制线范围 |
|---|
| | | analyseChange (e) { |
|---|
| | | analyseLayer.removeOverlay(analysePolygon) |
|---|
| | | let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e) |
|---|
| | | analysePolygon = new global.DC.Polygon(coords) |
|---|
| | | analysePolygon.setStyle({ |
|---|
| | | material: global.DC.Color.RED.withAlpha(0.4) |
|---|
| | | }) |
|---|
| | | analyseLayer.addOverlay(analysePolygon) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 分页页码变化事件 |
|---|
| | | handleCurrentChange: function (currentPage) { |
|---|
| | | this.currentPage = currentPage |
|---|
| | | this.getSecurityList(this.currentPage, this.pagesize) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 关闭活动详情弹窗 |
|---|
| | | closeActivityDetails () { |
|---|
| | | this.dialogVisible = false |
|---|
| | | this.currentClickIndex = '' |
|---|
| | | this.polylineSwitch = false |
|---|
| | | analyseLayer.clear() |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 地图元素绘制 |
|---|
| | | draw (poltType, policeType) { |
|---|
| | | let flag = false |
|---|
| | | const that = this |
|---|
| | | this.policeType = '' |
|---|
| | | plot && plot.draw(poltType, overlay => { |
|---|
| | | |
|---|
| | | if (poltType == 'billboard' && policeType == 'policeman') { |
|---|
| | | overlay.icon = '/img/policeIcon.png' |
|---|
| | | } else if (poltType == 'billboard' && policeType == 'policecar') { |
|---|
| | | overlay.icon = '/img/policeCar.jfif' |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (overlay) { |
|---|
| | | |
|---|
| | | drawLayers.addOverlay(overlay) |
|---|
| | | plot.edit(overlay, (e) => { |
|---|
| | | flag = true |
|---|
| | | overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick) |
|---|
| | | overlay.drawType = poltType |
|---|
| | | overlay.policeType = policeType |
|---|
| | | this.overlayObj = overlay |
|---|
| | | document.oncontextmenu = function () { |
|---|
| | | if (flag == true && poltType == 'billboard') { |
|---|
| | | if (policeType == 'policeman') { |
|---|
| | | that.policeChooseTitle = '选择警员' |
|---|
| | | that.policeOption = that.policemanOption |
|---|
| | | } else if (policeType == 'policecar') { |
|---|
| | | that.policeChooseTitle = '选择警车' |
|---|
| | | that.policeOption = that.policecarOption |
|---|
| | | } |
|---|
| | | that.policeChooseVisible = true |
|---|
| | | flag = false |
|---|
| | | } else if (flag == true && poltType == 'polygon') { |
|---|
| | | if (policeType == 'policecar') { |
|---|
| | | that.policeChooseTitle = '选择警车' |
|---|
| | | that.policeOption = that.policecarOption |
|---|
| | | that.policeChooseVisible = true |
|---|
| | | flag = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 删除所有地图绘制元素 |
|---|
| | | removeAll () { |
|---|
| | | drawLayers.clear() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | drawArrow (type) { |
|---|
| | | arrowPlot && arrowPlot.draw(type, overlay => { |
|---|
| | | if (overlay) { |
|---|
| | | drawArrowLayers.addOverlay(overlay) |
|---|
| | | plot.edit(overlay) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | removeAllArrow () { |
|---|
| | | drawArrowLayers.clear() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | arrangeDraw () { |
|---|
| | | this.arrangeVisible = true |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 播放轨迹 |
|---|
| | | play () { |
|---|
| | | tc.play() |
|---|
| | | this.view('1', -20, 100) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 暂停播放轨迹 |
|---|
| | | pause () { |
|---|
| | | tc.pause() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 恢复播放轨迹 |
|---|
| | | restore () { |
|---|
| | | tc.restore() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 轨迹视角切换 |
|---|
| | | view (mode, pitch, range) { |
|---|
| | | tc.viewTrack(track, { |
|---|
| | | mode: mode, |
|---|
| | | pitch: pitch, |
|---|
| | | range: range |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 大小重置 |
|---|
| | | boxResize (val) { |
|---|
| | | this.boxShow = val |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 选择警员取消按钮 |
|---|
| | | cancel () { |
|---|
| | | this.policeIconIsCreated = false |
|---|
| | | this.policeChooseVisible = false |
|---|
| | | this.overlayObj2 = {} |
|---|
| | | this.removeAll() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 选择警员关闭 |
|---|
| | | policeChooseBeforeClose () { |
|---|
| | | this.policeChooseVisible = false |
|---|
| | | this.policeIconIsCreated = false |
|---|
| | | this.removeAll() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 选择警员确认按钮 |
|---|
| | | determine () { |
|---|
| | | if (!this.policeIconIsCreated) { |
|---|
| | | let type = '' |
|---|
| | | let position = '' |
|---|
| | | if (this.overlayObj.drawType == 'billboard') { |
|---|
| | | type = 3 |
|---|
| | | position = this.overlayObj._position._lng + ' ' + this.overlayObj._position._lat |
|---|
| | | } else if (this.overlayObj.drawType == 'polyline') { |
|---|
| | | type = 1 |
|---|
| | | this.overlayObj._positions.forEach(item => { |
|---|
| | | position += item._lng + ' ' + item._lat + ',' |
|---|
| | | }) |
|---|
| | | position = position.slice(0, position.length - 1) |
|---|
| | | } else if (this.overlayObj.drawType == 'polygon') { |
|---|
| | | type = 2 |
|---|
| | | this.overlayObj._positions.forEach(item => { |
|---|
| | | position += item._lng + ' ' + item._lat + ',' |
|---|
| | | }) |
|---|
| | | position += this.overlayObj._positions[0]._lng + ' ' + this.overlayObj._positions[0]._lat + ',' |
|---|
| | | position = position.slice(0, position.length - 1) |
|---|
| | | } |
|---|
| | | if (this.overlayObj.policeType == 'policeman') { |
|---|
| | | this.addActivityPolice(this.policeType, position, this.showingSecurityId, type) |
|---|
| | | } else if (this.overlayObj.policeType == 'policecar') { |
|---|
| | | this.addCarAndRange(this.policeType, position, this.showingSecurityId, type) |
|---|
| | | } |
|---|
| | | this.policeChooseVisible = false |
|---|
| | | this.policeIconIsCreated = false |
|---|
| | | } else { |
|---|
| | | if (this.policeChooseTitle == '选择警员') { |
|---|
| | | this.updateActivityPolice(this.policeIconId, this.policeType) |
|---|
| | | } else if (this.policeChooseTitle == '选择警车') { |
|---|
| | | this.updateActivityCar(this.policeIconId, this.policeType) |
|---|
| | | } |
|---|
| | | this.policeChooseVisible = false |
|---|
| | | this.policeIconIsCreated = false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 地图绘制元素点击事件 |
|---|
| | | overlayTypeClick (e) { |
|---|
| | | this.policeIconIsCreated = true |
|---|
| | | if ('policemanId' in e.overlay.attrParams) { |
|---|
| | | this.policeChooseTitle = '选择警员' |
|---|
| | | this.policeOption = this.policemanOption |
|---|
| | | this.policeIconId = e.overlay.attrParams.id |
|---|
| | | this.policeType = e.overlay.attrParams.policemanId |
|---|
| | | } else if ('carId' in e.overlay.attrParams) { |
|---|
| | | this.policeChooseTitle = '选择警车' |
|---|
| | | this.policeOption = this.policecarOption |
|---|
| | | this.policeIconId = e.overlay.attrParams.id |
|---|
| | | this.policeType = e.overlay.attrParams.carId |
|---|
| | | } |
|---|
| | | this.policeChooseVisible = true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | destroyed () { |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'activeLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'activityLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'polylineLayer', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapRemoveLayer', { |
|---|
| | | layerName: 'activeHeatLayer', |
|---|
| | | type: 'HeatLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'newDrawLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | this.$EventBus.$emit('mapClearLayer', { |
|---|
| | | layerName: 'newCarDrawLayers', |
|---|
| | | type: 'VectorLayer' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | analyseLayer.clear() |
|---|
| | | |
|---|
| | | this.removeAll() |
|---|
| | | tc.clear() |
|---|
| | | |
|---|
| | | this.$parent.$parent.resize('0px') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .container { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &-content { |
|---|
| | | position: relative; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | color: #fff; |
|---|
| | | background: $bg-color; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | font-weight: 700; |
|---|
| | | font-size: 24px; |
|---|
| | | letter-spacing: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-box { |
|---|
| | | padding: 0 10px; |
|---|
| | | |
|---|
| | | & > div:first-child { |
|---|
| | | margin-top: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | margin-top: 10px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .category { |
|---|
| | | width: 88px; |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category-value { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input { |
|---|
| | | width: 209px; |
|---|
| | | height: 32px; |
|---|
| | | font-size: 12px; |
|---|
| | | text-indent: 1em; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: transparent; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | border-radius: 5px 0 0 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input::-webkit-input-placeholder { |
|---|
| | | color: rgba(238, 238, 238, 0.7); |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 700; |
|---|
| | | width: 60px; |
|---|
| | | height: 32px; |
|---|
| | | background-color: $table-body-tr-2n-color; |
|---|
| | | color: #fff; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | cursor: pointer; |
|---|
| | | border-radius: 0 5px 5px 0; |
|---|
| | | vertical-align: top; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:active { |
|---|
| | | background-color: $table-body-tr-2n-color; |
|---|
| | | border: 1px solid rgb(0, 92, 169); |
|---|
| | | color: rgb(189, 185, 185) !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .result-content { |
|---|
| | | flex: 1; |
|---|
| | | margin-top: 8px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | .table-box { |
|---|
| | | flex: 1; |
|---|
| | | overflow-x: hidden; |
|---|
| | | overflow-y: auto; |
|---|
| | | |
|---|
| | | .row-box { |
|---|
| | | margin: 10px; |
|---|
| | | padding: 10px; |
|---|
| | | background: $table-body-tr-2n-color; |
|---|
| | | cursor: pointer; |
|---|
| | | font-size: 14px; |
|---|
| | | |
|---|
| | | .row-content { |
|---|
| | | & > div { |
|---|
| | | display: flex; |
|---|
| | | line-height: 28px; |
|---|
| | | |
|---|
| | | .category { |
|---|
| | | width: 88px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category-value { |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-start; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .row-box:hover { |
|---|
| | | // background-color: $table-header-bg-color; |
|---|
| | | background-color: rgba(17, 38, 163, 0.5); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .row-box.on { |
|---|
| | | // background: $table-header-bg-color; |
|---|
| | | background-color: rgba(17, 38, 163, 0.5); |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-dialog) { |
|---|
| | | margin-right: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tableClass { |
|---|
| | | margin: 0 auto; |
|---|
| | | width: 400px; |
|---|
| | | // height: 400px; |
|---|
| | | border-collapse: collapse; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tableClass td { |
|---|
| | | width: 300px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pages { |
|---|
| | | height: 40px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .draw-btn-box { |
|---|
| | | position: fixed; |
|---|
| | | left: 50%; |
|---|
| | | bottom: 40px; |
|---|
| | | color: #fff; |
|---|
| | | background: $bg-one-color; |
|---|
| | | white-space: nowrap; |
|---|
| | | transform: translate(-50%, 0); |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ul { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | li { |
|---|
| | | button { |
|---|
| | | height: 30px; |
|---|
| | | margin: 0 5px; |
|---|
| | | background-color: $bg-color; |
|---|
| | | border: 1px solid #cecece; |
|---|
| | | border-radius: 4px; |
|---|
| | | color: #fff; |
|---|
| | | cursor: pointer; |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .second-container { |
|---|
| | | position: absolute; |
|---|
| | | top: 0px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 240px; |
|---|
| | | background: $bg-color; |
|---|
| | | |
|---|
| | | :deep(.el-tree) { |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-tree-node__content) { |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-tree-node) { |
|---|
| | | background: transparent; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .second-container.spread { |
|---|
| | | left: 444px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .second-container.take-back { |
|---|
| | | left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .activity-details-box { |
|---|
| | | position: fixed; |
|---|
| | | top: 90px; |
|---|
| | | right: 10px; |
|---|
| | | width: 400px; |
|---|
| | | padding: 10px; |
|---|
| | | |
|---|
| | | border-radius: 10px; |
|---|
| | | color: #fff; |
|---|
| | | background: $bg-color; |
|---|
| | | overflow-x: hidden; |
|---|
| | | overflow-y: auto; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | position: relative; |
|---|
| | | height: 36px; |
|---|
| | | line-height: 36px; |
|---|
| | | |
|---|
| | | .close { |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | right: 0; |
|---|
| | | transform: translate(0, -50%); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .close::before { |
|---|
| | | content: '\e6db'; |
|---|
| | | font-family: element-icons; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .row-box { |
|---|
| | | width: 100%; |
|---|
| | | line-height: 28px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category { |
|---|
| | | width: 96px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category-value { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .plan-control { |
|---|
| | | position: fixed; |
|---|
| | | top: 90px; |
|---|
| | | right: 450px; |
|---|
| | | width: 180px; |
|---|
| | | padding: 10px; |
|---|
| | | color: #fff; |
|---|
| | | background-color: $bg-color; |
|---|
| | | .row-box { |
|---|
| | | width: 100%; |
|---|
| | | line-height: 28px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category { |
|---|
| | | width: 96px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .category-value { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .btn-box { |
|---|
| | | position: fixed; |
|---|
| | | top: 78px; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, 0); |
|---|
| | | min-height: 40px; |
|---|
| | | padding: 10px 10px 0 10px; |
|---|
| | | border-radius: 10px; |
|---|
| | | color: #fff; |
|---|
| | | user-select: none; |
|---|
| | | |
|---|
| | | ul { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | li { |
|---|
| | | button { |
|---|
| | | height: 30px; |
|---|
| | | margin: 0 5px; |
|---|
| | | background-color: $bg-color; |
|---|
| | | border: 1px solid #cecece; |
|---|
| | | border-radius: 4px; |
|---|
| | | color: #fff; |
|---|
| | | cursor: pointer; |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
