wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

基础设施联调

This commit is contained in:
wuhongjian 2022-06-28 22:24:05 +08:00
parent c53e96d0c3
commit 4c77a55ae7
6 changed files with 241 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
back/package.json
View File

@ -22,6 +22,7 @@
"carddragger": "^0.3.6", "carddragger": "^0.3.6",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"crypto-js": "^4.1.1",
"echarts": "^4.7.0", "echarts": "^4.7.0",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",

7
front/public/index.html
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25 * @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-24 19:49:15 * @LastEditTime: 2022-06-28 16:52:46
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -47,7 +47,8 @@
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797'; window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796'; window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/'; window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin'; window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 穿透版本 // 穿透版本
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797'; // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/'; // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';

40
front/src/supermap/advance-init.js
View File

@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
// }) // })
// } // }
_removeLayerByLayerName(layerName)
let layers = null let layers = null
// 判断是否是聚合图层 // 判断是否是聚合图层
layers = createMarkerClusterLayer() layers = createMarkerClusterLayer()
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
features.map((feature) => { features.map((feature) => {
var bounds = map.getBounds() var bounds = map.getBounds()
// console.log("看看有没有坐标",feature.latLng); // console.log("看看有没有坐标",feature.latLng);
if ( if ( feature.hasOwnProperty('latLng')) {
layerName == '全部'
? feature.hasOwnProperty('latLng') &&
bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
: feature.hasOwnProperty('latLng')
) {
const marker = L.marker(feature.latLng, { icon }) const marker = L.marker(feature.latLng, { icon })
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.uuid = feature.uuid || '' marker.uuid = feature.uuid || ''
@ -1735,38 +1731,6 @@ export function MapFun(mapObj) {
}) })
featureGroup.addLayer(layers) featureGroup.addLayer(layers)
layerGroup.set(layerName, layers) layerGroup.set(layerName, layers)
// map.on('zoom', () => {
// _removeLayerByLayerName(layerName)
// let layers = null
// // 判断是否是聚合图层
// layers = createMarkerClusterLayer()
// features.map(feature => {
// var bounds = map.getBounds()
// // console.log("看看有没有坐标",feature.latLng);
// if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) {
// const marker = L.marker(feature.latLng, { icon })
// if (createPopupFun !== null) {
// marker.uuid = feature.uuid || ''
// marker.resId = feature.resId || ''
// marker.on('click', async e => {
// if (feature.resourceName === 'video') {
// const params = [feature.indexCode]
// DS.openVideo(params)
// } else {
// const elementHtml = createPopupFun(feature)
// if (elementHtml) {
// console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map)
// L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
// }
// }
// })
// }
// layers.addLayer(marker)
// }
// })
// featureGroup.addLayer(layers)
// layerGroup.set(layerName, layers)
// })
} }
/** /**
* 点击展示弹窗 * 点击展示弹窗

2
front/src/views/home/detailsPageInfrastructureTree.vue
View File

@ -243,6 +243,8 @@
const selectId = ref('') const selectId = ref('')
const onSelect = (item, val, child) => { const onSelect = (item, val, child) => {
console.log('item, val, child', child) console.log('item, val, child', child)
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getListByParentId', val.id)
getCameraAllOrgan({ parentId: val.id }).then((res) => { getCameraAllOrgan({ parentId: val.id }).then((res) => {
treeData.value.map((treeDataItem, index) => { treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) { if (item.id == treeDataItem.id) {

209
front/src/views/home/infrastructurePage.vue
View File

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<!-- 地图 --> <!-- 地图 -->
<div class="map-contain"> <div class="map-contain" v-if="showMap">
<video-surveillance></video-surveillance> <video-surveillance></video-surveillance>
</div> </div>
<!-- 功能行 --> <!-- 功能行 -->
@ -28,7 +28,7 @@
<div class="contentNum"> <div class="contentNum">
<p> <p>
备选 备选
<span>{{ dataSource.length }}</span> <span>{{ pagination.total }}</span>
个 个
</p> </p>
<i class="boundary"></i> <i class="boundary"></i>
@ -59,7 +59,7 @@
</div> </div>
<i class="boundary"></i> <i class="boundary"></i>
<!-- 添加至购物车 --> <!-- 添加至购物车 -->
<a-button type="primary" @click="addShopCar" class="buttonAdd"> <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
添加至购物车 添加至购物车
</a-button> </a-button>
<!-- 一键申请 --> <!-- 一键申请 -->
@ -75,6 +75,7 @@
:dataSource="dataSource" :dataSource="dataSource"
:columns="columns" :columns="columns"
:scroll="{ y: tableHeight }" :scroll="{ y: tableHeight }"
rowKey="channelId"
:rowClassName=" :rowClassName="
(record, index) => (index % 2 === 1 ? 'table-striped' : null) (record, index) => (index % 2 === 1 ? 'table-striped' : null)
" "
@ -93,9 +94,46 @@
import { getCategoryTreePage } from '@/api/personalCenter' import { getCategoryTreePage } from '@/api/personalCenter'
import { dataType } from 'element-plus/es/components/table-v2/src/common' import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { getCameraByParentId } from '@/api/videoSurveillance'
import { sgcInsert } from '@/api/home'
import { message } from 'ant-design-vue'
import mybus from '@/myplugins/mybus'
const pagination = ref({
total: 0,
current: 1,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
})
const mapSearchParam = ref({
// 地图搜索初始化数据
parentId: '',
checkStatus: '1',
pageNum: pagination.value.current,
pageSize: pagination.value.pageSize,
gpsX: '',
gpsY: '',
radius: '',
})
const showMap = ref(true)
onMounted(() => { onMounted(() => {
tabClick(0, '视频资源') tabClick(0, '视频资源')
getCamera()
mybus.off('getListByParentId')
mybus.on('getListByParentId', (parentId) => {
mapSearchParam.value.parentId = parentId
getCamera()
})
mybus.off('getListByMap')
mybus.on('getListByMap', (param) => {
mapSearchParam.value.gpsX = param.gpsX
mapSearchParam.value.gpsY = param.gpsY
mapSearchParam.value.radius = param.radius
getCamera()
})
}) })
const selectedList = ref([])
const tabList = ref([ const tabList = ref([
{ {
title: '设施类型', title: '设施类型',
@ -124,6 +162,10 @@
} }
clickList.value.push(params) clickList.value.push(params)
}) })
mybus.off('tranferToList')
mybus.on('tranferToList', (data) => {
console.log('获取到的列表数据')
})
} }
let clickList = ref([]) //存储点击的tab let clickList = ref([]) //存储点击的tab
init() init()
@ -134,10 +176,13 @@
if (clickList.value[indexFather].content.indexOf(name) != -1) { if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') { if (name == '视频资源') {
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true
} else if (name == '云资源') { } else if (name == '云资源') {
tableHeight.value = 600 tableHeight.value = 600
showMap.value = false
} else if (name == '感知资源') { } else if (name == '感知资源') {
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true
} }
clickList.value[indexFather].content.splice( clickList.value[indexFather].content.splice(
clickList.value[indexFather].content.indexOf(name), clickList.value[indexFather].content.indexOf(name),
@ -146,6 +191,7 @@
} else { } else {
if (name == '视频资源') { if (name == '视频资源') {
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true
tabList.value[1].content = [] tabList.value[1].content = []
clickList.value[1].content = [] clickList.value[1].content = []
clickList.value[indexFather].content[0] = name clickList.value[indexFather].content[0] = name
@ -161,6 +207,7 @@
}) })
} else if (name == '云资源') { } else if (name == '云资源') {
tableHeight.value = 600 tableHeight.value = 600
showMap.value = false
clickList.value[1].content = [] clickList.value[1].content = []
clickList.value[indexFather].content[0] = name clickList.value[indexFather].content[0] = name
tabList.value[1].content = [ tabList.value[1].content = [
@ -175,6 +222,7 @@
] ]
} else if (name == '感知资源') { } else if (name == '感知资源') {
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true
clickList.value[1].content = [] clickList.value[1].content = []
clickList.value[indexFather].content[0] = name clickList.value[indexFather].content[0] = name
tabList.value[1].content = ['333333', '213124'] tabList.value[1].content = ['333333', '213124']
@ -207,138 +255,53 @@
const addShopCar = () => { const addShopCar = () => {
console.log('添加至购物车') console.log('添加至购物车')
} }
const getCamera = () => {
console.log('初始化调用')
getCameraByParentId(mapSearchParam.value).then((res) => {
console.log('RRRRRRRRRR', res.data.data)
dataSource.value = res.data.data
pagination.value.total = res.data.count
})
}
//加入申购车
const addShoppingCart = () => {
sgcInsert({
delFlag: '0',
resourceId: '8888888880000000001',
note1: selectedList.value,
// userId: userId.value,
}).then((res) => {
console.log(res)
message.success('添加申购车成功！')
mybus.emit('getSgcNum')
})
}
// 表格 // 表格
const dataSource = ref([ const dataSource = ref([])
{
key: '1',
name: '沈腾',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '5',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '6',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '7',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '8',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '9',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '10',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '11',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '12',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '13',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '14',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '15',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '16',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
])
const columns = ref([ const columns = ref([
{ {
title: '姓名', title: '名称',
dataIndex: 'name', dataIndex: 'channelName',
key: 'name', key: 'channelName',
}, },
{ {
title: '年龄', title: '归属',
dataIndex: 'age', dataIndex: 'nodeName',
key: 'age', key: 'nodeName',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
}, },
]) ])
const allClick = ref([]) const allClick = ref([])
const onSelectChange = (selectedRowKeys) => { const onSelectChange = (selectedRowKeys, selectedRows) => {
console.log('hahhahah', selectedRowKeys) console.log('hahhahah', selectedRowKeys, selectedRows)
allClick.value = selectedRowKeys selectedList.value = selectedRows
// allClick.value = selectedRowKeys
} }
const pagination = ref({
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
})
const handleTableChange = (val) => { const handleTableChange = (val) => {
pagination.value.current = val.current pagination.value.current = val.current
pagination.value.pageSize = val.pageSize pagination.value.pageSize = val.pageSize
this.queryParam.page = val.current mapSearchParam.value.pageNum = val.current
this.queryParam.size = val.pageSize mapSearchParam.value.pageSize = val.pageSize
getCamera()
// this.getTableList() // this.getTableList()
} }
</script> </script>

415
front/src/views/home/videoSurveillance/index.vue
View File

@ -8,31 +8,16 @@
</div> </div>
<div class="searchPoint"> <div class="searchPoint">
<a-auto-complete <el-autocomplete
v-model:value="value" v-model="address"
class="certain-category-search" placeholder="请输入地址"
dropdown-class-name="certain-category-search-dropdown" clearable
:dropdown-match-select-width="500" :fetch-suggestions="((queryString,cb) =>{searchAddressByKeyWord(queryString,cb,i)})"
style="width: 250px" :trigger-on-focus="false"
:options="dataSource" :popper-append-to-body="false"
> class="address-auto-complete-input"
<template #option="item"> @select="((addressItem) =>{selectedAddress(addressItem,i)})"
<template> />
<span>
{{ item.value }}
<a
style="float: right"
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>
more
</a>
</span>
</template>
</template>
<a-input-search placeholder="搜索地点" size="large"></a-input-search>
</a-auto-complete>
<!-- <el-autocomplete <!-- <el-autocomplete
class="inline-input" class="inline-input"
prefix-icon="Search" prefix-icon="Search"
@ -83,6 +68,7 @@
</template> </template>
<script> <script>
import { message } from 'ant-design-vue';
import { HieimpMap } from '@/supermap/map-init' import { HieimpMap } from '@/supermap/map-init'
import TiledMap from './components/tiledMap' import TiledMap from './components/tiledMap'
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup' import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
@ -118,6 +104,18 @@
openVideo: false, openVideo: false,
channelCode: [], channelCode: [],
circleModeFlag: false, circleModeFlag: false,
addressMatchUrl: '',
address: '',
mapSearchParam: {
// 地图搜索初始化数据
parentId: '',
checkStatus: '1',
pageNum: '1',
pageSize: '20000',
gpsX: '',
gpsY: '',
radius: ''
}
} }
}, },
components: { components: {
@ -138,59 +136,135 @@
this.hiMapFun this.hiMapFun
) )
this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16) this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
getCameraAllLabel().then((res) => { this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
this.tabList = res.data.data // 初始化地址检索服务
}) this.initAddressMatchService()
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data
res.data.data.forEach((item) => {
this.camreaTreeSingle.push({
channelName: item.name,
children: [],
})
})
})
getCameraAll().then((res) => {
let t1 = new Date().getTime()
this.cameraAllData = res.data
this.addResourceTomap('全部', res.data)
let t2 = new Date().getTime()
console.log('时间#############' + (t2 - t1))
})
// this.getMapPoint() // this.getMapPoint()
// mybus.$off('openCurrentVideoSurveillance') // 根据parentId查询摄像头列表
// mybus.$on('openCurrentVideoSurveillance', (channelCode) => { mybus.off('getCameraByParentId')
// this.openVideo = true mybus.on('getCameraByParentId', (parentId) => {
// this.channelCode.unshift(channelCode) this.mapSearchParam.parentId = parentId
// }) this.getCameraByParentId()
})
}, },
methods: { methods: {
selectedAddress(item,index) {
// 跳转到相应经纬度
console.log('跳转', item)
const latLng = {
lat: item.location.y,
lng: item.location.x
}
this.hiMapFun.mapFlyTo(latLng)
},
// 圈选方法
circleSelectResource() {
L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域';
L.drawLocal.draw.handlers.circle.radius = '半径';
L.drawLocal.draw.handlers.circle.tooltip.end = '松开绘制完成';
this.hiMap.mapObj.map.off('draw:created');
this.hiMap.mapObj.drawCircle.enable();
this.hiMap.mapObj.map.once('draw:created', (e) => {
const type = e.layerType;
const circleLayer = e.layer;
if (type === 'circle') {
const radius = (e.layer._mRadius).toFixed(2)
if (radius > 5000) {
message.info('最大支持5km范围的圈选')
} else {
const circlePloygonLayer = this.multiScreenFun.createCircleLayer(circleLayer);
this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
console.log('查询图层为何发生了改变', e.layer);
this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2)
this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2)
this.mapSearchParam.radius = radius
const params = {
gpsX: this.mapSearchParam.gpsX,
gpsY: this.mapSearchParam.gpsY,
radius: radius
}
mybus.emit('getListByMap', params)
this.getCameraByParentId()
}
}
});
},
getCameraByParentId() {
getCameraByParentId(this.mapSearchParam).then((res) => {
console.log('根据parent查询摄像头', res.data.data)
this.addResourceTomap('videoMap', res.data.data)
})
},
// 初始化地址匹配服务
initAddressMatchService() {
this.L = window.L || {};
this.addressMatchService = L.supermap.addressMatchService(this.addressMatchUrl);
},
circleMode() { circleMode() {
// 转换圈选模式 // 转换圈选模式
this.circleModeFlag = !this.circleModeFlag this.circleModeFlag = !this.circleModeFlag
if(this.circleModeFlag){ if(this.circleModeFlag){
// 打开圈选模式 // 打开圈选模式
this.circleSelectResource()
}else { }else {
// 关闭圈选模式，清空圈选内容，重新上图 // 关闭圈选模式，清空圈选内容，重新上图
this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
// 重置内容
this.mapSearchParam.gpsX = ''
this.mapSearchParam.gpsY = ''
this.mapSearchParam.radius = ''
this.getCameraByParentId()
const params = {
gpsX: this.mapSearchParam.gpsX,
gpsY: this.mapSearchParam.gpsY,
radius: this.mapSearchParam.radius
}
mybus.emit('getListByMap', params)
} }
}, },
getCameraAllPage(page) { //查询地址建议匹配
let params = { async searchAddressByKeyWord(queryString, cb, indexX) {
page: page, this.disasterPointIndex = indexX;
pageSize: 20000, /* const res = await bdPlaceSearch({ searchKey: queryString });
if (res.data) {
for(var i=0;i<res.data.length;i++){
res.data[i].value = res.data[i].name;
}
cb(res.data);
}*/
const match = function(obj) {
//console.log('ooooo',obj);
obj.result.map(item => {
item.value = item.address;
});
cb(obj.result);
};
if (!queryString) {
cb([]);
} else {
var geoCodeParam = new SuperMap.GeoCodingParameter({
'address': queryString,
});
this.addressMatchService.code(geoCodeParam, match);
} }
getCameraAll(params).then((res) => {
// let t1 = new Date().getTime();
this.cameraAllData = res.data.data
this.addResourceTomap('全部', res.data.data)
// let t2 = new Date().getTime();
// console.log("时间#############" + (t2 - t1));
})
}, },
// getCameraAllPage(page) {
// let params = {
// name: '',
// page: page,
// pageSize: 20000,
// }
// selectByChannelName(params).then((res) => {
// // let t1 = new Date().getTime();
// this.cameraAllData = res.data.data
// this.addResourceTomap('全部', res.data.data)
// // let t2 = new Date().getTime();
// // console.log("时间#############" + (t2 - t1));
// })
// },
tabChange(item) { tabChange(item) {
if (this.checkboxGroup.indexOf(item.labelName) !== -1) { if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
if (item.labelName == '全部') { if (item.labelName == '全部') {
@ -234,6 +308,7 @@
}) })
} }
}) })
console.log('上图数据', dataEvent)
this.getMapPoint(dataEvent, 'videoSurveillance.png', type) this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
}, },
getMapPoint(data, img, type) { getMapPoint(data, img, type) {
@ -286,39 +361,7 @@
console.log(this.camreaTree) console.log(this.camreaTree)
}) })
}, },
loadNode(node, resolve) {
// if (node.level === 0) {
// return resolve([{ name: 'region' }]);
// }
if (node.level > 0) {
let subData = []
getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
if (res.data.data.length == 0) {
const params = {
parentId: node.data.id,
checkStatus: '1',
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
}
getCameraByParentId(params).then((res) => {
res.data.data.forEach((item) => {
subData.push({
name: item.channelName,
gpsX: item.gpsX,
gpsY: item.gpsY,
channelCode: item.channelCode,
checkStatus: item.checkStatus,
leaf: true,
})
})
return resolve(subData)
})
} else {
subData = res.data.data
return resolve(subData)
}
})
}
},
treeCameraClick(data) { treeCameraClick(data) {
console.log(data) console.log(data)
if (data.channelCode) { if (data.channelCode) {
@ -429,185 +472,12 @@
top: 0.1rem; top: 0.1rem;
right: 0.1rem; right: 0.1rem;
border-radius: 4px; border-radius: 4px;
// margin-top: 20px;
:deep(.el-input__wrapper) {
background: #629ab8;
border-radius: 20px;
}
:deep(.el-input__inner) {
color: #fff;
background: #629ab8;
width: 255px;
height: 44px;
border-radius: 20px;
&::placeholder {
color: #fff;
}
}
:deep(.el-input__prefix) {
top: 2px;
}
:deep(.el-input-group__append) {
width: 54px;
min-height: unset;
height: 30px;
position: absolute;
right: 6px;
top: 6px;
border-radius: 20px;
line-height: 30px;
text-indent: -4px;
color: #5e9bbd;
font-size: 14px;
cursor: pointer;
}
:deep(.my-autocomplete) {
top: 20px !important;
z-index: -1 !important;
width: 250px !important;
left: 2px !important;
background: #3c657c;
border-radius: 0 0 20px 20px;
li {
color: #fff;
&:hover {
background: #41738f;
}
}
}
:deep(.el-popper) {
width: 300px !important;
}
}
.tag-box {
position: absolute;
right: 30px;
// top: 138px;
margin-top: 20px;
z-index: 1000;
width: 350px;
height: 500px;
border-radius: 5px;
background-color: #25536d;
.refresh {
position: absolute;
right: 15px;
top: 10px;
color: #fff;
cursor: pointer;
z-index: 1008;
}
:deep(.el-tabs) {
background: transparent;
// width: 300px;
height: 500px;
border: none;
.el-tabs__header {
background: transparent;
.el-tabs__item {
width: 150px;
text-align: center;
}
.el-tabs__item.is-active {
background: rgba(27, 255, 255, 0.2);
color: #fff;
background-image: url('~@/assets/img/picture_left.png'),
url('~@/assets/img/picture_right.png');
background-repeat: no-repeat;
background-position: 6% 55%, 94% 55%;
background-size: 20% 20%;
}
}
.el-input__inner {
background-color: #51758a;
border-radius: 5px;
border: none;
}
.el-input__wrapper {
background-color: #51758a;
}
.el-input__suffix {
.el-input__icon {
color: #72c7f5;
}
}
.el-tree {
margin-top: 15px;
height: 320px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
background-color: #456d83;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #708fa3 !important;
}
}
}
:deep(.el-checkbox-group) {
height: 360px;
overflow-y: auto;
margin-top: 22px;
&::-webkit-scrollbar {
width: 4px;
background-color: #456d83;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #708fa3 !important;
}
}
:deep(.el-checkbox-button) {
border-radius: 20px;
margin: 10px;
.el-checkbox-button__inner {
height: 30px;
}
.el-checkbox-button__inner {
border-radius: 20px;
background-color: rgba(116, 204, 252, 0.4);
color: #fff;
border: none;
}
.el-checkbox-button__inner:hover {
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
}
}
:deep(.el-checkbox-button.is-checked) {
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
}
:deep(.el-tabs__item) {
color: #d1ced5;
}
.el-tree {
background: transparent;
color: #fff;
}
:deep(.el-tree-node__content:hover) {
background: rgba(27, 255, 255, 0.2);
}
:deep(.el-tree-node:focus) > .el-tree-node__content {
background-color: rgba(27, 255, 255, 0.2);
color: #fff;
}
.reset-button { .reset-button {
margin-left: 20px; margin-left: 20px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
z-index: 1008; z-index: 1008;
} }
.checkStatus {
.el-checkbox {
color: #fff;
}
}
.el-radio {
color: #fff;
}
} }
} }
</style> </style>
@ -626,5 +496,12 @@
z-index: 1001; z-index: 1001;
cursor: pointer; cursor: pointer;
} }
.address-auto-complete-input {
width: 2.4rem;
}
::v-deep.el-autocomplete .el-popper{
width: auto !important;
max-width: 2.4rem;
}
} }
</style> </style>