Compare commits
6 Commits
ec9e1ed07e
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5d3de61273 | |||
| be77d67c47 | |||
| 4573b25182 | |||
| 7f61aba9d6 | |||
| e5f326ba58 | |||
| cddb30aad7 |
@ -599,7 +599,7 @@ export const selectUserDeptPage = (data = {}) => {
|
||||
///unifiedLogin
|
||||
export const unifiedLogin = (data) => {
|
||||
return request({
|
||||
url: api + `/unifiedLogin`,
|
||||
url: api + `/ssoLogin`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
|
||||
492
src/assets/css/homeScreen.scss
Normal file
492
src/assets/css/homeScreen.scss
Normal file
@ -0,0 +1,492 @@
|
||||
.bigScrenn {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background: #001022;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
.headBox {
|
||||
position: absolute;
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
background: #001022;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
|
||||
.top-left {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
|
||||
.time {
|
||||
margin-left: 38px;
|
||||
font-style: italic;
|
||||
font-weight: bolder;
|
||||
|
||||
.timer {
|
||||
font-size: 24px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.week {
|
||||
color: #00ADFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-center {
|
||||
width: 340px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
color: #e6ffff;
|
||||
font-size: 15px;
|
||||
margin-left: 14px;
|
||||
line-height: 23px;
|
||||
|
||||
.dept {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meun {
|
||||
margin-left: 30px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.el-dropdown-tools {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgb(20, 135, 180);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
.el-dropdown-tools-n {
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #9ec6fc;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
margin-top: 2px;
|
||||
padding-top: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asideBox {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
height: calc(100vh - 72px);
|
||||
width: 442px;
|
||||
background: #263445;
|
||||
z-index: 2;
|
||||
|
||||
.boder-small {
|
||||
height: 32.5%;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.boder-middle {
|
||||
height: 66%;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.boder-big {
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boder-top {
|
||||
height: 280px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boder-center {
|
||||
height: calc(100% - 510px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boder-bottom {
|
||||
height: 230px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
height: 100%;
|
||||
padding: 6px 20px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box-title {
|
||||
padding: 0 10px 0 30px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.boxInfo {
|
||||
height: calc(100% - 70px);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.cntBoxInfo {
|
||||
height: calc(100% - 46px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBox {
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
|
||||
.imgBox {
|
||||
width: 111px;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
margin-top: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sircle {
|
||||
position: absolute;
|
||||
width: 73px;
|
||||
height: calc(100vh - 72px);
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.leftSiecle {
|
||||
@include sircle;
|
||||
background-size: 100% 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rightSiecle {
|
||||
@include sircle;
|
||||
right: 370px;
|
||||
background-size: 100% 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 尾部
|
||||
.footBox {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
z-index: 10;
|
||||
|
||||
.btnsBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
|
||||
.btnsItem {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.resourceBox {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 37px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 10px 10px 24px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.contant {
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.name {
|
||||
color: #00BFFF;
|
||||
}
|
||||
|
||||
.footerCheck {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.el-checkbox-group {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.resourceBoxOther {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.btnsItem:hover .resourceBox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
background: #08226a;
|
||||
left: 264px;
|
||||
top: 32px;
|
||||
width: 220px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
||||
.el-tag {
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: -15px;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid transparent;
|
||||
border-right-color: #08226a;
|
||||
z-index: 989;
|
||||
}
|
||||
}
|
||||
|
||||
.popoverKfd {
|
||||
position: absolute;
|
||||
background: #08226a;
|
||||
left: -199px;
|
||||
top: 100px;
|
||||
width: 270px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
||||
.el-tag {
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 270px;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid transparent;
|
||||
border-left-color: #08226a;
|
||||
z-index: 989;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialogBox {
|
||||
padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
background: url('~@/assets/images/dialog-bg.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
z-index: 999;
|
||||
border-radius: 4px;
|
||||
|
||||
>.title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
margin: 0 4px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #275288;
|
||||
margin-bottom: 6px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0));
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
border: none;
|
||||
position: relative;
|
||||
// border: 1px solid #275288;
|
||||
padding: 10px 0 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.addressBox {
|
||||
border-top: 1px solid #162f55;
|
||||
margin: 0 10px;
|
||||
// height: 30px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
img,
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
>.btnBox {
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.dp-default {
|
||||
border: 1px solid #3180ea;
|
||||
box-shadow: inset 0 0 18px #2b8ce6;
|
||||
background: #001022;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&.small {
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
padding: 0 6px;
|
||||
box-shadow: inset 0 0 10px #2b8ce6;
|
||||
font-size: 12px;
|
||||
|
||||
span,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background-color: #999;
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
margin-left: 3px;
|
||||
color: #fff;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.blue {
|
||||
background-color: #0b9ff4;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background-color: #e15923;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background-color: #e21c1c;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background-color: #d6d301;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #56db2d;
|
||||
}
|
||||
|
||||
&.mj {
|
||||
background-color: #4995fd;
|
||||
}
|
||||
|
||||
&.fj {
|
||||
background-color: #3ad2d4;
|
||||
}
|
||||
}
|
||||
|
||||
.xlStatus {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-bottom-left-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.line {
|
||||
background: #00bc65;
|
||||
}
|
||||
|
||||
.lineing {
|
||||
background: #AB0F0B;
|
||||
}
|
||||
|
||||
.unline {
|
||||
background: #808080;
|
||||
}
|
||||
BIN
src/assets/images/dialog-bg.png
Normal file
BIN
src/assets/images/dialog-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/images/dingwei.png
Normal file
BIN
src/assets/images/dingwei.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div :id="mapid" class="map"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
|
||||
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
|
||||
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
@ -75,7 +74,7 @@ const props = defineProps({
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) { }
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let mapLayer;
|
||||
let mapLayer1;
|
||||
@ -89,33 +88,27 @@ onMounted(() => {
|
||||
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:4490",
|
||||
crs: "EPSG:3857",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [94.36057012, 29.64276831],
|
||||
zoom: 15
|
||||
center: [94.36,29.65],
|
||||
zoom: 10
|
||||
},
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
map.addWMTSLayer(
|
||||
"http://89.0.23.24/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
|
||||
,
|
||||
{
|
||||
Service: "getImage",
|
||||
Type: "RGB",
|
||||
ZoomOffset: "0",
|
||||
V: "0.3",
|
||||
Zoom: "{z}",
|
||||
Row: "{y}",
|
||||
Col: "{x}"
|
||||
},
|
||||
{
|
||||
tileSize: 300
|
||||
}
|
||||
);
|
||||
map.addGaudLayer({
|
||||
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
||||
})
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
@ -173,7 +166,7 @@ onMounted(() => {
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
mapUtil.value.createLine(res);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
@ -204,6 +197,11 @@ onMounted(() => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
// 清除全部覆盖物
|
||||
emitter.on("removeElementAll", () => {
|
||||
mapUtil.value.removeElementAll();
|
||||
});
|
||||
|
||||
// 展示盘曲
|
||||
emitter.on("showGapText", (obj) => {
|
||||
mapUtil.value.gapText(obj);
|
||||
@ -302,6 +300,7 @@ onUnmounted(() => {
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
emitter.off("removeElementAll");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -324,35 +323,29 @@ onUnmounted(() => {
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
|
||||
&>img {
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div :id="mapid" class="map"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
|
||||
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
@ -74,7 +75,7 @@ const props = defineProps({
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
let map;
|
||||
let mapLayer;
|
||||
let mapLayer1;
|
||||
@ -88,27 +89,32 @@ onMounted(() => {
|
||||
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:3857",
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [94.36,29.65],
|
||||
zoom: 10
|
||||
center: [94.36057012, 29.64276831],
|
||||
zoom: 15
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
|
||||
|
||||
}
|
||||
}
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
map.addGaudLayer({
|
||||
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
||||
})
|
||||
map.addWMTSLayer(
|
||||
"/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap",
|
||||
{
|
||||
Service: "getImage",
|
||||
Type: "RGB",
|
||||
ZoomOffset: "0",
|
||||
V: "0.3",
|
||||
Zoom: "{z}",
|
||||
Row: "{y}",
|
||||
Col: "{x}"
|
||||
},
|
||||
{
|
||||
tileSize: 300
|
||||
}
|
||||
);
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
@ -166,7 +172,7 @@ onMounted(() => {
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res);
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
@ -197,11 +203,6 @@ onMounted(() => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
// 清除全部覆盖物
|
||||
emitter.on("removeElementAll", () => {
|
||||
mapUtil.value.removeElementAll();
|
||||
});
|
||||
|
||||
// 展示盘曲
|
||||
emitter.on("showGapText", (obj) => {
|
||||
mapUtil.value.gapText(obj);
|
||||
@ -300,7 +301,6 @@ onUnmounted(() => {
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
emitter.off("removeElementAll");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -323,29 +323,35 @@ onUnmounted(() => {
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
& > img {
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
|
||||
&>div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
@ -63,7 +63,9 @@ onMounted(() => {
|
||||
active.value = "LZ";
|
||||
});
|
||||
const logout = () => {
|
||||
store.dispatch("user/logout");
|
||||
window.opener = null;
|
||||
window.open('', '_self');
|
||||
window.close();
|
||||
store.commit("app/clearTag", null, { immediate: true });
|
||||
store.commit("permission/deleteRouter", { immediate: true });
|
||||
store.commit("user/deleteKeepLiiveRoute", "home");
|
||||
|
||||
@ -28,13 +28,12 @@ const updatePwd = () => {
|
||||
const store = useStore();
|
||||
|
||||
const logout = () => {
|
||||
store.dispatch("user/logout");
|
||||
store.commit("app/clearTag", null, {
|
||||
immediate: true
|
||||
});
|
||||
store.commit("permission/deleteRouter", {
|
||||
immediate: true
|
||||
});
|
||||
window.opener = null;
|
||||
window.open('', '_self');
|
||||
window.close();
|
||||
store.commit("app/clearTag", null, { immediate: true });
|
||||
store.commit("permission/deleteRouter", { immediate: true });
|
||||
store.commit("user/deleteKeepLiiveRoute", "home");
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -21,6 +21,11 @@ export const privateRoutes = [];
|
||||
* 公开路由表
|
||||
*/
|
||||
export const publicRoutes = [
|
||||
{
|
||||
path: "/oatuh_login",
|
||||
name: "oatuh_login",
|
||||
component: () => import("@/views/login/oatuh_login")
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="warning-container">
|
||||
<div class="warning-list noScollLine" v-infinite-scroll="scroll">
|
||||
<div
|
||||
@click="roadmap(item.zb)"
|
||||
@click="handelClick(item)"
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.listData"
|
||||
:key="index"
|
||||
@ -73,6 +73,12 @@ const scroll = () => {
|
||||
}
|
||||
};
|
||||
gettbGjclselectPage();
|
||||
//查看警组信息
|
||||
function handelClick(item) {
|
||||
emitter.emit("showJzInfo", item);
|
||||
}
|
||||
|
||||
|
||||
//画线
|
||||
const roadmap = (row) => {
|
||||
if (row && row.length > 0) {
|
||||
|
||||
@ -30,6 +30,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 警组弹框弹框 -->
|
||||
<PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,7 +43,32 @@ import Collection from "./components/collection.vue";
|
||||
import Warning from "./components/warning.vue";
|
||||
import BeOnDuty from "./components/beonDuty.vue";
|
||||
import Introduction from "./components/Introduction.vue";
|
||||
import { ref } from "vue";
|
||||
import PoliceGroupInfo from "./layout/streetInfo.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from "vue";
|
||||
const jzxqList = ref({}); //警组列表详情
|
||||
const show = reactive({
|
||||
jzgroup: false //展示警组弹窗
|
||||
});
|
||||
onMounted(() => {
|
||||
|
||||
// 展示警组
|
||||
emitter.on("showJzInfo", (res) => {
|
||||
show.jzgroup = res ? true : false;
|
||||
if (res) {
|
||||
jzxqList.value = res;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
354
src/views/home/layout/streetInfo.vue
Normal file
354
src/views/home/layout/streetInfo.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="dialogBox" :style="`left:${elLeft}px;top:${elTop}px`" draggable="true" ref="dialogBoxYpfx"
|
||||
@dragstart="dragstart($event)" @dragend="dragend($event)">
|
||||
<div class="title">
|
||||
<span class="mc">{{ props.data.cph }}</span>
|
||||
<span @click="close" class="close">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-Big-Box noScollLine">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-cnt">
|
||||
<div class="leftImg">
|
||||
<el-image style="width: 100%" :src="props.data.image" :hide-on-click-modal="true" close-on-press-escape
|
||||
fit="cover" lazy>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="rightInfo">
|
||||
<div>
|
||||
<span class="zjhm">驾驶员：</span>{{ props.data.cljsy }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="zjhm">车牌号：</span>{{ props.data.cph }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="zjhm">行驶路线：</span>{{ props.data.xlmc }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="zjhm">乘车人数：</span>{{ props.data.ccrs ? props.data.ccrs : 0 }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="zjhm">重点人员：</span>{{ props.data.zdrs ? props.data.zdrs : 0 }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="zjhm">途中乘车人数：</span>{{ props.data.ztscrs ? props.data.ztscrs : 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<img class="addImg" src="@/assets/images/dingwei.png" />
|
||||
<span>{{ props.data.xlmc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 视频播放区域 -->
|
||||
<div v-if="showVideo" class="video-container">
|
||||
<video ref="videoPlayer" class="video-player" controls autoplay muted :src="videoSrc">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
|
||||
<template #reference>
|
||||
<div class="btnBox">
|
||||
<button class="dp-default small" @click="onClickclgj">车辆轨迹</button>
|
||||
<button class="dp-default small" @click="onClickSpsd">{{showVideo.value?"关闭视频":"视频播放"}}</button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Axios from "axios";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { all } from "ol/events/condition";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const visible = ref(false);
|
||||
const dialogBoxYpfx = ref();
|
||||
const videoPlayer = ref();
|
||||
const showVideo = ref(false);
|
||||
const videoSrc = ref('');
|
||||
const initWidth = ref(0); //父元素宽度
|
||||
const initHeight = ref(0); //父元素高度
|
||||
const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
|
||||
const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
|
||||
const elLeft = ref(400); //元素左偏移量
|
||||
const elTop = ref(120); //元素右偏移量
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
console.log(val, 'val');
|
||||
visible.value = false;
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
initBodySize();
|
||||
});
|
||||
const onClickSpsd = () => {
|
||||
if (showVideo.value) {
|
||||
videoPlayer.value.pause();
|
||||
videoPlayer.value.currentTime = 0;
|
||||
} else {
|
||||
videoSrc.value = props.data.videoUrl || '/static/sample.mp4';
|
||||
}
|
||||
showVideo.value = !showVideo.value
|
||||
};
|
||||
|
||||
|
||||
const onClickclgj = () => {
|
||||
let row = props.data.zb
|
||||
if (row && row.length > 0) {
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [row[0][0], row[0][1]],
|
||||
zoomLevel: 12
|
||||
});
|
||||
emitter.emit("drawLineAnimation", {
|
||||
type: "solid",
|
||||
coords: row,
|
||||
isclear: true,
|
||||
flag: "lx"
|
||||
});
|
||||
}
|
||||
}
|
||||
//初始化
|
||||
const initBodySize = () => {
|
||||
initWidth.value = dialogBoxYpfx.value.clientWidth;
|
||||
initHeight.value = dialogBoxYpfx.value.clientHeight;
|
||||
};
|
||||
//拖拽开始
|
||||
const dragstart = (e) => {
|
||||
startClientX.value = e.clientX;
|
||||
startClientY.value = e.clientY;
|
||||
};
|
||||
//拖拽结束
|
||||
const dragend = (e) => {
|
||||
let x = e.clientX - startClientX.value;
|
||||
let y = e.clientY - startClientY.value;
|
||||
elLeft.value += x;
|
||||
elTop.value += y;
|
||||
};
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
visible.value = false;
|
||||
emitter.emit("showJzInfo", false);
|
||||
emitter.emit("deletePointArea", "lx");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.dialogBox {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 484px !important;
|
||||
|
||||
.video-container {
|
||||
margin: 10px auto;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
text-align: center; // 容器居中对齐
|
||||
.video-player {
|
||||
width: 100%;
|
||||
max-width: 400px; // 设置最大宽度
|
||||
height: 200px;
|
||||
display: block;
|
||||
margin: 0 auto; // 水平居中
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #275288;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-Big-Box {
|
||||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 10px 10px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
border-top: 2px solid #00bfff;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
background: #052955;
|
||||
|
||||
.card-cnt {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
margin-bottom: 4px;
|
||||
|
||||
.leftImg {
|
||||
width: 180px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rightInfo {
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
color: #0095FF;
|
||||
line-height: 28px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: #FF3A3A;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zjhm {
|
||||
line-height: 27px;
|
||||
color: #7CBFFF;
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.textflex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
color: #6585af;
|
||||
|
||||
.info {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.newinfo {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
padding-top: 6px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #3b3737;
|
||||
color: #fff;
|
||||
|
||||
.addImg {
|
||||
margin-right: 4px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.phtos {
|
||||
height: 110px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border-top: 1px dashed #3d3d3d;
|
||||
margin-top: 6px;
|
||||
box-sizing: border-box;
|
||||
|
||||
::v-deep .el-carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__container {
|
||||
height: 72%;
|
||||
}
|
||||
|
||||
.el-carousel__item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all-dialog .dialogBox>.btnBox {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time1 {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-collapse {
|
||||
width: 100%;
|
||||
--el-collapse-header-height: auto;
|
||||
--el-collapse-header-bg-color: transparent;
|
||||
--el-collapse-border-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__header {
|
||||
color: #00bfff;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__content {
|
||||
color: #fff;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.null {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
43
src/views/login/oatuh_login.vue
Normal file
43
src/views/login/oatuh_login.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template></template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useRouter } from "vue-router";
|
||||
import {
|
||||
setItem
|
||||
} from "@/utils/storage";
|
||||
const loginDialog = ref(false);
|
||||
const deptList = ref([]);
|
||||
const store = useStore();
|
||||
function redirectAuth() {
|
||||
|
||||
let token = location.hash.slice(20) || null;
|
||||
if (token != null) {
|
||||
debugger
|
||||
token = token.replace(/\ +/g, "");
|
||||
setItem("SSOTOKEN", token)
|
||||
handleLogin({ token: token});
|
||||
} else {
|
||||
window.location.href = `http://155.240.22.188:9020`;
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogin = (e) => {
|
||||
store.dispatch("user/oatuhLogin", e).then((res) => {
|
||||
// 登录后操作
|
||||
if (res.deptList.length === 1) {
|
||||
window.location.hash = "/";
|
||||
} else {
|
||||
deptList.value = [...res.deptList];
|
||||
loginDialog.value = true;
|
||||
authorization.value = res.jwtToken;
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
redirectAuth();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -7,7 +7,7 @@ const serverHost = "http://192.168.1.32:8066";
|
||||
// const serverHost = "http://127.0.0.1:8006"
|
||||
module.exports = {
|
||||
publicPath: "./",
|
||||
outputDir: "ylth",
|
||||
outputDir: "gj",
|
||||
assetsDir: "static",
|
||||
lintOnSave: false, //process.env.NODE_ENV === 'development',
|
||||
productionSourceMap: false,
|
||||
|
||||
Reference in New Issue
Block a user