1223
This commit is contained in:
13684185576
491
src/assets/css/homeScreen.scss
Normal file
491
src/assets/css/homeScreen.scss
Normal file
@ -0,0 +1,491 @@
|
|||||||
|
.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-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;
|
||||||
|
}
|
||||||
262
src/views/home/layout/streetInfo.vue
Normal file
262
src/views/home/layout/streetInfo.vue
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
<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.jzMc ? props.data.jzMc : props.data.fzrXm + "巡组" }}</span>
|
||||||
|
<span @click="close" class="close">
|
||||||
|
<el-icon><Close /></el-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-Big-Box noScollLine">
|
||||||
|
<div class="infoBox">
|
||||||
|
<div class="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
|
||||||
|
{{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
负责人：<span class="tag mj">民警</span>
|
||||||
|
<el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh " placement="bottom">
|
||||||
|
<span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
开始时间：<span class="name">{{ props.data.bbkssj }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
(计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
组员：
|
||||||
|
<span v-for="(item, index) in props.data.pbmj" :key="index" class="jc_box">
|
||||||
|
<span class="tag mj">民警</span>
|
||||||
|
<span class="name">{{ item.jlxm }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-for="(item, index) in props.data.pbfj" :key="index" class="jc_box">
|
||||||
|
<span class="tag fj">辅警</span>
|
||||||
|
<span class="name">{{ item.jlxm }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
单位：<span class="name">{{ props.data.ssbm }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text zblist" v-if="props.data.txzb.length <= 0">
|
||||||
|
通讯装备：<span>暂无数据</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text zblist" v-else>
|
||||||
|
<el-collapse v-model="props.data.openTxzb">
|
||||||
|
<el-collapse-item title="通讯装备：" name="1">
|
||||||
|
<span class="zb-item" v-for="(item, index) in props.data.txzb" :key="index">
|
||||||
|
<span class="sbinfo">{{ item.sbmc }}</span>
|
||||||
|
<el-tooltip :content="'呼叫(' + item.hh + ')'" placement="bottom">
|
||||||
|
<img style="width: 22px" @click="getZFJLY(item)"/>
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text zblist" v-if="props.data.jyqx.length <= 0">
|
||||||
|
常用装备：<span>暂无数据</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text zblist" v-else>
|
||||||
|
<el-collapse v-model="props.data.openJyqx">
|
||||||
|
<el-collapse-item title="常用装备：" name="1">
|
||||||
|
<span class="zb-item" v-for="(item, index) in props.data.jyqx" :key="index">
|
||||||
|
<span class="qxinfo">{{ item.qxmc }}（{{ item.qxsl }}）个</span>
|
||||||
|
</span>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
<div class="text zblist">
|
||||||
|
警用车辆：
|
||||||
|
<span class="zb-item" v-for="(item, index) in props.data.pbcl" :key="index">
|
||||||
|
<span class="qxinfo">{{ item.jdchphm }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-if="props.data.pbcl.length <= 0">暂无</span>
|
||||||
|
</div>
|
||||||
|
<div class="text" v-if="props.data.bz != ''">
|
||||||
|
备注： <span class="name">{{ props.data.bz }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
|
||||||
|
<template #reference>
|
||||||
|
<div class="btnBox">
|
||||||
|
<button class="dp-default small" @click="onClickZbyj">周边预警</button>
|
||||||
|
<button class="dp-default small" @click="onClickSpsd">视频随动</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 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) => {
|
||||||
|
visible.value = false;
|
||||||
|
},{
|
||||||
|
immediate:true,
|
||||||
|
deep:true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
onMounted(() => {
|
||||||
|
initBodySize();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//初始化
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/css/homeScreen.scss";
|
||||||
|
.dialogBox {
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
width: 484px !important;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.infoBox {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px !important;
|
||||||
|
.text {
|
||||||
|
color: #00bfff;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: #3ad2d4;
|
||||||
|
}
|
||||||
|
.jc_box {
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
.zblist {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.zb-item {
|
||||||
|
margin-right: 10px;
|
||||||
|
.sbinfo {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-left: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.qxinfo {
|
||||||
|
color: rgb(127, 177, 217);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border: 1px solid rgb(61, 116, 219);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: inline;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
Reference in New Issue
Block a user