<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-01-03 15:52:12
|
* @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-people-btn.png"
|
style="height:100%"
|
/>
|
</button>
|
</li>
|
<li>
|
<button @click="draw('billboard', 'policecar')">
|
<img src="../../../public/img/icon/car-btn.png" style="height:100%" />
|
</button>
|
</li>
|
<!-- <li>
|
<button @click="draw('polyline', '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>-->
|
<button @click="draw('polyline', 'policecar')">巡逻路线</button>
|
</li>
|
</ul>
|
</div>
|
<div class="close" @click="arrangeVisible = false"></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.number }}</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.company }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">负责人：</div>
|
<div class="category-value">{{ activityDetails.person }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">联系方式：</div>
|
<div class="category-value">{{ activityDetails.contact }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">活动地点：</div>
|
<div class="category-value">{{ activityDetails.place }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">所属辖区：</div>
|
<div class="category-value">{{ activityDetails.content }}</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">活动内容：</div>
|
<div class="category-value">{{ activityDetails.content }}</div>
|
</div>
|
<!-- <div class="row-box">
|
<div class="category">活动类型：</div>
|
<div class="category-value">{{ activityDetails.type }}</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-btn-box">
|
<el-button @click="arrangeDraw">预案布置</el-button>
|
</div>
|
</div>
|
|
<div class="plan-control" v-show="dialogVisible">
|
<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>
|
|
<div class="search-content">
|
<input
|
v-model="searchExtensivelyValue"
|
@input="searchExtensivelyChange"
|
@focus="searchExtensivelyFocus"
|
type="text"
|
placeholder="请输入搜索条件"
|
/>
|
<div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
|
<img src="../../../public/img/icon/clear.png" alt />
|
</div>
|
<button @click="searchExtensivelyClick" class="el-icon-search"></button>
|
</div>
|
<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
|
<div>
|
<div
|
@click="searchExtensivelyVlaClick(item)"
|
v-for="(item, index) in searchExtensivelyArray"
|
:key="index"
|
>{{ item.name }}</div>
|
</div>
|
</div>
|
|
<el-dialog
|
:title="policeChooseTitle"
|
:modal="false"
|
: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, addSecurityPlot, getSecurityPlotList, updateSecurityPlot } from '@/api/activity/index.js'
|
import { getSearchExtensively } from '@/api/dept/index.js'
|
|
let analyseLayer = null
|
let analysePolygon = null
|
let drawLayers = null
|
let drawArrowLayers = null
|
let arrowsListLayer = 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: {},
|
searchExtensivelyValue: '',
|
searchExtensivelyValBoxShow: false,
|
searchExtensivelyArray: [],
|
}
|
},
|
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)
|
}
|
|
if (arrowsListLayer == null) {
|
arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
|
global.viewer.addLayer(arrowsListLayer)
|
}
|
|
// 轨迹
|
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-people.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.removeAllArrow()
|
arrowsListLayer.clear()
|
this.showingSecurityId = item.id
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'newDrawLayers',
|
type: 'VectorLayer'
|
})
|
this.getSecurityPoliceList(item.id)
|
this.getSecurityCarList(item.id)
|
this.getSecurityPlotList(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.arrangeVisible = 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/icon/police-people.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 == 'polyline') {
|
let position = ''
|
overlay._positions.forEach(item => {
|
position += item._lng + ' ' + item._lat + ','
|
})
|
position = position.slice(0, position.length - 1)
|
that.addCarAndRange('', position, that.showingSecurityId, 1)
|
}
|
}
|
})
|
}
|
})
|
},
|
|
// 删除所有地图绘制元素
|
removeAll () {
|
drawLayers.clear()
|
},
|
|
drawArrow (type) {
|
arrowPlot && arrowPlot.draw(type, overlay => {
|
if (overlay) {
|
let plotType = ''
|
if (type == 'attack_arrow') {
|
plotType = 1
|
} else if (type == 'double_arrow') {
|
plotType = 2
|
} else if (type == 'fine_arrow') {
|
plotType = 3
|
} else if (type == 'tailed_attack_arrow') {
|
plotType = 4
|
}
|
plot.edit(overlay, (e) => {
|
console.log(overlay, 222)
|
let position = ''
|
overlay._positions.forEach(item => {
|
position += item._lng + ' ' + item._lat + ','
|
})
|
position = position.slice(0, position.length - 1)
|
drawArrowLayers.addOverlay(overlay)
|
this.addSecurityPlot(this.showingSecurityId, position, plotType)
|
})
|
}
|
})
|
},
|
|
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
|
},
|
|
// 保存活动标绘箭头
|
addSecurityPlot (securityId, position, type) {
|
addSecurityPlot(securityId, position, type).then(res => {
|
this.getSecurityPlotList(securityId)
|
})
|
},
|
|
// 获取活动标绘箭头列表
|
getSecurityPlotList (securityId) {
|
arrowsListLayer.clear()
|
this.removeAllArrow()
|
getSecurityPlotList(securityId).then(res => {
|
res.data.data.forEach(item => {
|
let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
|
let chooseArrow = null
|
if (item.type == 1) {
|
chooseArrow = new global.DC.AttackArrow(position)
|
} else if (item.type == 2) {
|
chooseArrow = new global.DC.DoubleArrow(position)
|
} else if (item.type == 3) {
|
chooseArrow = new global.DC.FineArrow(position)
|
} else if (item.type == 4) {
|
chooseArrow = new global.DC.TailedAttackArrow(position)
|
}
|
chooseArrow.attrParams = { 'id': item.id }
|
arrowsListLayer.addOverlay(chooseArrow)
|
chooseArrow.setStyle({
|
"material": global.DC.Color.ORANGE.withAlpha(0.4),
|
})
|
chooseArrow.on(global.DC.MouseEventType.DB_CLICK, this.reeditArrowDbClick)
|
})
|
})
|
},
|
|
// 双击修改箭头
|
reeditArrowDbClick (e) {
|
console.log(111, e)
|
let overlayData = e.overlay
|
plot.edit(overlayData, (e) => {
|
let position = ''
|
overlayData._positions.forEach(item => {
|
position += item._lng + ' ' + item._lat + ','
|
})
|
position = position.slice(0, position.length - 1)
|
drawArrowLayers.addOverlay(overlayData)
|
this.updateSecurityPlot(overlayData.attrParams.id, position)
|
})
|
},
|
|
updateSecurityPlot (id, position) {
|
updateSecurityPlot(id, position).then(res => {
|
console.log(res, 222)
|
this.getSecurityPlotList(this.securityId)
|
})
|
},
|
|
// 大搜
|
getSearchExtensively (ak, region, query) {
|
getSearchExtensively(ak, region, query).then(res => {
|
this.searchExtensivelyArray = res.data.result
|
})
|
},
|
|
searchExtensivelyClick () {
|
this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
|
this.searchExtensivelyValBoxShow = false
|
if (this.searchExtensivelyArray.length > 0) {
|
this.$EventBus.$emit('toPosition', {
|
siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
|
siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
|
siteGd: 200,
|
})
|
this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'searchLayer',
|
type: 'VectorLayer'
|
})
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'searchLayer',
|
type: 'label',
|
params: {
|
lng: `${this.searchExtensivelyArray[0].location.lng}`,
|
lat: `${this.searchExtensivelyArray[0].location.lat}`,
|
alt: 0,
|
text: this.searchExtensivelyArray[0].name
|
},
|
})
|
}
|
},
|
|
searchExtensivelyChange () {
|
if (this.searchExtensivelyValue == '') {
|
this.searchExtensivelyValBoxShow = false
|
this.isShowClearBtn = false
|
this.searchExtensivelyArray = []
|
} else {
|
this.searchExtensivelyValBoxShow = true
|
this.isShowClearBtn = true
|
this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
|
}
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'searchLayer',
|
type: 'VectorLayer'
|
})
|
},
|
|
searchExtensivelyVlaClick (item) {
|
this.searchExtensivelyValBoxShow = false
|
this.searchExtensivelyValue = item.name
|
this.$EventBus.$emit('toPosition', {
|
siteJd: `${item.location.lng}`,
|
siteWd: `${item.location.lat}`,
|
siteGd: 200,
|
})
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'searchLayer',
|
type: 'VectorLayer'
|
})
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'searchLayer',
|
type: 'label',
|
params: {
|
lng: `${item.location.lng}`,
|
lat: `${item.location.lat}`,
|
alt: 0,
|
text: item.name
|
}
|
})
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'searchLayer',
|
type: "billboard",
|
params: {
|
lng: `${item.location.lng}`,
|
lat: `${item.location.lat}`,
|
alt: 0,
|
url: '/img/icon/location.png'
|
},
|
})
|
},
|
|
searchExtensivelyFocus () {
|
this.searchExtensivelyValBoxShow = true
|
this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
|
},
|
|
clearSearchValue () {
|
this.searchExtensivelyValue = ''
|
this.searchExtensivelyChange()
|
},
|
},
|
|
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'
|
})
|
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'searchLayer',
|
type: 'label'
|
})
|
|
analyseLayer.clear()
|
arrowsListLayer.clear()
|
|
this.removeAll()
|
this.removeAllArrow()
|
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: rgba(24, 79, 202, 0.6);
|
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;
|
cursor: pointer;
|
font-size: 14px;
|
border-radius: 8px;
|
|
.row-content {
|
& > div {
|
display: flex;
|
line-height: 28px;
|
|
.category {
|
width: 88px;
|
}
|
|
.category-value {
|
flex: 1;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
}
|
}
|
|
&:nth-child(2n) {
|
background: $table-body-tr-2n-color;
|
}
|
|
&:nth-child(2n-1) {
|
background: $table-body-tr-n-color;
|
}
|
}
|
|
.row-box:hover {
|
background-color: rgba(29, 92, 228, 0.7) !important;
|
}
|
|
.row-box.on {
|
background-color: rgba(29, 92, 228, 0.7) !important;
|
}
|
|
: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;
|
}
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 2%;
|
right: 2%;
|
height: 10px;
|
transform: translate(0, -50%);
|
cursor: pointer;
|
}
|
|
.close::before {
|
content: '\e6db';
|
font-family: element-icons;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.row-btn-box {
|
// height: 30px;
|
:deep(.el-button) {
|
// padding: 7px 20px;
|
font-size: 14px;
|
color: #fff;
|
background-color: rgba(8, 56, 185, 0.9);
|
border: 1px solid rgba(8, 56, 185, 0.9);
|
border-radius: 14px;
|
}
|
|
:deep(.el-button:hover) {
|
background-color: #409eff;
|
}
|
}
|
}
|
|
.plan-control {
|
position: fixed;
|
top: 130px;
|
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;
|
}
|
}
|
}
|
}
|
|
.search-content {
|
position: absolute;
|
left: 760px;
|
top: 40px;
|
width: 460px;
|
height: 36px;
|
|
input {
|
flex: 1;
|
width: 400px;
|
height: 100%;
|
font-size: 18px;
|
text-indent: 1em;
|
color: #ffffff;
|
background-color: rgba(24, 79, 202, 0.75);
|
border: 1px solid rgb(0, 92, 169);
|
border-radius: 20px 0 0 20px;
|
vertical-align: top;
|
}
|
|
input:focus {
|
outline: none;
|
}
|
|
input::-webkit-input-placeholder {
|
color: rgba(238, 238, 238, 0.7);
|
}
|
|
.clear {
|
position: absolute;
|
top: 0;
|
right: 70px;
|
cursor: pointer;
|
img {
|
width: 16px;
|
height: 16px;
|
margin-top: 10px;
|
}
|
}
|
|
button {
|
font-size: 24px;
|
font-weight: 700;
|
width: 60px;
|
height: 100%;
|
background-color: $table-body-tr-n-color;
|
color: #fff;
|
border: 1px solid rgb(0, 92, 169);
|
cursor: pointer;
|
border-radius: 0 20px 20px 0;
|
}
|
|
button:active {
|
background-color: $table-body-tr-2n-color;
|
border: 1px solid rgb(0, 92, 169);
|
}
|
}
|
|
.searchExtensively-val-box {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 80px;
|
left: 760px;
|
width: 380px;
|
max-height: 160px;
|
text-align: left;
|
color: #fff;
|
background: $el-dialog-bg-color;
|
z-index: 1111;
|
border-radius: 10px;
|
overflow: hidden;
|
|
& > div {
|
height: 100%;
|
overflow-y: auto;
|
|
div {
|
padding: 0 10px;
|
line-height: 36px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
