Skip to content

K
kd_control
Commit 4c3b9713 authored by zhanglw's avatar zhanglw
Browse files
Options

电子围栏，边坡设备监测

parent 2d5aaea3
Hide whitespace changes
Inline Side-by-side
Showing with 877 additions and 106 deletions
public/config/config.json
View file @ 4c3b9713
...@@ -345,4 +345,4 @@ ...@@ -345,4 +345,4 @@
} }
] ]
} }
} }
\ No newline at end of file
src/components/mars3d/Map4.vue
View file @ 4c3b9713
...@@ -2,21 +2,21 @@ ...@@ -2,21 +2,21 @@
<div style="wight:100%;height:100%;position: relative;"> <div style="wight:100%;height:100%;position: relative;">
<div :id="`mars3d-container${mapKey}`" <div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div> :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview"> <div class="infoview">
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div> <div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div>
</div> </div>
<img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4"> <img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4">
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
// 使用免费开源版本 // 使用免费开源版本
import 'mars3d/dist/mars3d.css' import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d' import * as mars3d from 'mars3d'
...@@ -25,24 +25,24 @@ ...@@ -25,24 +25,24 @@
import zhuangchetubiao from '../../assets/images/cutGraph/zhuangchedian1.png' import zhuangchetubiao from '../../assets/images/cutGraph/zhuangchedian1.png'
import xiechetubiao from '../../assets/images/cutGraph/xiechedian1.png' import xiechetubiao from '../../assets/images/cutGraph/xiechedian1.png'
import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png' import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html) // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
// echarts插件 // echarts插件
// import 'mars3d-echarts' // import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用 // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium Vue.prototype.Cesium = mars3d.Cesium
var map; var map;
export default { export default {
name: 'mars3dViewer', name: 'mars3dViewer',
created(){ created(){
// this.getCoordinate(); // this.getCoordinate();
}, },
data(){ data(){
return{ return{
zuobianData:[], zuobianData:[],
...@@ -54,44 +54,44 @@ ...@@ -54,44 +54,44 @@
areaColorData:[], areaColorData:[],
} }
}, },
props: { props: {
// 初始化配置参数 // 初始化配置参数
url: String, url: String,
// 地图唯一性标识 // 地图唯一性标识
mapKey: { mapKey: {
type: String, type: String,
default: '' default: ''
}, },
// 自定义参数 // 自定义参数
options: Object, options: Object,
// 是否分屏显示 // 是否分屏显示
compare: { compare: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 是否插入到body元素上 // 是否插入到body元素上
appendToBody: { appendToBody: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 自定义css类名 // 自定义css类名
customClass: { customClass: {
type: String, type: String,
default: '' default: ''
} }
}, },
destroy() { destroy() {
this[`map${this.mapKey}`].destroy() this[`map${this.mapKey}`].destroy()
delete this[`map${this.mapKey}`] delete this[`map${this.mapKey}`]
}, },
methods: { methods: {
//后台获取数据 //后台获取数据
getCoordinate(data) { getCoordinate(data) {
...@@ -156,13 +156,13 @@ ...@@ -156,13 +156,13 @@
}) })
} }
}) })
} }
}) })
}) })
} }
}) })
}, },
//上传关键点数据 //上传关键点数据
uploaded(text,type,way,arr1){ uploaded(text,type,way,arr1){
...@@ -303,13 +303,13 @@ ...@@ -303,13 +303,13 @@
}) })
} }
} }
}, },
//创建地图 //创建地图
initMars3d(options) { initMars3d(options) {
let that = this; let that = this;
//if (this[`map${this.mapKey}`]) return //if (this[`map${this.mapKey}`]) return
const mapOptions = { const mapOptions = {
...options, ...options,
...this.options, ...this.options,
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
defaultContextMenu: false, //右键菜单 defaultContextMenu: false, //右键菜单
}, },
} }
// 创建三维地球场景 // 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions) map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map this[`map${this.mapKey}`] = map
...@@ -329,7 +329,7 @@ ...@@ -329,7 +329,7 @@
initLayerManager(graphicLayer,that.weilanName[index]); initLayerManager(graphicLayer,that.weilanName[index]);
that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]); that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]);
}) })
//关键点显示 //关键点显示
that.zuobianData.forEach(function(item,index){ that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer(); var graphicLayer = new mars3d.layer.GraphicLayer();
...@@ -346,7 +346,7 @@ ...@@ -346,7 +346,7 @@
initLayerManager(graphicLayer); initLayerManager(graphicLayer);
that.addDemoGraphic2(graphicLayer,item); that.addDemoGraphic2(graphicLayer,item);
}) })
//webgl渲染失败后，刷新页面 //webgl渲染失败后，刷新页面
map.on(mars3d.EventType.renderError,function(event){ map.on(mars3d.EventType.renderError,function(event){
window.location.reload(); window.location.reload();
...@@ -440,7 +440,7 @@ ...@@ -440,7 +440,7 @@
}, },
}, },
success: function (graphic){ success: function (graphic){
var mpt = mars3d.LatLngPoint.fromCartesian(graphic._position_draw); var mpt = mars3d.LngLatPoint.fromCartesian(graphic._position_draw);
that.toJavaCoordinates.push(mpt.toString().split(',')); that.toJavaCoordinates.push(mpt.toString().split(','));
} }
}); });
...@@ -452,11 +452,11 @@ ...@@ -452,11 +452,11 @@
that.controlPointId = item.id; that.controlPointId = item.id;
}) })
}, },
} }
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style > <style >
.maplogo1Img4{ .maplogo1Img4{
...@@ -467,7 +467,7 @@ ...@@ -467,7 +467,7 @@
height: 2.5vh; height: 2.5vh;
} }
.cesium-viewer-toolbar{ .cesium-viewer-toolbar{
display: none !important; display: none !important;
} }
.mars3d-compass{ .mars3d-compass{
...@@ -484,9 +484,9 @@ ...@@ -484,9 +484,9 @@
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
} }
/* 重写Cesium的css */ /* 重写Cesium的css */
/**cesium按钮背景色*/ /**cesium按钮背景色*/
.cesium-button { .cesium-button {
background-color: #3f4854; background-color: #3f4854;
...@@ -495,35 +495,35 @@ ...@@ -495,35 +495,35 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px; line-height: 32px;
} }
.cesium-viewer-geocoderContainer .cesium-geocoder-input { .cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7); background-color: rgba(63, 72, 84, 0.7);
} }
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus { .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9); background-color: rgba(63, 72, 84, 0.9);
} }
.cesium-viewer-geocoderContainer .search-results { .cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854; background-color: #3f4854;
} }
.cesium-geocoder-searchButton { .cesium-geocoder-searchButton {
background-color: #3f4854; background-color: #3f4854;
} }
.cesium-infoBox-title { .cesium-infoBox-title {
background-color: #3f4854; background-color: #3f4854;
} }
.cesium-infoBox { .cesium-infoBox {
background: rgba(63, 72, 84, 0.9); background: rgba(63, 72, 84, 0.9);
} }
.cesium-toolbar-button img { .cesium-toolbar-button img {
height: 100%; height: 100%;
} }
.cesium-performanceDisplay-defaultContainer { .cesium-performanceDisplay-defaultContainer {
top: auto; top: auto;
bottom: 35px; bottom: 35px;
...@@ -533,7 +533,7 @@ ...@@ -533,7 +533,7 @@
.cesium-performanceDisplay-fps { .cesium-performanceDisplay-fps {
color: #fff; color: #fff;
} }
/**cesium工具栏位置*/ /**cesium工具栏位置*/
.cesium-viewer-toolbar { .cesium-viewer-toolbar {
top: auto; top: auto;
...@@ -541,7 +541,7 @@ ...@@ -541,7 +541,7 @@
right: 12px; right: 12px;
bottom: 35px; bottom: 35px;
} }
.cesium-viewer-toolbar > .cesium-toolbar-button, .cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper, .cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer { .cesium-viewer-geocoderContainer {
...@@ -550,30 +550,30 @@ ...@@ -550,30 +550,30 @@
clear: both; clear: both;
text-align: center; text-align: center;
} }
.cesium-baseLayerPicker-dropDown { .cesium-baseLayerPicker-dropDown {
bottom: 0; bottom: 0;
right: 40px; right: 40px;
max-height: 700px; max-height: 700px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.cesium-navigation-help { .cesium-navigation-help {
top: auto; top: auto;
bottom: 0; bottom: 0;
right: 40px; right: 40px;
transform-origin: right bottom; transform-origin: right bottom;
} }
.cesium-sceneModePicker-wrapper { .cesium-sceneModePicker-wrapper {
width: auto; width: auto;
} }
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon { .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left; float: left;
margin: 0 3px; margin: 0 3px;
} }
.cesium-viewer-geocoderContainer .search-results { .cesium-viewer-geocoderContainer .search-results {
left: 0; left: 0;
right: 40px; right: 40px;
...@@ -581,16 +581,16 @@ ...@@ -581,16 +581,16 @@
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.cesium-infoBox-title { .cesium-infoBox-title {
background-color: #3f4854; background-color: #3f4854;
} }
.cesium-infoBox { .cesium-infoBox {
top: 50px; top: 50px;
background: rgba(63, 72, 84, 0.9); background: rgba(63, 72, 84, 0.9);
} }
/**左下工具栏菜单*/ /**左下工具栏菜单*/
.toolbar-dropdown-menu-div { .toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8); background: rgba(43, 44, 47, 0.8);
...@@ -601,7 +601,7 @@ ...@@ -601,7 +601,7 @@
bottom: 40px; bottom: 40px;
display: none; display: none;
} }
.toolbar-dropdown-menu { .toolbar-dropdown-menu {
min-width: 110px; min-width: 110px;
padding: 0; padding: 0;
...@@ -620,24 +620,24 @@ ...@@ -620,24 +620,24 @@
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
} }
.toolbar-dropdown-menu > li > a:hover, .toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { .dropdown-menu > li > a:focus {
color: #fff; color: #fff;
background-color: #444d59; background-color: #444d59;
} }
.toolbar-dropdown-menu > .active > a, .toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
color: #fff; color: #fff;
background-color: #444d59; background-color: #444d59;
} }
.toolbar-dropdown-menu i { .toolbar-dropdown-menu i {
padding-right: 5px; padding-right: 5px;
} }
.infoview{ .infoview{
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -646,4 +646,3 @@ ...@@ -646,4 +646,3 @@
z-index: 1000; z-index: 1000;
} }
</style> </style>
\ No newline at end of file
src/components/mars3d/Map5.vue 0 → 100644
View file @ 4c3b9713
<template>
<div style="wight:100%;height:100%;position: relative;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview">
<div style="display: inline-block;color:red;font-weight:bolder;">点击地图设置坐标</div>
</div>
<img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4">
</div>
</template>
<script>
import Vue from 'vue'
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
// 使用免费开源版本
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
var map;
export default {
name: 'mars3dViewer',
data(){
return{
}
},
props: {
// 初始化配置参数
url: String,
// 地图唯一性标识
mapKey: {
type: String,
default: ''
},
// 自定义参数
options: Object,
// 是否分屏显示
compare: {
type: Boolean,
default: false
},
// 是否插入到body元素上
appendToBody: {
type: Boolean,
default: false
},
// 自定义css类名
customClass: {
type: String,
default: ''
}
},
destroy() {
this[`map${this.mapKey}`].destroy()
delete this[`map${this.mapKey}`]
},
created(){
this.$nextTick(() => {
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图
})
});
},
methods: {
//创建地图
initMars3d(options) {
let that = this;
const mapOptions = {
...options,
...this.options,
control: {
defaultContextMenu: false, //右键菜单
},
}
// 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
this[`map${this.mapKey}`] = map;
this.$emit('onload', map);
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.maplogo1Img4{
position: absolute;
bottom: 0px;
left: 0px;
width: 6vw;
height: 2.5vh;
}
.cesium-viewer-toolbar{
display: none !important;
}
.mars3d-compass{
display: none !important;
}
.mars3d-locationbar{
display: none !important;
}
.mars3d-distance-legend{
display: none !important;
}
.mars3d-container {
height: 100%;
width: 100vw;
overflow: hidden;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
background: rgba(63, 72, 84, 0.9);
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar {
top: auto;
left: auto;
right: 12px;
bottom: 35px;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: right;
clear: both;
text-align: center;
}
.cesium-baseLayerPicker-dropDown {
bottom: 0;
right: 40px;
max-height: 700px;
margin-bottom: 5px;
}
.cesium-navigation-help {
top: auto;
bottom: 0;
right: 40px;
transform-origin: right bottom;
}
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left;
margin: 0 3px;
}
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
position: absolute;
z-index: 999;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8);
border: 1px solid #2b2c2f;
z-index: 999;
position: absolute;
right: 60px;
bottom: 40px;
display: none;
}
.toolbar-dropdown-menu {
min-width: 110px;
padding: 0;
}
.toolbar-dropdown-menu > li {
padding: 0 3px;
margin: 2px 0;
}
.toolbar-dropdown-menu > li > a {
color: #edffff;
display: block;
padding: 4px 10px;
clear: both;
font-weight: normal;
line-height: 1.6;
white-space: nowrap;
text-decoration: none;
}
.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu i {
padding-right: 5px;
}
.infoview{
position: absolute;
top: 10px;
left: 10px;
width: 50vw;
z-index: 1000;
}
</style>
src/views/regionalManagement/regionalInformation/index.vue
View file @ 4c3b9713
...@@ -84,13 +84,14 @@ ...@@ -84,13 +84,14 @@
</el-form-item> </el-form-item>
<br/> <br/>
<el-form-item label="选择车辆" prop="cars" v-show="form.item.areaclass == '电子围栏'"> <el-form-item label="选择车辆" prop="cars" v-show="form.item.areaclass == '电子围栏'">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div class="checkboxViews"> <div class="checkboxViews">
<el-checkbox-group v-model="checkDataList" style="width:480px;"> <el-checkbox-group v-model="checkDataList" style="width:480px;" @change="handleCheckedChange">>
<el-checkbox v-for="(obj,index) in carInformationData" :label="obj.number" :key="index">{{obj.number}}</el-checkbox> <el-checkbox v-for="(obj,index) in carInformationData" :label="obj.number" :key="index">{{obj.number}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="启停状态" prop="status" v-show="form.item.areaclass == '电子围栏'"> <el-form-item label="启用情况" prop="status" v-show="form.item.areaclass == '电子围栏'">
<el-select v-model="form.item.status" placeholder="请选择启停状态" style="width:160px;"> <el-select v-model="form.item.status" placeholder="请选择启停状态" style="width:160px;">
<el-option label="启用" value="启用"></el-option> <el-option label="启用" value="启用"></el-option>
<el-option label="停用" value="停用"></el-option> <el-option label="停用" value="停用"></el-option>
...@@ -120,12 +121,13 @@ export default { ...@@ -120,12 +121,13 @@ export default {
data() { data() {
const basePathUrl = window.basePathUrl || '' const basePathUrl = window.basePathUrl || ''
return { return {
isIndeterminate:false,
//地图图片 //地图图片
configUrl: basePathUrl + 'config/config.json', configUrl: basePathUrl + 'config/config.json',
imgSrcStart:process.env.VUE_APP_LOCAL_API2, imgSrcStart:process.env.VUE_APP_LOCAL_API2,
loading: false, loading: false,
page: 1, page: 1,
size: 10, size: 9999,
total: 0, total: 0,
query:{}, query:{},
picFileName:'', picFileName:'',
...@@ -165,6 +167,15 @@ export default { ...@@ -165,6 +167,15 @@ export default {
}) })
}, },
methods: { methods: {
handleCheckAllChange(val) {
this.checkDataList = val ? this.carInformationData.map((item)=>item.number) : [];
this.isIndeterminate = false;
},
handleCheckedChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.carInformationData.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.carInformationData.length;
},
//获取区域信息数据 //获取区域信息数据
loadData() { loadData() {
var sort = 'createTime,desc'; var sort = 'createTime,desc';
...@@ -172,7 +183,7 @@ export default { ...@@ -172,7 +183,7 @@ export default {
param.page = this.page - 1; param.page = this.page - 1;
param.size = this.size; param.size = this.size;
param.sort = sort; param.sort = sort;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.RegionalInformationQuery(param).then((res) => { HttpReq.truckDispatching.RegionalInformationQuery(param).then((res) => {
if(res.code == 200){ if(res.code == 200){
...@@ -203,7 +214,7 @@ export default { ...@@ -203,7 +214,7 @@ export default {
return 'success-row'; return 'success-row';
} }
return ''; return '';
}, },
cancelForm(a, b, c){ cancelForm(a, b, c){
this.form.visible = false; this.form.visible = false;
}, },
...@@ -275,7 +286,7 @@ export default { ...@@ -275,7 +286,7 @@ export default {
this.form.status.cu = 0 this.form.status.cu = 0
} }
}); });
}; }
}, },
//新增区域信息 //新增区域信息
reqAddItem(form, item){ reqAddItem(form, item){
...@@ -301,6 +312,7 @@ export default { ...@@ -301,6 +312,7 @@ export default {
}else{ }else{
let lastData = {...item}; let lastData = {...item};
lastData.card = this.picFileName; lastData.card = this.picFileName;
lastData.carList = this.checkDataList;
//this.$refs.mars3dViewerMapMethod.uploaded(lastData.name); //this.$refs.mars3dViewerMapMethod.uploaded(lastData.name);
HttpReq.truckDispatching.RegionalInformationAdd(lastData).then((res) => { HttpReq.truckDispatching.RegionalInformationAdd(lastData).then((res) => {
form.visible = false; form.visible = false;
...@@ -324,24 +336,6 @@ export default { ...@@ -324,24 +336,6 @@ export default {
}).catch(function(error) { }).catch(function(error) {
form.status.cu = 0 form.status.cu = 0
}); });
this.checkDataList.forEach((carItem,index)=>{
let uploadCarData = {};
uploadCarData.car = carItem;
uploadCarData.areaId = item.code;
console.log('uploadCarData',uploadCarData);
HttpReq.truckDispatching.RegionalInformationCarAdd(uploadCarData).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
})
} }
}, },
...@@ -349,7 +343,7 @@ export default { ...@@ -349,7 +343,7 @@ export default {
reqUpdateItem(form, item){ reqUpdateItem(form, item){
let lastData = {...item}; let lastData = {...item};
lastData.card = this.picFileName; lastData.card = this.picFileName;
//lastData.cars = this.checkDataList; lastData.carList = this.checkDataList;
HttpReq.truckDispatching.RegionalInformationUpdate(lastData).then((res) => { HttpReq.truckDispatching.RegionalInformationUpdate(lastData).then((res) => {
form.visible = false; form.visible = false;
if(res.code == 200){ if(res.code == 200){
...@@ -370,26 +364,6 @@ export default { ...@@ -370,26 +364,6 @@ export default {
}).catch(function(error) { }).catch(function(error) {
form.status.cu = 0 form.status.cu = 0
}); });
if(this.oldCheckDataList.length != 0){
HttpReq.truckDispatching.RegionalInformationCarDel(this.oldCheckDataList).then((res) => {})
}
this.$nextTick(()=>{
this.checkDataList.forEach((carItem,index)=>{
let uploadCarData = {};
uploadCarData.car = carItem;
uploadCarData.areaId = item.code;
HttpReq.truckDispatching.RegionalInformationCarAdd(uploadCarData).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
})
})
}, },
//删除区域信息 //删除区域信息
reqRemoveProject(item,weilanName,items){ reqRemoveProject(item,weilanName,items){
...@@ -410,7 +384,7 @@ export default { ...@@ -410,7 +384,7 @@ export default {
this.loadData(); this.loadData();
}) })
HttpReq.truckDispatching.screenMapSetUpDel(weilanName).then((res) => {}) HttpReq.truckDispatching.screenMapSetUpDel(weilanName).then((res) => {})
HttpReq.truckDispatching.RegionalCaiDianQuery({areaName:items.name}).then((resAll) => { HttpReq.truckDispatching.RegionalCaiDianQuery({areaName:items.name}).then((resAll) => {
if(resAll.code == 200){ if(resAll.code == 200){
//totalElements == 0 说明为卸区，删除卸区对应点以及路径图信息 //totalElements == 0 说明为卸区，删除卸区对应点以及路径图信息
...@@ -533,7 +507,7 @@ export default { ...@@ -533,7 +507,7 @@ export default {
.el-table .success-row { .el-table .success-row {
background: #f0f9eb; background: #f0f9eb;
} }
.device-manage{ .device-manage{
.panel-bottom{ .panel-bottom{
.el-button{margin:2px 0;padding:6px 15px;font-size:14px;} .el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
...@@ -546,9 +520,9 @@ export default { ...@@ -546,9 +520,9 @@ export default {
} }
.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;} .el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
} }
} }
} }
.mapcontainer3 { .mapcontainer3 {
height: 50vh; height: 50vh;
......
src/views/slopeMonitoring/slopeDevice/index.vue 0 → 100644
View file @ 4c3b9713
<template>
<div class="common-page device-manage">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备号</label>
<el-input v-model="query.formId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">在线状态</label>
<el-select v-model="query.stu" placeholder="请选择">
<el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
<el-date-picker
v-model="query.createTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:MM:SS"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
</div>
<!-- 表格 -->
<div class="panel-bottom page-row">
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
</div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="formId" label="设备名称" align="center"></el-table-column>
<el-table-column prop="username" label="设备类型" align="center"></el-table-column>
<el-table-column prop="carNo" label="设备编号" align="center"></el-table-column>
<el-table-column prop="carClass" label="数值单位" align="center"></el-table-column>
<el-table-column prop="createTime" label="安装日期" align="center"></el-table-column>
<el-table-column prop="createTime" label="生产厂家" align="center"></el-table-column>
<el-table-column prop="createTime" label="最后更新时间" align="center"></el-table-column>
<el-table-column prop="carClass" label="状态" align="center"></el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;"
layout="total, prev, pager, next, sizes" @size-change="sizeChange"
@current-change="pageChange"/>
</div>
</div>
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
<el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini">
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备名称：" prop="name" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.name" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备类型：" class="form-cell" prop="devType">
<div class="cell-box">
<el-select v-model="formData.devType" placeholder="无" class="cell-input">
<el-option v-for="item in sdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备编号：" class="form-cell" prop="devNo">
<div class="cell-box">
<el-input v-model="formData.devNo" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="数值单位：" class="form-cell" prop="devUnit">
<div class="cell-box">
<el-input v-model="formData.devUnit" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="安装日期：" class="form-cell" prop="installDate">
<div class="cell-box">
<el-date-picker v-model="formData.installDate" type="date" placeholder="选择日期"></el-date-picker>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="生产厂家：" class="form-cell" prop="manufactor">
<div class="cell-box">
<el-input v-model="formData.manufactor" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content">
<el-form-item label="安装位置：" class="form-cell" prop="lng" style="height: 36px">
<div class="cell-box" style="display: flex">
<div style="width: 200px">经度： {{ formData.lng }}</div>
<div style="width: 200px">纬度： {{ formData.lat }}</div>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content">
<div id="centerDiv" class="mapcontainer">
<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"
mapKey="mapPointView"/>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="安装高度：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="供电和通信方式：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备精度：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="海拔（米）：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="一级预警阈值：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="二级预警阈值：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="三级预警阈值：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="四级预警阈值：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="在用状态：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.xxxxx" placeholder="无" class="cell-input">
<el-option v-for="item in sdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="同步状态：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.xxxxx" placeholder="无" class="cell-input">
<el-option v-for="item in sdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备ip地址：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="传感器初始值：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import kongzhidiantubiao from "../../../assets/images/cutGraph/kongzhidian1.png";
export default {
name: 'slopeDevice',
components: {
mars3dViewerMap,
},
data() {
const basePathUrl = window.basePathUrl || ''
return {
configUrl: basePathUrl + 'config/config.json',
title: '新增',
visible: false,
loading: false,
page: 1,
size: 10,
total: 0,
query: {},
stuOpts: [
{label: '离线', value: 0},
{label: '在线', value: 1},
],
sdOptions: [
{label: '一类设备', value: 1},
{label: '二类设备', value: 2},
],
tableData: [],
formData: {
lng: '',
lat: '',
name: '',
devType: '',
devNo: '',
devUnit: '',
installDate: '',
manufactor: '',
},
rules: {
lng: {required: true, message: '请在地图上放置设备', trigger: 'blur'},
name: {required: true, message: ' ', trigger: 'blur'},
devType: {required: true, message: ' ', trigger: 'blur'},
devNo: {required: true, message: ' ', trigger: 'blur'},
devUnit: {required: true, message: ' ', trigger: 'blur'},
installDate: {required: true, message: ' ', trigger: 'blur'},
manufactor: {required: true, message: ' ', trigger: 'blur'},
},
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
})
},
methods: {
onMapload(map) {
map.unbindContextMenu();
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
const graphic = new mars3d.graphic.PointEntity({
style: {
color: "#ff0000",
pixelSize: 10,
outlineColor: "#ffffff",
outlineWidth: 2,
label: {
text: "放置位置",
font_size: 18,
color: "#ff0000",
outline: true,
outlineColor: "#000000",
outlineWidth: 2,
pixelOffsetY: -24,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0
}
},
})
graphicLayer.addGraphic(graphic);
map.on(mars3d.EventType.click, (event) => {
let p = mars3d.LngLatPoint.fromCartesian(event.cartesian);
this.formData.lng = p.lng;
this.formData.lat = p.lat;
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(p.lng, p.lat, 0), 0)
})
});
},
loadData() {
var sort = 'id,desc';
var param = this.query;
param.page = this.page - 1;
param.pageSize = this.size;
param.sort = sort;
this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.ajReportListFind(param).then((res) => {
if (res.code == 200) {
this.loading = false;
this.tableData = res.data.records;
this.total = res.data.total;
}
})
})
},
toAdd() {
this.title = '新增';
this.visible = true;
},
toEdit() {
},
toDelete(item) {
var id = item.id;
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
}).catch((e) => {
})
},
cancelForm() {
this.visible = false;
},
tableRowClassName({row, rowIndex}) {
},
// 点击搜索
toSearch() {
this.page = 1;
this.loadData();
},
// 重置搜索
clearLimit() {
this.query = {};
this.loadData()
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
submitForm(validateName, item) {
this.$refs[validateName].validate(valid => {
if (valid) {
// if (this.title === '新增') {
// this.reqAddItem(this.form, item)
// } else {
// this.reqUpdateItem(this.form, item)
// }
alert(9999);
} else {
alert(666)
}
});
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.cell-input {
//min-width: 220px;
}
.form-cell {
margin: 0 !important;
width: 100%;
}
.grid-content {
//border: 1px solid rgba(100, 100, 100, 0.1);
padding: 5px 30px;
}
.cell-box .el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
}
.cell-box .el-input.is-disabled .el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
background: white;
cursor: text;
}
.cell-box .el-input.is-disabled .el-input__icon {
cursor: text;
}
.cell-box .el-icon-arrow-up:before {
content: '';
}
.mapcontainer {
height: 30vh;
width: 680px;
overflow: hidden;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment