修改大屏,添加弹窗

main
李劲龙 5 months ago
parent 21340f1e19
commit 36c20546a6

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

@ -1,168 +1,174 @@
// cover some element-ui styles
.app-main {
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
}
.el-upload__input {
display: none;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.cell {
.el-tag {
margin-right: 0px;
.el-upload__input {
display: none;
}
}
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
.el-tag {
margin-right: 0px;
}
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
margin-bottom: 10px;
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
.el-tag {
margin-right: 0px;
}
}
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
margin-bottom: 10px;
}
.el-upload-dragger {
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
height: 200px;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
}
// dropdown
.el-dropdown-menu {
a {
display: block
// dropdown
.el-dropdown-menu {
a {
display: block
}
}
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}
.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100% !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100% !important;
}
.el-pagination__jump {
margin-left: 0;
}
.el-pagination__jump {
margin-left: 0;
}
.el-table th.el-table__cell>.cell {
font-family: "Source Han Sans CN-Bold";
color: #333333;
.el-table th.el-table__cell>.cell {
font-family: "Source Han Sans CN-Bold";
color: #333333;
}
}
tbody .el-table__row .el-table__cell .cell {
font-family: "Source Han Sans CN-Regular";
color: #292F38;
}
tbody .el-table__row .el-table__cell .cell {
font-family: "Source Han Sans CN-Regular";
color: #292F38;
}
tbody .el-table__row .el-table__cell:first-child .cell {
color: #4D5158;
font-family: "DIN-Regular";
}
tbody .el-table__row .el-table__cell:first-child .cell {
color: #4D5158;
font-family: "DIN-Regular";
}
.el-dialog__header {
padding-top: 10px;
font-size: 16px;
font-family: "Source Han Sans CN-Regular";
background: #F8F9FA;
}
.el-dialog__header {
padding-top: 10px;
font-size: 16px;
font-family: "Source Han Sans CN-Regular";
background: #F8F9FA;
}
.el-dialog__headerbtn {
top: 14px;
}
.el-dialog__headerbtn {
top: 14px;
}
.el-form-item__label {
font-family: "Source Han Sans CN-Regular";
color: #292F38;
font-weight: normal;
}
.el-form-item__label {
font-family: "Source Han Sans CN-Regular";
color: #292F38;
font-weight: normal;
}
.el-select {
width: 100%;
}
.el-select {
width: 100%;
}
.el-dialog__body {
padding: 20px;
}
.el-dialog__body {
padding: 20px;
}
.el-dialog__footer {
padding-bottom: 20px;
padding-right: 20px;
}
.el-dialog__footer {
padding-bottom: 20px;
padding-right: 20px;
}
.el-descriptions-row th {
width: 15%;
background: #F5F7FA !important;
font-size: 14px;
font-family: "Source Han Sans CN-Medium" ;
font-weight: 500;
color: #292F38 !important;
}
.el-descriptions-row td {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
line-height: 40px;
color: #4D5158 !important;
}
//
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
.el-descriptions-row th {
width: 15%;
background: #F5F7FA !important;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #292F38 !important;
}
.el-descriptions-row td {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
line-height: 40px;
color: #4D5158 !important;
}
//
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
}

@ -9,6 +9,7 @@
@import './rightleft.scss';
@import './leaflet.scss';
@import './layout.scss';
@import './element-uitow2.scss';

@ -8,11 +8,11 @@
@click="JSONclick" />
<el-amap-ellipse :center="circleCenter" :radius="radius" :visible="true" :editable="false" :draggable="false"
@click="ellipseclick" :zIndex="8000" />
@click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
<el-amap-ellipse :center="circleCenterTow" :radius="radius" :visible="true" :editable="false" :draggable="false"
@click="ellipseclick" :zIndex="8000" />
@click="ellipseclick" :zIndex="8000":fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
<!-- -->
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
@ -162,9 +162,9 @@ export default {
roadline2: roadline2,
roadpoint: roadpoint,
roadpoint2: roadpoint2,
circleCenter: [121.211641, 32.459487],
circleCenter: [121.211641, 32.4569487],
circleCenterTow: [121.338284, 32.388852],
radius: [1800, 500],
radius: [1800, 700],
//
polygonOptions: {
strokeColor: '#00C5EC',
@ -184,28 +184,28 @@ export default {
id: 1,
name: "飞机",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/feiji.png")
imgSrc: require("@/assets/images/icon/weurneji.png")
},
{
position: [121.235712627230569, 32.447218823220901],
id: 2,
name: "对讲",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/baisebujin.png")
imgSrc: require("@/assets/images/icon/xuncha.png")
},
{
position: [121.318413448767714, 32.411908360092688],
id: 3,
name: "飞机",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/feiji.png")
imgSrc: require("@/assets/images/icon/weurneji.png")
},
{
position: [121.359751265879749, 32.38683020264299],
id: 4,
name: "对讲",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/baisebujin.png")
imgSrc: require("@/assets/images/icon/xuncha.png")
},
],
@ -326,7 +326,7 @@ export default {
}
::v-deep .person-popupmini {
min-height: 254px;
min-height: 270px;
.position {
img {

@ -26,13 +26,13 @@
</template>
</el-step>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="myxiuanlu.features[0].geometry.coordinates[0][0]" :zoom="zoom"
<el-amap ref="map" :center="myxiuanlu.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @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-layer-satellite :visible="true"></el-amap-layer-satellite>
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
@ -52,12 +52,13 @@
</template>
</el-step>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline2.features[0].geometry.coordinates[0][0]" :zoom="zoom"
<el-amap ref="map" :center="roadline2.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @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-layer-satellite :visible="true"></el-amap-layer-satellite>
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
@ -77,11 +78,12 @@
</template>
</el-step>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline.features[0].geometry.coordinates[0][0]" :zoom="zoom"
<el-amap ref="map" :center="roadline.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @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-layer-satellite :visible="true"></el-amap-layer-satellite>
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
@ -142,7 +144,8 @@ export default {
init(map) {
this.map = map;
// o.setMapStyle('amap://styles/darkblue')
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
// map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
map.setMapStyle("amap://styles/whitesmoke");
console.log(this.map.getCenter())
console.log(this.$refs.map.$$getInstance())
},

@ -16,34 +16,37 @@
<div class="item left-list-title" :style="itemTwo">
<title-box title="无人机实时画面"></title-box>
<div class="rightleft-title">
号无人机
号无人机
</div>
<div class="isjiankong">
<div class="isjiankong" @click="gotoshipin">
<img src="@/assets/images/jiankong.jpg" alt="">
</div>
<div class="rightleft-title">
号无人机
<div class="rightleft-title" >
号无人机
</div>
<div class="isjiankong">
<div class="isjiankong" @click="gotoshipin">
<img src="@/assets/images/jiankong.jpg" alt="">
</div>
<div class="rightleft-title">
<div class="rightleft-title" >
三号无人机
</div>
<div class="isjiankong">
<div class="isjiankong" @click="gotoshipin">
<img src="@/assets/images/jiankong.jpg" alt="">
</div>
</div>
</div>
<Mapdialogyuyinshipin ref="Mapdialogyuyinshipin"></Mapdialogyuyinshipin>
</div>
</template>
<script>
import titleBox from '@/views/components/title/index.vue'
import Mapdialogyuyinshipin from "@/views/components/Mapdialogyuyinshipin/index.vue"
export default {
name: 'mapLeftContent',
components: { titleBox },
components: { titleBox, Mapdialogyuyinshipin },
data() {
return {
@ -61,7 +64,11 @@ export default {
},
methods: {
gotoshipin() {
console.log(111);
this.$refs.Mapdialogyuyinshipin.open("person")
}
},
mounted() {
@ -85,10 +92,13 @@ export default {
}
.isjiankong{
.isjiankong {
width: 100%;
padding: 20px;
img{
cursor: pointer;
img {
width: 100%;
height: 150px;
}

@ -27,16 +27,16 @@
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[0, 0]" :closeWhenClickMap="true"
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
<div class="person-popup">
<div class="person-popup" v-if="markername=='设备'">
<div class="person-title">
<div class="title">人员信息</div>
<div class="title">{{ markername }}信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">设备编号</div>
<div class="name">设备编号</div>
</div>
<div class="position">{{ "131654656" }}</div>
</div>
@ -75,7 +75,7 @@
</div>
<div class="position">{{ 79898 }}</div>
</div>
<div class="btns">
<div class="btns" >
<div @click="travelPath()"></div>
<div @click="shareClick"></div>
<!-- <div @click="watchClick"></div>
@ -83,6 +83,83 @@
</div>
</div>
</div>
<div class="person-popup" v-if="markername=='车辆'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">驾驶员姓名</div>
</div>
<div class="position">{{ "张三" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">联系方式</div>
</div>
<div class="position">{{ "1361111111" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">车辆类型</div>
</div>
<div class="position">{{ "轿车" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">车牌号</div>
</div>
<div class="position">苏Exxx</div>
</div>
</div>
</div>
<div class="person-popup" v-if="markername=='人员'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">姓名</div>
</div>
<div class="position">{{ "张三" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">部门</div>
</div>
<div class="position">{{ "轿车" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">联系方式</div>
</div>
<div class="position">{{ "1361111111" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">当前位置</div>
</div>
<div class="position">xxxxx</div>
</div>
</div>
</div>
</el-amap-info-window>
<el-amap-info-window v-if="personInfoTow.visible" anchor="bottom-center" :offset="[0, 0]"
@ -126,6 +203,7 @@
<leftrightEcahts></leftrightEcahts>
<righttEcahts></righttEcahts>
<MapHuodongdialog ref="MapHuodongdialog"></MapHuodongdialog>
<Mapdialogyuyin ref="Mapdialogyuyin"></Mapdialogyuyin>
</div>
</template>
@ -145,6 +223,7 @@ import myxiuanlu from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
//
import ZhanshiTubiao from "@/views/components/ZhanshiTubiao/index.vue"
import MapHuodongdialog from "@/views/components/MapHuodongdialog/index.vue"
import Mapdialogyuyin from "@/views/components/Mapdialogyuyin/index.vue"
//
import leftrightEcahts from "./leftrightEcahts/index.vue"
@ -152,7 +231,7 @@ import righttEcahts from "./righttEcahts/index.vue"
export default {
name: "map-view",
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapHuodongdialog },
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapHuodongdialog,Mapdialogyuyin },
data() {
return {
zoom: 11.8,
@ -179,61 +258,62 @@ export default {
visible: true,
draggable: false
},
//
markername:"设备",
//
markers: [
{
position: [121.183697866903292, 32.460227941215508],
id: 1,
name: "车",
name: "车",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png")
},
{
position: [121.235712627230569, 32.447218823220901],
id: 2,
name: "车",
name: "车",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png")
},
{
position: [121.318413448767714, 32.411908360092688],
id: 3,
name: "车",
name: "车",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png")
},
{
position: [121.359751265879749, 32.38683020264299],
id: 4,
name: "车",
name: "车",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png")
},
{
position: [121.23060190230413, 32.393323905814675],
id: 1,
name: "对讲",
name: "设备",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/dainbingshebei.png")
},
{
position: [121.252903247437729, 32.397970019384182],
id: 2,
name: "对讲",
name: "设备",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/dainbingshebei.png")
},
{
position: [121.304939719416154, 32.402383827275209],
id: 3,
name: "对讲",
name: "设备",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/dainbingshebei.png")
},
{
position: [121.3418763222937, 32.418412919089988],
id: 4,
name: "对讲",
name: "设备",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/dainbingshebei.png")
},
@ -322,7 +402,7 @@ export default {
//mark
clickArrayMarker(e) {
console.log(e);
this.markername = e.name
this.personInfo.visible = true
this.personInfo.position = e.position
this.personInfo.info = e.info
@ -341,7 +421,10 @@ export default {
},
taskClick() { },
watchClick() { },
travelPath() { },
travelPath() {
this.$refs.Mapdialogyuyin.open("person")
},
//
markersradio(type) {

@ -165,8 +165,7 @@ export default {
cursor: pointer;
div {
color: #d71818da;
font-family: 'Source Han Sans CN--Bold';
color: #ffffff;
font-size: 18px;
}

@ -17,24 +17,24 @@
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
<div class="markerStyles">
<!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="greenyellow" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed" :strokeWeight="4"/>
</div>
</el-amap-marker>
<el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + 5"
<!-- <el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + 5"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 3 || radio == 1">
<div class="markerStyles">
<!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="red" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed"
:strokeWeight="4"
/>
</div>
</el-amap-marker>
</el-amap-marker> -->
</el-amap>
</div>
<!-- 图层展示 -->
@ -99,7 +99,7 @@ export default {
{
position: [121.183697866903292, 32.460227941215508],
id: 1,
name: "本地重点人员",
name: "张三",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
pathlist: [[121.183697866903292, 32.460227941215508],[121.173697866903292, 32.430227941215508],]
@ -107,7 +107,7 @@ export default {
{
position: [121.235712627230569, 32.447218823220901],
id: 2,
name: "本地重点人员",
name: "李四",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
pathlist: [[121.235712627230569, 32.447218823220901],[ 121.245712627230569, 32.427218823220901 ],]
@ -115,7 +115,7 @@ export default {
{
position: [121.318413448767714, 32.411908360092688],
id: 3,
name: "本地重点人员",
name: "王五",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
,
@ -124,7 +124,7 @@ export default {
{
position: [121.359751265879749, 32.38683020264299],
id: 4,
name: "本地重点人员",
name: "赵六",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
,
@ -135,7 +135,7 @@ export default {
{
position: [121.24012643512161, 32.392859294457729],
id: 1,
name: "外地重点人员",
name: "外地人口",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.227349622803477, 32.389607014959076],[121.24012643512161, 32.392859294457729],]
@ -143,7 +143,7 @@ export default {
{
position: [121.316090391982954, 32.406100718130809 ],
id: 2,
name: "外地重点人员",
name: "外地人口",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.252903247437729, 32.397970019384182],[ 121.316090391982954, 32.406100718130809 ],]
@ -151,7 +151,7 @@ export default {
{
position: [121.295647492277155, 32.404939189738435],
id: 3,
name: "外地重点人员",
name: "外地人口",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.295647492277155, 32.404939189738435],[ 121.316090391982954, 32.426100718130809 ],]
@ -159,7 +159,7 @@ export default {
{
position: [121.3418763222937, 32.418412919089988],
id: 4,
name: "外地重点人员",
name: "外地人口",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png")
,
@ -246,6 +246,8 @@ export default {
}
::v-deep .marker-Text {
position: absolute;
top: -30px;
width: 100px;
}
</style>

@ -65,11 +65,9 @@ export default {
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
min: 0,
max: 100,
interval: 20,
min: 200,
max: 600,
interval: 50,
// y 线
axisLabel: {
textStyle: {
@ -150,7 +148,7 @@ export default {
}
},
borderWidth: 0, // 线
data: [22, 33, 44, 55, 66, 77, 188, 38, 28, 58, 68, 58, 48]
data: [220, 330, 440, 550, 606, 770, 288, 380, 280, 500, 680, 580, 480]
}]
}

@ -47,7 +47,7 @@
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="green" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线') }":strokeWeight="4" />
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[10, 10]" :closeWhenClickMap="true"
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
<div class="infowindow-box" v-if="titleShow == '人员'">
<div class="infowindow-box-title">
@ -70,7 +70,7 @@
</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><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="infowindow-box-item infowindow-box-itemTow">
<div class="isisbox">
@ -91,7 +91,7 @@
<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><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="infowindow-box-item infowindow-box-itemTow">
<div class="isisbox">
@ -111,7 +111,7 @@
<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><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="infowindow-box-item infowindow-box-itemTow">
<div class="isisbox">
@ -202,7 +202,7 @@ export default {
data() {
return {
mytitle: "地图扎点",
zoom: 11.8,
zoom: 12,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
@ -289,6 +289,8 @@ export default {
},
JSONclick() { },
clickArrayMarker(e) {
console.log(e);
this.personInfo.visible = false
if (e.type) {
console.log(e);
this.personInfo.visible = true
@ -296,8 +298,6 @@ export default {
this.personInfo.info = {}
this.titleShow = e.type
console.log(this.personInfo);
} else {
console.log(e);
this.personInfo.visible = true

@ -7,26 +7,14 @@
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker
v-model="queryTime.fromTime"
align="right"
:clearable="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="开始时间"
>
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker
v-model="queryTime.toTime"
align="right"
:clearable="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="结束时间"
>
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
@ -34,48 +22,89 @@
</div>
</div>
<div class="searchBtn">
<el-button
type="primary"
size="mini"
icon="el-icon-search"
@click="searchList"
>查询</el-button
>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo"
>重置</el-button
>
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList"></el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo"></el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div>轨迹地图</div>
<div id="gjMap"></div>
<div id="gjMap">
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms"
element-loading-background="rgba(11, 34, 72, 0.8)" @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-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, '线') }" :strokeWeight="4" />
<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, '线') }" :strokeWeight="4" />
</el-amap>
</div>
</div>
</el-row>
</div>
</template>
<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"
export default {
name:"tabThree",
props:{
id:{
type:Number,
default:null,
name: "tabThree",
props: {
id: {
type: Number,
default: null,
}
},
data() {
return {
activities: [],
loading:false,
queryTime:{
fromTime:"",
toTime:""
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
polygonOptions: {
strokeColor: '#00C5EC',
fillColor: '#00AEFF'
},
zoom: 11.8,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
draggable: false,
visible: true,
changshazhen: changshazhen,
myxiuanlu: myxiuanlu,
roadline2: roadline2,
}
},
mounted(){
mounted() {
},
methods:{
methods: {
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() { },
searchList() {
},
//
@ -84,7 +113,7 @@ export default {
//
getList() {
this.loading = true;
jProjectFund(this.id).then(res=>{
jProjectFund(this.id).then(res => {
let arr = [];
res.data.forEach(element => {
let obj = {};
@ -96,17 +125,17 @@ export default {
});
this.activities = arr;
this.loading = false;
}).catch((err)=>{
}).catch((err) => {
// console.log(err);
this.activities = [];
this.loading = false;
})
},
formatDate(dateString,id) {
formatDate(dateString, id) {
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
if(id == 1) {
if (id == 1) {
return `${year}${month}${day}`;
} else {
return `${year}-${month}-${day}`;
@ -118,10 +147,12 @@ export default {
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
@ -129,27 +160,34 @@ export default {
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
@ -159,6 +197,7 @@ export default {
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* placeholder */
// font-size: 14px;
@ -170,6 +209,7 @@ export default {
// }
}
}
.symbol {
width: 14px;
// height: 6px;
@ -179,6 +219,7 @@ export default {
}
}
}
.btns {
width: 92px;
height: 35px;
@ -188,10 +229,12 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
@ -200,15 +243,16 @@ export default {
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
#gjMap {
width: 700px;
height: 400px;
background-color: red;
width: 900px;
height: 350px;
}
</style>

@ -2,17 +2,21 @@
<div class="L-unitInfo">
<el-row>
<el-col :span="12" class="left-img-box">
<div class="img-top-box">
<div class="img-box img-top-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">正面照</div>
</div>
<eluploadimg></eluploadimg>
</div>
<div class="img-bottom-box">
<div class="img-box img-bottom-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">其他照片</div>
</div>
<eluploadimg></eluploadimg>
</div>
</el-col>
<el-col :span="12" class="right-img-box">
@ -20,31 +24,39 @@
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">身份证照片</div>
</div>
<div class="rightleft">
<eluploadimgshenfenz></eluploadimgshenfenz>
<eluploadimgshenfenz></eluploadimgshenfenz>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import eluploadimg from "@/views/components/eluploadimg/index.vue"
import eluploadimgshenfenz from "@/views/components/eluploadimgshenfenz/index.vue"
export default {
name:"tabTwo",
name: "tabTwo",
components: { eluploadimg,eluploadimgshenfenz },
data() {
return {
// 01 02
userType: this.$store.state.user.userType,
}
},
props:{
info:{
type:Object,
default:()=>{
props: {
info: {
type: Object,
default: () => {
return {}
}
}
},
methods:{
goEnterprice(creditCode){
methods: {
goEnterprice(creditCode) {
// console.log(creditCode);
if(this.userType == '01') {
if (this.userType == '01') {
this.$router.push({
name: 'EenterInfo',
query: { userId: this.info.id, creditCode: creditCode }
@ -62,17 +74,20 @@ export default {
<style lang="scss" scoped>
.L-unitInfo {
padding: 10px;
.enterprise-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dataCloudMap-birght {
width: 6px;
width: 6px;
height: 18px;
background: #0086FF;
box-shadow: 3px 0 3px 0px #0086FF;
border-radius: 5px 5px 5px 5px;
}
.enterprise-header-title {
font-family: AlibabaPuHuiTiB;
margin: 0 10px;
@ -81,9 +96,20 @@ export default {
color: #333333;
}
}
.left-img-box {
display: flex;
flex-direction: column;
}
}
.img-box {
margin-bottom: 20px;
}
.rightleft{
width: 100%;
display: grid;
grid-template-columns: 45% 45%;
// grid-row-gap: 10px;
}
</style>

@ -45,21 +45,17 @@
</el-row>
</div>
<el-row class="base-info-bootm-box">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
style="color: #edeef0"
>
<el-tabs v-model="activeName" @tab-click="handleClick" style="color: #edeef0">
<el-tab-pane label="详细信息" name="first" />
<el-tab-pane label="人脸库" name="second" />
<el-tab-pane label="轨迹回放" name="third" />
<el-tab-pane label="边界预警" name="four" />
</el-tabs>
<div class="bottom-box-component">
<tab-one v-if="activeName =='first'"></tab-one>
<tab-two v-if="activeName =='second'"></tab-two>
<tab-three v-if="activeName =='third'"></tab-three>
<tab-four v-if="activeName =='four'"></tab-four>
<tab-one v-if="activeName == 'first'"></tab-one>
<tab-two v-if="activeName == 'second'"></tab-two>
<tab-three v-if="activeName == 'third'"></tab-three>
<tab-four v-if="activeName == 'four'"></tab-four>
</div>
</el-row>
</div>
@ -69,25 +65,25 @@
import { tabOne, tabTwo, tabThree, tabFour, tabFive, } from "./components"
export default {
name: '',
components:{
components: {
tabOne,
tabTwo,
tabThree,
tabFour,
tabFive,
},
data () {
data() {
return {
activeName: "first",
}
},
mounted () { },
mounted() { },
methods: {
handleClick(e) {
if (this.activeName == "first") {
} else if (this.activeName == "second") {
} else if (this.activeName == "third") {
} else if(this.activeName == "four") {
} else if (this.activeName == "four") {
}
},
},
@ -98,23 +94,28 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.box-top {
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
.enterprise-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dataCloudMap-birght {
width: 6px;
width: 6px;
height: 18px;
background: #0086FF;
box-shadow: 3px 0 3px 0px #0086FF;
border-radius: 5px 5px 5px 5px;
}
.enterprise-header-title {
font-family: AlibabaPuHuiTiB;
margin: 0 10px;
@ -123,51 +124,70 @@ export default {
color: #333333;
}
}
.base-info-box {
font-family: "Source Han Sans CN-Regular";
margin: 20px 0;
padding: 0px 10px;
display: flex;
.img-box {
font-size: 16px;
display: flex;
span {
span {
width: 80px;
}
img {
flex: 1;
height: 150px;
}
}
.info-items {
display: grid;
grid-template-columns: 1fr;
row-gap: 30px;
.item {
display: flex;
align-items: center;
font-family: "Source Han Sans CN-Regular";
font-size: 16px;
span {
flex: 1;
}
}
}
.info-cause {
display: flex;
align-items: center;
margin-top: 20px;
div {
font-size: 16px;
div {}
}
.specific-cause {
font-family: "Source Han Sans CN-Regular";
font-size: 16px;
border-radius: 3px;
border: 1px solid #ccc;
padding: 5px 10px;
}
}
}
.base-info-bootm-box {
.base-info-bootm-box {
flex: 1;
background-color: #fff;
padding: 10px 0;
border-radius: 5px;
overflow: auto;
::v-deep .el-tabs {
.el-tabs__item {
width: 150px;

@ -67,7 +67,6 @@
</div>
<div class="contentMap">
<!-- <div id="personageTrackMap">
</div> -->
<el-amap element-loading-background="rgba(16, 49, 92, 0.8)" ref="personMap"
map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="center" :zoom="zoom"
@ -79,8 +78,6 @@
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
:draggable="true" />
</el-amap>
<!-- <img src="@/assets/images/minMap.png" alt="" /> -->
</div>

@ -0,0 +1,128 @@
<template>
<dia-log ref="dialog" width="45%" :title="title" :type="1">
<div class="personage-track">
<img src="@/assets/images/phone.png" alt="">
</div>
</dia-log>
</template>
<script>
import diaLog from "@/views/components/Eldialog/index.vue";
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import roadline1 from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
export default {
components: { diaLog },
data() {
return {
title: "语音呼叫",
person: false,
personItem: null,
queryTime: {
fromTime: "",
toTime: "",
},
zoom: 11,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
polygonOptions: {
strokeColor: '#00C5EC', // 线使16#00D3FC
fillColor: 'rgba(64,175,255,0.4)' // 使16#00B2D5
},
polygonOptionsTwo: {
strokeColor: '#ffffff', // 线使16#00D3FC
fillColor: 'rgba(64,175,255,1)' // 使16#00B2D5
},
changshazhen: changshazhen,
roadline1: roadline1,
track: null,
layers: {
layer: null,
}
};
},
methods: {
init(map) {
this.map = map;
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
this.layers.layer = new AMap.OverlayGroup();
},
open(person, item) {
// console.log(person)
// console.log(item);
if (person == "person") {
this.title = "语音呼叫";
this.person = true;
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.query();
} else {
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.title = "语音呼叫";
this.person = false;
}
this.$refs.dialog.open("1");
// this.$nextTick(()=>{
// this.initMap();
// })
},
Close() {
this.$refs.dialog.Close();
},
//
reset() {
// Object.keys(this.queryTime).forEach(key => { this.queryTime[key] = '' })
// if (this.map.getAllOverlays('polyline')) {
// this.map.remove(this.map.getAllOverlays('polyline'));
// }
const mapInstance = this.$refs.personMap.$$getInstance();
// setFitView GeoJSON
mapInstance.setFitView();
},
//
query() {
},
//
getCurrentTime(id) {
//
const now = new Date();
//
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 01
const day = String(now.getDate()).padStart(2, '0'); //
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
//
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const formattedTime = `${year}-${month}-${day} 00:00:00`;
if (id == 1) {
return formattedDateTime;
} else {
return formattedTime;
}
},
},
};
</script>
<style lang="scss" scoped>
.personage-track {
height: 500px;
width: 270px;
img {
height: 100%;
}
}
::v-deep .el-dialog {
width: 18.5% !important;
}
</style>

@ -0,0 +1,130 @@
<template>
<dia-log ref="dialog" width="45%" :title="title" :type="1">
<div class="personage-track">
<img src="@/assets/images/jiankong.jpg" alt="">
</div>
</dia-log>
</template>
<script>
import diaLog from "@/views/components/Eldialog/index.vue";
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import roadline1 from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
export default {
components: { diaLog },
data() {
return {
title: "语音呼叫",
person: false,
personItem: null,
queryTime: {
fromTime: "",
toTime: "",
},
zoom: 11,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
polygonOptions: {
strokeColor: '#00C5EC', // 线使16#00D3FC
fillColor: 'rgba(64,175,255,0.4)' // 使16#00B2D5
},
polygonOptionsTwo: {
strokeColor: '#ffffff', // 线使16#00D3FC
fillColor: 'rgba(64,175,255,1)' // 使16#00B2D5
},
changshazhen: changshazhen,
roadline1: roadline1,
track: null,
layers: {
layer: null,
}
};
},
methods: {
init(map) {
this.map = map;
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
this.layers.layer = new AMap.OverlayGroup();
},
open(person, item) {
// console.log(person)
// console.log(item);
if (person == "person") {
this.title = "语音呼叫";
this.person = true;
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.query();
} else {
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.title = "语音呼叫";
this.person = false;
}
this.$refs.dialog.open("1");
// this.$nextTick(()=>{
// this.initMap();
// })
},
Close() {
this.$refs.dialog.Close();
},
//
reset() {
// Object.keys(this.queryTime).forEach(key => { this.queryTime[key] = '' })
// if (this.map.getAllOverlays('polyline')) {
// this.map.remove(this.map.getAllOverlays('polyline'));
// }
const mapInstance = this.$refs.personMap.$$getInstance();
// setFitView GeoJSON
mapInstance.setFitView();
},
//
query() {
},
//
getCurrentTime(id) {
//
const now = new Date();
//
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 01
const day = String(now.getDate()).padStart(2, '0'); //
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
//
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const formattedTime = `${year}-${month}-${day} 00:00:00`;
if (id == 1) {
return formattedDateTime;
} else {
return formattedTime;
}
},
},
};
</script>
<style lang="scss" scoped>
.personage-track {
width: 100%;
img {
width: 100%;
}
}
::v-deep .el-dialog {
width: 45% !important;
}
::v-deep .el-dialog__body{
padding: 20px !important;
}
</style>

@ -14,30 +14,30 @@
<div class="ismytitle">
图层展示
</div>
<div class="list" @click="changeMap(1)">
<!-- <div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
<img src="@/assets/images/icon/renkouzonghui.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 1">
<span>重点人员总汇</span>
</div>
</div>
</div> -->
<div class="list" @click="changeMap(2)">
<div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
<div class="leftbg action-map" >
<img src="@/assets/images/icon/zhongdianren2.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 2">
<span>本地重点人员</span>
<div class="rightbg" >
<span>重点人员</span>
</div>
</div>
<div class="list" @click="changeMap(3)">
<!-- <div class="list" @click="changeMap(3)">
<div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
<img src="@/assets/images/icon/zhongdianren.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 3">
<span>外地重点人员</span>
</div>
</div>
</div> -->
</div>
<!-- -->
<div v-show="showType == '重大活动保障'" class="zhongdahuodong">
@ -76,7 +76,7 @@
</div>
<div class="list" >
<div class="leftbg" :class="'action-map'">
<img src="@/assets/images/icon/feiji.png" alt="" />
<img src="@/assets/images/icon/weurneji.png" alt="" />
</div>
<div class="rightbg">
<span>无人机</span>
@ -84,7 +84,7 @@
</div>
<div class="list" >
<div class="leftbg" :class="'action-map'">
<img src="@/assets/images/icon/baisebujin.png" alt="" />
<img src="@/assets/images/icon/xuncha.png" alt="" />
</div>
<div class="rightbg">
<span>巡查事件</span>

@ -0,0 +1,62 @@
<template>
<div>
<el-upload action="#" list-type="picture-card" :auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
fileList:[]
}
},
created() { },
mounted() {
},
methods: {
handleRemove(file) {
console.log(file);
console.log(this.dialogImageUrl);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(file);
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
}
},
computed: {}
}
</script>
<style scoped lang='scss'></style>

@ -0,0 +1,106 @@
<template>
<div class="dlodbox">
<el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="0"
:on-success="handleUploadSuccess" disabled>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
<div class="shangchuanzhaopian">请上传国徽侧照片</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
fileList: []
}
},
created() { },
mounted() {
},
methods: {
handleRemove(file) {
console.log(file);
console.log(this.dialogImageUrl);
console.log(this.fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(file);
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
handleUploadSuccess(response, file) {
// url
console.log(file);
// this.uploadedFiles.push({ url: URL.createObjectURL(file.raw) });
//
},
huidiao(type){
console.log(type);
}
},
computed: {}
}
</script>
<style scoped lang='scss'>
.dlodbox {
position: relative;
}
.el-icon-plus {
font-size: 35px;
}
.shangchuanzhaopian {
position: relative;
bottom: 50px;
z-index: 5;
font-family: "Source Han Sans CN-Regular";
font-size: 20px;
color: #8c939d;
}
::v-deep .el-upload--picture-card,
.el-upload-list__item {
width: 350px;
height: 200px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
width: 350px;
height: 200px;
}
</style>

@ -1,7 +1,7 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3>
<h3 class="title">综合治理协同平台</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"

@ -1,7 +1,7 @@
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3>
<h3 class="title">综合治理协同平台</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

Loading…
Cancel
Save