parent
c778a9fb88
commit
8b1f5c3388
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
@ -1,24 +1,356 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="container">
|
||||||
地图扎点
|
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
|
||||||
</div>
|
@init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
||||||
|
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
||||||
|
@click="JSONclick" />
|
||||||
|
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
||||||
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||||
|
<div class="markerStyles">
|
||||||
|
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
|
||||||
|
<img :src="marker.imgSrc" alt="">
|
||||||
|
</div>
|
||||||
|
</el-amap-marker>
|
||||||
|
|
||||||
|
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
|
||||||
|
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
||||||
|
<div class="infowindow-box" v-if="titleShow == '人员'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>姓名:</div><span>张三</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>部门:</div><span>xxx</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>联系方式:</div><span>13611111111</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>当前位置:</div><span>xxxxxx</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box" v-if="titleShow == '车辆'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>驾驶员姓名:</div><span>张三</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>联系方式:</div><span>xxx</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>车辆类型:</div><span>13611111111</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>车牌号:</div><span>xxxxxx</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-amap-info-window>
|
||||||
|
</el-amap>
|
||||||
|
<div class="dituzhadian" @click="loogshowCK">
|
||||||
|
<div>地图扎点</div>
|
||||||
|
<img src="@/assets/images/zhadian.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="toptuli">
|
||||||
|
<div>
|
||||||
|
图例
|
||||||
|
</div>
|
||||||
|
<div class="zuoyou">
|
||||||
|
<img src="@/assets/images/icon/A-jianguanrenyuan.png" alt="">
|
||||||
|
<div>人员</div>
|
||||||
|
</div>
|
||||||
|
<div class="zuoyou">
|
||||||
|
<img src="@/assets/images/icon/A-cheliang.png" alt="">
|
||||||
|
<div>车辆</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="showCK" width="40%" title="地图扎点" @close="close" :close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false">
|
||||||
|
<div class="diandian">
|
||||||
|
<el-radio v-model="radio" label="1">人员扎点</el-radio>
|
||||||
|
<el-radio v-model="radio" label="2">车辆扎点</el-radio>
|
||||||
|
</div>
|
||||||
|
<div v-if="radio == 1">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||||
|
<el-form-item label="姓名" size="mini" prop="xm">
|
||||||
|
<el-input v-model="form.xm" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门" prop="xb">
|
||||||
|
<el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="联系方式" size="mini" prop="sfzh">
|
||||||
|
<el-input v-model="form.sfzh" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="职责描述" size="mini" prop="zz">
|
||||||
|
<el-input v-model="form.zz" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="社会关系" prop="shgx">
|
||||||
|
<el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div v-if="radio == 2">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||||
|
<el-form-item label="驾驶员姓名" size="mini" prop="xm1">
|
||||||
|
<el-input v-model="form.xm1" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="联系方式" size="mini" prop="lxfs1">
|
||||||
|
<el-input v-model="form.lxfs1" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="车辆类型" size="mini" prop="sfzha">
|
||||||
|
<el-input v-model="form.sfzha" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="车牌号" size="mini" prop="zz1">
|
||||||
|
<el-input v-model="form.zz1" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
|
||||||
|
<el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
|
||||||
|
<el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {},
|
components: {},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
mytitle: "地图扎点",
|
||||||
|
zoom: 11.8,
|
||||||
|
zooms: [3, 20],
|
||||||
|
center: [121.298563, 32.451807],
|
||||||
|
map: null,
|
||||||
|
draggable: false,
|
||||||
|
visible: true,
|
||||||
|
radio: "1",
|
||||||
|
changshazhen: changshazhen,
|
||||||
|
polygonOptions: {
|
||||||
|
strokeColor: '#00C5EC',
|
||||||
|
fillColor: '#00AEFF'
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
form: {
|
||||||
|
|
||||||
|
},
|
||||||
|
showCK: false,
|
||||||
|
rules: {
|
||||||
|
|
||||||
|
},
|
||||||
|
personInfo: {
|
||||||
|
position: [],
|
||||||
|
info: {},
|
||||||
|
visible: false,
|
||||||
|
},
|
||||||
|
titleShow: "人员",
|
||||||
|
markers: [
|
||||||
|
{
|
||||||
|
position: [121.183697866903292, 32.460227941215508],
|
||||||
|
id: 1,
|
||||||
|
name: "人员",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.235712627230569, 32.447218823220901],
|
||||||
|
id: 2,
|
||||||
|
name: "车辆",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.318413448767714, 32.411908360092688],
|
||||||
|
id: 3,
|
||||||
|
name: "车辆",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.359751265879749, 32.39683020264299],
|
||||||
|
id: 4,
|
||||||
|
name: "人员",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () { },
|
created() { },
|
||||||
mounted () { },
|
mounted() { },
|
||||||
methods: { },
|
methods: {
|
||||||
|
markersClosePopup(){
|
||||||
|
this.personInfo.visible = false
|
||||||
|
|
||||||
|
},
|
||||||
|
getMap() {
|
||||||
|
// bmap vue component
|
||||||
|
console.log('$refs: ', this.$refs.map.$$getInstance())
|
||||||
|
},
|
||||||
|
init(map) {
|
||||||
|
this.map = map;
|
||||||
|
// o.setMapStyle('amap://styles/darkblue')
|
||||||
|
console.log(this.map.getCenter())
|
||||||
|
console.log(this.$refs.map.$$getInstance())
|
||||||
|
},
|
||||||
|
// 地图点击事件
|
||||||
|
click() {
|
||||||
|
alert('click map')
|
||||||
|
},
|
||||||
|
JSONclick() { },
|
||||||
|
clickArrayMarker(e) {
|
||||||
|
this.personInfo.visible = true
|
||||||
|
this.personInfo.position = e.position
|
||||||
|
this.personInfo.info = {}
|
||||||
|
this.titleShow = e.name
|
||||||
|
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.form = {
|
||||||
|
|
||||||
|
}
|
||||||
|
this.showCK = false;
|
||||||
|
},
|
||||||
|
loogshowCK() {
|
||||||
|
this.showCK = true;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
computed: {}
|
computed: {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.dituzhadian {
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
color: #000000;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: 'Source Han Sans CN--Bold';
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toptuli {
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
width: 120px;
|
||||||
|
color: #000000;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: 'Source Han Sans CN--Bold';
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.zuoyou {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.diandian {
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px 0;
|
||||||
|
margin-left: 100px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box {
|
||||||
|
width: 300px;
|
||||||
|
min-height: 100px;
|
||||||
|
color: #000000;
|
||||||
|
font-family: 'Source Han Sans CN--Bold';
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.infowindow-box-title {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-item {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.isisbox {
|
||||||
|
margin: 10px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 70%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4b4848;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-itemTow {
|
||||||
|
.isisbox {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30% 70%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,24 +1,490 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="container">
|
||||||
全镇道路
|
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
|
||||||
</div>
|
@init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
||||||
|
|
||||||
|
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
||||||
|
@click="JSONclick" />
|
||||||
|
|
||||||
|
<!-- <el-amap-geojson :geo="dian1" :draggable="draggable"
|
||||||
|
@click="JSONclick" icon="@/assets/images/icon/jiankong.png" /> -->
|
||||||
|
|
||||||
|
<!-- <el-amap-geojson :geo="dian2" :draggable="draggable"
|
||||||
|
@click="JSONclick" icon="@/assets/images/icon/jiankong.png"/> -->
|
||||||
|
|
||||||
|
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
||||||
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||||
|
<div class="markerStyles">
|
||||||
|
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
|
||||||
|
<img :src="marker.imgSrc" alt="">
|
||||||
|
</div>
|
||||||
|
</el-amap-marker>
|
||||||
|
|
||||||
|
<el-amap-marker v-for="(marker, index) in dian1.features" :key="index + 'dian1'"
|
||||||
|
:position="marker.geometry.coordinates" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||||
|
<div class="markerStyles">
|
||||||
|
<div v-if="marker.name" class="marker-Text">{{ index }}</div>
|
||||||
|
<img src="@/assets/images/icon/jiankong.png" alt="">
|
||||||
|
</div>
|
||||||
|
</el-amap-marker>
|
||||||
|
|
||||||
|
<el-amap-marker v-for="(marker, index) in dian2.features" :key="index + 'dian2'"
|
||||||
|
:position="marker.geometry.coordinates" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||||
|
<div class="markerStyles">
|
||||||
|
<div v-if="marker.name" class="marker-Text">{{ index }}</div>
|
||||||
|
<img src="@/assets/images/icon/jiankong.png" alt="">
|
||||||
|
</div>
|
||||||
|
</el-amap-marker>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
|
||||||
|
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="red" isOutline lineCap="round"
|
||||||
|
@click="(e) => { polylineclick(e, '线') }" />
|
||||||
|
|
||||||
|
|
||||||
|
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
|
||||||
|
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="green" isOutline
|
||||||
|
lineCap="round" @click="(e) => { polylineclick(e, '线') }" />
|
||||||
|
|
||||||
|
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
|
||||||
|
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
||||||
|
<div class="infowindow-box" v-if="titleShow == '人员'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>姓名:</div><span>张三</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>部门:</div><span>xxx</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>联系方式:</div><span>13611111111</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>当前位置:</div><span>xxxxxx</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box" v-if="titleShow == '车辆'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>驾驶员姓名:</div><span>张三</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>联系方式:</div><span>xxx</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>车辆类型:</div><span>13611111111</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>车牌号:</div><span>xxxxxx</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="infowindow-box" v-if="titleShow == 'Feature'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>监控详情:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>编组:</div><span>1组</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>摄像头编号:</div><span>C1009</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>地址:</div><span>福港路-无名道路</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>监控视频:</div><span><img src="@/assets/images/jiankong.jpg" alt=""></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="infowindow-box infowindow-boxBig" v-if="titleShow == '线'">
|
||||||
|
<div class="infowindow-box-title">
|
||||||
|
<div>监控详情:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>道路名称:</div><span>福港路</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>摄像头数量:</div><span>5</span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>绑定摄像头:</div><span><el-dropdown>
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
请选择摄像头<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item>摄像头1</el-dropdown-item>
|
||||||
|
<el-dropdown-item>摄像头2</el-dropdown-item>
|
||||||
|
<el-dropdown-item>摄像头3</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown></span>
|
||||||
|
</div>
|
||||||
|
<div class="isisbox">
|
||||||
|
<div>视频墙:</div>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang">
|
||||||
|
<div class="shipinqiang-box">
|
||||||
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>地址:</div><span>福港路-无名道路</span>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>摄像头编号:</div><span>C109</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box">
|
||||||
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>地址:</div><span>福港路-无名道路</span>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>摄像头编号:</div><span>C109</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box">
|
||||||
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>地址:</div><span>福港路-无名道路</span>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>摄像头编号:</div><span>C109</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box">
|
||||||
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>地址:</div><span>福港路-无名道路</span>
|
||||||
|
</div>
|
||||||
|
<div class="shipinqiang-box-item">
|
||||||
|
<div>摄像头编号:</div><span>C109</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-amap-info-window>
|
||||||
|
</el-amap>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
||||||
|
import myxiuanlu from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
|
||||||
|
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
|
||||||
|
|
||||||
|
import dian1 from "@/assets/mapjson/Chaangshazhen/road-point.geojson"
|
||||||
|
import dian2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {},
|
components: {},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
mytitle: "地图扎点",
|
||||||
|
zoom: 11.8,
|
||||||
|
zooms: [3, 20],
|
||||||
|
center: [121.298563, 32.451807],
|
||||||
|
map: null,
|
||||||
|
draggable: false,
|
||||||
|
visible: true,
|
||||||
|
radio: "1",
|
||||||
|
changshazhen: changshazhen,
|
||||||
|
myxiuanlu: myxiuanlu,
|
||||||
|
roadline2: roadline2,
|
||||||
|
dian1: dian1,
|
||||||
|
dian2: dian2,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
polygonOptions: {
|
||||||
|
strokeColor: '#00C5EC',
|
||||||
|
fillColor: '#00AEFF'
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
|
||||||
|
showCK: false,
|
||||||
|
rules: {
|
||||||
|
|
||||||
|
},
|
||||||
|
personInfo: {
|
||||||
|
position: [
|
||||||
|
121.20458366631492, 32.46301560935721],
|
||||||
|
info: {},
|
||||||
|
visible: true,
|
||||||
|
},
|
||||||
|
titleShow: "Feature",
|
||||||
|
markers: [
|
||||||
|
{
|
||||||
|
position: [121.183697866903292, 32.460227941215508],
|
||||||
|
id: 1,
|
||||||
|
name: "人员",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.235712627230569, 32.447218823220901],
|
||||||
|
id: 2,
|
||||||
|
name: "车辆",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.318413448767714, 32.411908360092688],
|
||||||
|
id: 3,
|
||||||
|
name: "车辆",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: [121.359751265879749, 32.39683020264299],
|
||||||
|
id: 4,
|
||||||
|
name: "人员",
|
||||||
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||||
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () { },
|
created() { },
|
||||||
mounted () { },
|
mounted() { },
|
||||||
methods: { },
|
methods: {
|
||||||
|
markersClosePopup() {
|
||||||
|
this.personInfo.visible = false
|
||||||
|
|
||||||
|
},
|
||||||
|
getMap() {
|
||||||
|
// bmap vue component
|
||||||
|
console.log('$refs: ', this.$refs.map.$$getInstance())
|
||||||
|
},
|
||||||
|
init(map) {
|
||||||
|
this.map = map;
|
||||||
|
// o.setMapStyle('amap://styles/darkblue')
|
||||||
|
console.log(this.map.getCenter())
|
||||||
|
console.log(this.$refs.map.$$getInstance())
|
||||||
|
},
|
||||||
|
// 地图点击事件
|
||||||
|
click() {
|
||||||
|
alert('click map')
|
||||||
|
},
|
||||||
|
JSONclick() { },
|
||||||
|
clickArrayMarker(e) {
|
||||||
|
if (e.type) {
|
||||||
|
console.log(e);
|
||||||
|
this.personInfo.visible = true
|
||||||
|
this.personInfo.position = e.geometry.coordinates
|
||||||
|
this.personInfo.info = {}
|
||||||
|
this.titleShow = e.type
|
||||||
|
console.log(this.personInfo);
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
console.log(e);
|
||||||
|
this.personInfo.visible = true
|
||||||
|
this.personInfo.position = e.position
|
||||||
|
this.personInfo.info = {}
|
||||||
|
this.titleShow = e.name
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
polylineclick(e, type) {
|
||||||
|
console.log("线路");
|
||||||
|
this.personInfo.visible = true
|
||||||
|
this.personInfo.position = [e.lnglat.lng, e.lnglat.lat]
|
||||||
|
this.personInfo.info = {}
|
||||||
|
this.titleShow = type
|
||||||
|
|
||||||
|
}
|
||||||
|
,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
computed: {}
|
computed: {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.diandian {
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px 0;
|
||||||
|
margin-left: 100px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box {
|
||||||
|
width: 300px;
|
||||||
|
min-height: 100px;
|
||||||
|
color: #000000;
|
||||||
|
font-family: 'Source Han Sans CN--Bold';
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.infowindow-box-title {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-item {
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.isisbox {
|
||||||
|
margin: 10px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 70%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4b4848;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-itemTow {
|
||||||
|
.isisbox {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30% 70%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-boxBig {
|
||||||
|
min-width: 500px;
|
||||||
|
min-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.infowindow-box-title {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-item {
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.isisbox {
|
||||||
|
margin: 10px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 70%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4b4848;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infowindow-box-itemTow {
|
||||||
|
.isisbox {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 20% 70%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shipinqiang {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 46% 46%;
|
||||||
|
grid-row-gap: 20px;
|
||||||
|
grid-column-gap: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.shipinqiang-box {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shipinqiang-box-item {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 35% 60%;
|
||||||
|
div{
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,24 +1,346 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="container">
|
||||||
网上演练
|
<div class="tabs">
|
||||||
</div>
|
<div class="headerText">
|
||||||
</template>
|
<div class="searchP">查询条件</div>
|
||||||
|
</div>
|
||||||
|
<div class="search-input">
|
||||||
|
<div class="inputSonBox">
|
||||||
|
<div class="texts1" style="width: 6%">演练名称:</div>
|
||||||
|
<el-input size="mini" v-model="form1.name" placeholder="请输入"></el-input>
|
||||||
|
<div class="texts1" style="width: 8%">编辑时间:</div>
|
||||||
|
<el-input size="mini" v-model="form1.sfz" placeholder="请输入"></el-input>
|
||||||
|
<div class="texts1" style="width: 8%">演练类型:</div>
|
||||||
|
<el-input size="mini" v-model="form1.lxfs" placeholder="请输入"></el-input>
|
||||||
|
<div class="searchBtn">
|
||||||
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="addlist">查询</el-button>
|
||||||
|
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabsBottom">
|
||||||
|
<div class="foot-main">
|
||||||
|
<div class="headerText">
|
||||||
|
<div class="searchP searchA">预案管理列表</div>
|
||||||
|
</div>
|
||||||
|
<div class="exportBtn1">
|
||||||
|
<div class="danchunxinzeng" @click="addRules">
|
||||||
|
新增
|
||||||
|
</div>
|
||||||
|
<!-- <el-button icon="el-icon-edit-outline" size="mini" @click="exportList"
|
||||||
|
>导出</el-button
|
||||||
|
> -->
|
||||||
|
</div>
|
||||||
|
<section class="table-box">
|
||||||
|
<div class="table-item">
|
||||||
|
<el-table v-loading="loading" :data="tableData" border>
|
||||||
|
<!-- <el-table-column type="selection" width="35" align="center" /> -->
|
||||||
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||||
|
<el-table-column label="演练名称" align="center" prop="xm">
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="演练时间" align="center" prop="xb">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="演练内容" align="center" prop="sfzh">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="问题记录" align="center" prop="lxfs">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="负责人" align="center" prop="zz">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="联系方式" align="center" prop="shgx">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="状态" align="center" prop="jgdy">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div :style="scope.row.jgdy=='已完成'?'color: #3bfb01;':'color: #ff5e00;'">
|
||||||
|
{{ scope.row.jgdy }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作" align="center" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<button @click="toDetail(scope.row, 0)" class="sqbtn sqbtn1">
|
||||||
|
查看
|
||||||
|
</button>
|
||||||
|
<button @click="toDetail(scope.row, 1)" class="sqbtn sqbtn2">
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button @click="delTable(scope.row)" class="sqbtn sqbtn3">
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
<!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<pagination :total="total" :page="form1.current" :limit="form1.size" @pagination="getPagination"
|
||||||
|
:current-page.sync="form1.current"></pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="showCK" width="40%" title="新增人员" @close="close" :close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false">
|
||||||
|
<div>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||||
|
<el-form-item label="演练名称" size="mini" prop="xm">
|
||||||
|
<el-input v-model="form.xm" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
<el-form-item label="预案类型" prop="xb">
|
||||||
|
<el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="演练时间" size="mini" prop="sfzh">
|
||||||
|
<el-input v-model="form.sfzh" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="负责人" size="mini" prop="zz">
|
||||||
|
<el-input v-model="form.zz" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系方式" size="mini" prop="lxfs">
|
||||||
|
<el-input v-model="form.lxfs" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="演练过程" prop="shgx">
|
||||||
|
<el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
|
||||||
|
<el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
|
||||||
|
<el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
data() {
|
||||||
components: {},
|
const startTimeAndendTime = (rule, value, callback) => {
|
||||||
data () {
|
// const date1 = this.form.startTime;
|
||||||
|
// const date2 = this.form.endTime;
|
||||||
|
// const timeString = "01:07:53";
|
||||||
|
const date1 = new Date(`2000-01-01 ${this.form.startTime}`);
|
||||||
|
const date2 = new Date(`2000-01-01 ${this.form.endTime}`);
|
||||||
|
if (this.form.startTime === "" || this.form.endTime === "") {
|
||||||
|
callback(new Error("开始时间和结束时间都不能为空"));
|
||||||
|
} else if (date1 > date2) {
|
||||||
|
callback(new Error("结束时间不能小于开始时间"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
}
|
mytitle: "新增人员",
|
||||||
|
radio: 1,
|
||||||
|
rules: {
|
||||||
|
attendanceDescription: [
|
||||||
|
{ required: true, message: "请输入考勤规则描述", trigger: "blur" },
|
||||||
|
],
|
||||||
|
name: [
|
||||||
|
{ required: true, message: "请输入考勤规则名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
status: [{ required: true, message: "请选择状态", trigger: "change" }],
|
||||||
|
groupIdList: [
|
||||||
|
{ required: true, message: "请选择考勤组", trigger: "blur" },
|
||||||
|
],
|
||||||
|
date: [
|
||||||
|
{ required: true, validator: startTimeAndendTime, trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
name: "",
|
||||||
|
attendanceDescription: "", //考勤规则描述
|
||||||
|
status: 1,
|
||||||
|
groupIdList: [],
|
||||||
|
groupNames: "",
|
||||||
|
endTime: "", //打卡结束时间
|
||||||
|
startTime: "", //打卡开始时间
|
||||||
|
},
|
||||||
|
showCK: false,
|
||||||
|
loading: false,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
xm: "淌防疏散演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模拟突发火灾，组织人员疏数",
|
||||||
|
lxfs: " 个别模层疏数指示标识缺失",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "已完成",
|
||||||
|
|
||||||
|
}, {
|
||||||
|
xm: "交通管制演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模纵主要路段交通中断，调试交通管制方案",
|
||||||
|
lxfs: " 信号灯同步控制存在问题",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "已完成",
|
||||||
|
|
||||||
|
}, {
|
||||||
|
xm: "应急救援演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模拟地赛发生后的致授行动",
|
||||||
|
lxfs: " 叙援物资储备不足",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "已完成",
|
||||||
|
|
||||||
|
}, {
|
||||||
|
xm: "电力抢修演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模拟电网故障，清练抢修流程",
|
||||||
|
lxfs: " 叙援物资储备不足",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "进行中",
|
||||||
|
|
||||||
|
}, {
|
||||||
|
xm: "大型活动安全保障演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模拟大型活动期问的安全保障",
|
||||||
|
lxfs: " 数援物资储备不足",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "进行中",
|
||||||
|
|
||||||
|
}, {
|
||||||
|
xm: "电力抢修演练",
|
||||||
|
xb: " 2024-09-15",
|
||||||
|
sfzh: "模拟电网故障，演练抢修流程",
|
||||||
|
lxfs: " 叙援物资储备不足",
|
||||||
|
zz: "张伟",
|
||||||
|
shgx: "13800138000",
|
||||||
|
jgdy: "已完成",
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options: [],
|
||||||
|
total: 0,
|
||||||
|
form1: {
|
||||||
|
name: "",
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
//添加之后的数组渲染按钮数组
|
||||||
|
tagList: [],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
created () { },
|
mounted() {
|
||||||
mounted () { },
|
this.getList();
|
||||||
methods: { },
|
this.remoteMethod();
|
||||||
computed: {}
|
},
|
||||||
}
|
methods: {
|
||||||
|
// 查询
|
||||||
|
addlist() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
resetTwo() {
|
||||||
|
this.form1 = { name: "", current: 1, size: 10 };
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.loading = false;
|
||||||
|
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save(refForm) {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 新增/修改规则重置
|
||||||
|
reset(formRef) {
|
||||||
|
if (this.mytitle == "新增人员") {
|
||||||
|
this.$refs[formRef].resetFields();
|
||||||
|
} else {
|
||||||
|
this.chakanxiangqing(this.form);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 查看编辑
|
||||||
|
async toDetail(rew, type) {
|
||||||
|
if (type == 0) {
|
||||||
|
// 查看
|
||||||
|
this.mytitle = "查看人员";
|
||||||
|
this.chakanxiangqing(rew);
|
||||||
|
} else if (type == 1) {
|
||||||
|
// 编辑
|
||||||
|
this.mytitle = "编辑考勤规则";
|
||||||
|
this.chakanxiangqing(rew);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delTable(rew) {
|
||||||
|
// 删除
|
||||||
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消删除",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 回显
|
||||||
|
async chakanxiangqing(rew) {
|
||||||
|
|
||||||
|
this.showCK = true;
|
||||||
|
},
|
||||||
|
remoteMethod() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 关闭
|
||||||
|
close() {
|
||||||
|
this.$refs["form"].resetFields();
|
||||||
|
this.showCK = false;
|
||||||
|
},
|
||||||
|
getPagination(res) {
|
||||||
|
this.form1.current = res.pageNum;
|
||||||
|
this.form1.size = res.pageSize;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
addAttendance() { },
|
||||||
|
addRules() {
|
||||||
|
this.mytitle = "新增人员";
|
||||||
|
this.showCK = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
exportList() {
|
||||||
|
this.$confirm("是否确认导出考勤点数据项?", "警告", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.exportLoading = true;
|
||||||
|
this.download(
|
||||||
|
"/jn/rule/export",
|
||||||
|
{
|
||||||
|
...this.form1,
|
||||||
|
},
|
||||||
|
"考勤规则" + new Date().getTime() + ".xlsx"
|
||||||
|
);
|
||||||
|
this.exportLoading = false;
|
||||||
|
})
|
||||||
|
.catch(() => { });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue