<template>
|
<div class="trigger" style="margin-top: 140px; margin-right: 10px">
|
<div class="user">
|
<el-avatar
|
class="user_btn"
|
:size="70.6"
|
icon="el-icon-user-solid"
|
alt="个人中心"
|
></el-avatar>
|
<div class="transition-box">
|
<ul>
|
<li @click="showLayer()">标绘数据</li>
|
<li @click="dialogFormVisible = true">修改密码</li>
|
</ul>
|
</div>
|
</div>
|
<el-dialog
|
append-to-body
|
title="修改密码"
|
:visible.sync="dialogFormVisible"
|
width="30%"
|
:close-on-click-modal="false"
|
custom-class="psdDialog"
|
>
|
<el-form :model="form" ref="pwdForm" :rules="rules">
|
<el-form-item label="原密码">
|
<el-input
|
show-password
|
v-model="form.oldPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input
|
show-password
|
v-model="form.newPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="checkPassword">
|
<el-input
|
show-password
|
v-model="form.checkPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="closeDig('pwdForm')">取 消</el-button>
|
<el-button type="primary" @click="onSubmit('pwdForm')">确 定</el-button>
|
</div>
|
</el-dialog>
|
<div class="rightTool">
|
<el-button class="searchElBg" @click="showInput">
|
<div class="searchBg"></div>
|
<img
|
class="searchBtn"
|
v-if="!isShowInput"
|
src="@/assets/img/right/search1.png"
|
/>
|
<img
|
class="searchBtn"
|
v-else
|
src="@/assets/img/right/closeinput1.png"
|
/>
|
</el-button>
|
|
<search v-show="isShowInput" ref="search" />
|
</div>
|
<div class="user_menu" v-show="isShowLayer"><Layer ref="Layer" /></div>
|
<querydata ref="drawer" />
|
|
<div class="resByMouseBox" v-if="showRangeBox">
|
<div class="closeBtn" @click="closePOIbox">
|
<span>×</span>
|
</div>
|
<div class="bottomWrap">
|
<el-collapse accordion>
|
<el-collapse-item v-for="(fa, index) in resBypoi" :key="index">
|
<template slot="title">
|
{{ fa[0].featureType }} ({{ fa.length }})
|
</template>
|
<div class="listBox" v-for="(son, index) in fa" :key="index">
|
{{
|
son.properties["部件编码"]
|
? son.properties["部件编码"]
|
: son.properties["井编号"]
|
}}
|
{{
|
son.properties["部件名称"]
|
? son.properties["部件名称"]
|
: son.properties["井名称"]
|
}}
|
|
<el-link @click.stop="showDetail(son)">详情</el-link>
|
|
<el-link @click.stop="flyToPOI(son)">定位 </el-link>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
<!-- <div>
|
<el-table
|
:data="fa"
|
style="width: 90%; margin: 0 auto"
|
height="300"
|
:show-header="false"
|
@expand-change="expandChange"
|
ref="refTable"
|
>
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-form
|
label-position="right"
|
class="poiTableExpand"
|
label-width="71px"
|
>
|
<el-form-item
|
v-for="(item, index) in props.row.properties"
|
:key="index"
|
:label="index"
|
>
|
<span>{{ props.row.properties[index] }}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<el-table-column label="点位 ID" prop="id"> </el-table-column>
|
<el-table-column label="所属图层" prop="featureType">
|
</el-table-column>
|
</el-table>
|
</div> -->
|
</div>
|
<div class="detailBox" v-if="isShowDetail">
|
<div class="detailcCloseBtn" @click="closeDetailbox">
|
<span>×</span>
|
</div>
|
<p v-for="(value, key) in pointInfo.properties" :key="key">
|
{{ key }}：{{ value }}
|
</p>
|
</div>
|
|
<div class="right-panel" v-show="false">
|
<div class="right-close" v-show="isShow" @click="simulationHoverOff">
|
×
|
</div>
|
<el-tabs
|
type="border-card"
|
:tab-position="tabPosition"
|
v-model="activeName"
|
@tab-click="tabclick"
|
>
|
<div v-show="isShowLocation" class="rightcontent">
|
<transition name="el-fade-in-linear">
|
<location v-show="isShowLocation" ref="location" />
|
</transition>
|
</div>
|
<el-tab-pane label="标绘" name="标绘">
|
<span slot="label" @click="simulationHoverOn('标绘')">
|
<img
|
class="bhImg"
|
title="标绘"
|
v-if="!isShowPlotting"
|
src="@/assets/img/right/bh1.png"
|
/>
|
<img v-else title="标绘" src="@/assets/img/right/bh-l.png" />
|
</span>
|
<div v-show="isShowPlotting" class="rightcontent">
|
<transition name="el-fade-in-linear">
|
<plotting ref="plotting" />
|
</transition>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="量算" name="量算">
|
<span slot="label" @click="simulationHoverOn('量算')">
|
<img
|
class="lsImg"
|
title="量算"
|
v-if="!isShowMeasure"
|
src="@/assets/img/right/ls-s.png"
|
/>
|
<img v-else title="量算" src="@/assets/img/right/ls-l.png" />
|
</span>
|
<div v-show="isShowMeasure" class="rightcontent">
|
<transition name="el-fade-in-linear">
|
<measure v-show="isShowMeasure" ref="measure" />
|
</transition>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="空间查询" name="空间查询">
|
<span slot="label" @click="simulationHoverOn('空间查询')">
|
<img
|
class="cxImg"
|
title="空间查询"
|
v-if="!isShowQuery"
|
src="@/assets/img/right/cx-s.png"
|
/>
|
<img v-else title="空间查询" src="@/assets/img/right/cx-ll.png" />
|
</span>
|
<div v-show="isShowQuery" class="rightcontent">
|
<transition name="el-fade-in-linear">
|
<query ref="query" />
|
</transition>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="漫游" name="漫游">
|
<span slot="label" @click="simulationHoverOn('漫游')">
|
<img
|
class="myImg"
|
title="漫游"
|
v-if="!isShowRoam"
|
src="@/assets/img/right/my11.png"
|
/>
|
<img v-else title="漫游" src="@/assets/img/right/my-l.png" />
|
</span>
|
<div v-show="isShowRoam" class="rightcontent">
|
<transition name="el-fade-in-linear">
|
<roam ref="roam" />
|
</transition>
|
</div>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="实时路况" name="实时路况">
|
<span slot="label" @click="simulationHoverOn('实时路况')"><img title="实时路况" class="lkImg"
|
src="@/assets/img/right/lk1.png" /></span>
|
</el-tab-pane> -->
|
<el-tab-pane label="专题分析" name="专题分析">
|
<span slot="label" @click="simulationHoverOn('专题分析')">
|
<img
|
class="specialImg"
|
v-if="!isShowSpeAnalyseImg"
|
src="@/assets/img/left/specialanalyse4.png"
|
/>
|
<img
|
class="specialImg"
|
v-else
|
src="@/assets/img/left/specialanalyse4-s.png"
|
/>
|
</span>
|
<div v-show="isShowSpeAnalyse" class="leftContent">
|
<leftztfx ref="ZTFX" />
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="特效" name="特效">
|
<span slot="label" @click="simulationHoverOn('特效')">
|
<img
|
class="speEffectImg"
|
v-if="!isShowSpeEffectImg"
|
src="@/assets/img/left/specialeffect4.png"
|
/>
|
<img
|
class="speEffectImg"
|
v-else
|
src="@/assets/img/left/specialeffect4-s.png"
|
/>
|
</span>
|
<div v-show="isShowSpeEffect" class="leftContent">
|
<lefttx ref="TX" />
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="清除" name="清除">
|
<span slot="label" @click="simulationHoverOn('清除')"
|
><img title="清除" class="qcImg" src="@/assets/img/right/qc-s.png"
|
/></span>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<!-- 分层分户按钮 -->
|
<div class="fcfhBox" v-if="isShowFCFH">
|
<FCFH />
|
<!-- <button
|
id="btn1"
|
class="layui-btn"
|
:class="{ fcfhactive: fcfhopen }"
|
@click="fcfhpick(true)"
|
>
|
开启拾取
|
</button>
|
<button
|
id="btn1"
|
class="layui-btn"
|
:class="{ fcfhactive: !fcfhopen }"
|
@click="fcfhpick(false)"
|
>
|
关闭拾取
|
</button>
|
<span class="closeBtn" @click="closefcfhBox">×</span> -->
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.resByMouseBox {
|
height: 540px;
|
overflow: auto;
|
|
width: 300px;
|
background-color: #141c9161;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
position: absolute;
|
right: 100px;
|
z-index: 1000;
|
box-sizing: border-box;
|
}
|
.resByMouseBox .closeBtn {
|
color: #fff;
|
position: absolute;
|
right: 13px;
|
top: 3px;
|
font-size: 24px;
|
}
|
.el-link.el-link--default {
|
color: #409eff;
|
}
|
.detailBox {
|
width: 200px;
|
/* height: 300px; */
|
position: absolute;
|
background-color: #141c9161;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
right: 420px;
|
z-index: 1000;
|
color: #fff;
|
padding: 20px 10px 10px;
|
position: relative;
|
}
|
.detailcCloseBtn {
|
font-size: 24px;
|
position: absolute;
|
right: 8px;
|
top: 5px;
|
/* float: right; */
|
}
|
.detailBox :not(:first-child) {
|
margin-top: 5px;
|
}
|
|
/* .resByMouseBox .el-table,
|
.resByMouseBox .el-table /deep/ .el-table__expanded-cell,
|
.resByMouseBox .el-table /deep/ th,
|
.resByMouseBox .el-table /deep/ tr {
|
background-color: transparent;
|
}
|
.resByMouseBox .el-table,
|
.resByMouseBox .el-table /deep/ thead,
|
.resByMouseBox /deep/ .el-form-item__label,
|
.resByMouseBox /deep/ .el-table__expand-icon {
|
color: #fff;
|
}
|
.resByMouseBox /deep/ .el-table__expanded-cell {
|
padding: 10px;
|
}
|
.resByMouseBox /deep/ .el-table td,
|
.el-table th {
|
padding: 5px 0;
|
}
|
.resByMouseBox .el-table /deep/ tbody tr:hover > td {
|
background-color: #00000090;
|
}
|
.resByMouseBox .poiTableExpand .el-form-item {
|
margin-right: 0;
|
margin-bottom: 0;
|
width: 100%;
|
}
|
|
.demo-table-expand {
|
font-size: 0;
|
}
|
.demo-table-expand label {
|
width: 90px;
|
color: #99a9bf;
|
}
|
.demo-table-expand .el-form-item {
|
margin-right: 0;
|
margin-bottom: 0;
|
width: 50%;
|
} */
|
.user_btn {
|
cursor: pointer;
|
pointer-events: all;
|
margin: 0 auto;
|
}
|
|
.user_menu {
|
right: 10px;
|
top: 100px;
|
position: absolute;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
border: none !important;
|
margin-top: 0px !important;
|
/* border-radius: 3px !important; */
|
}
|
.user:hover .transition-box {
|
display: block;
|
}
|
.transition-box {
|
display: none;
|
width: 130px;
|
height: 90px;
|
position: relative;
|
left: -50px;
|
border-radius: 4px;
|
background: rgba(14, 50, 143, 0.6);
|
text-align: center;
|
color: #fff;
|
padding: 10px;
|
box-sizing: border-box;
|
z-index: 9999;
|
}
|
.transition-box ul li {
|
/* min-width: 154px; */
|
height: 35px;
|
text-align: center;
|
line-height: 35px;
|
}
|
.transition-box ul li:hover {
|
background: rgba(18, 80, 172, 0.6);
|
box-shadow: 0px 0px 10px 5px rgba(0, 132, 255, 0.7) inset;
|
}
|
.psdDialog .el-form-item {
|
margin-bottom: 0px;
|
}
|
/* .psdDialog,
|
.psdDialog /deep/ .el-pager li {
|
background-color: rgba(255, 0, 0, 0.0);
|
color: #FFFFFF;
|
}
|
.psdDialog /deep/ .el-dialog__header {
|
padding-top: 10px !important;
|
background-color:rgb(255,255,255,0);
|
border-radius: 14px 14px 0 0 ;
|
}
|
.psdDialog /deep/ .el-dialog__body {
|
border-top: 0 !important;
|
background-color: rgba(19, 31, 59, 0);
|
color: #FFFFFF;
|
}
|
.psdDialog /deep/ .el-dialog__footer{
|
text-align: center;
|
background-color: rgba(255,255,255,0);
|
} */
|
.pointInfoBoxContext {
|
position: relative;
|
/*right: 12px;*/
|
font-size: 14px;
|
/*left: 5px;*/
|
/*right: 0;*/
|
/*top: 20px;*/
|
/*padding: 15px;*/
|
margin-top: 20px;
|
|
min-width: 200px;
|
min-height: 100px;
|
max-height: 400px;
|
overflow: auto;
|
}
|
|
.pointInfoBoxContext::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
scrollbar-arrow-color: red;
|
}
|
|
.pointInfoBoxContext::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
.pointInfoBoxContext::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.right-panel {
|
position: relative;
|
}
|
|
.trigger {
|
pointer-events: all;
|
}
|
.specialTool {
|
position: absolute;
|
bottom: 60px;
|
width: 240px;
|
height: 40px;
|
color: #fff;
|
|
left: -600px;
|
}
|
|
.specialTool i {
|
display: inline-block;
|
width: 55px;
|
height: 55px;
|
background: rgba(0, 0, 0, 0.4);
|
border-radius: 30px;
|
margin-right: 10px;
|
text-align: center;
|
line-height: 55px;
|
font-size: 23px;
|
cursor: pointer;
|
/* box-shadow: 0px 0px 5px 5px #fff; */
|
}
|
.top-btn-active {
|
background: #0987ff !important;
|
}
|
|
.right-close:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
|
.right-close {
|
color: white;
|
cursor: pointer;
|
|
z-index: 999;
|
text-align: center;
|
|
position: absolute;
|
font-size: 30px;
|
right: 80px;
|
top: 5px;
|
transition: 1s;
|
}
|
|
.convenBtns {
|
width: 240px;
|
height: 40px;
|
color: #fff;
|
position: absolute;
|
right: 400px;
|
top: 8px;
|
}
|
|
.convenBtns i {
|
display: inline-block;
|
width: 55px;
|
height: 55px;
|
background: rgba(0, 0, 0, 0.4);
|
border-radius: 25px;
|
margin-right: 10px;
|
text-align: center;
|
line-height: 55px;
|
font-size: 23px;
|
cursor: pointer;
|
/* box-shadow: 0px 0px 5px 5px #fff; */
|
}
|
|
/* yh-add */
|
.el-tabs--border-card {
|
background-color: transparent;
|
border-radius: 8px;
|
height: 345px;
|
}
|
|
.el-tabs span {
|
display: inline-block;
|
padding: 0 10px;
|
margin: 0px !important;
|
}
|
|
/* 去除上下箭头^ */
|
.el-tabs--right /deep/ .el-tabs__nav-prev {
|
display: none;
|
}
|
|
.el-tabs--right /deep/ .el-tabs__nav-next {
|
display: none;
|
}
|
|
.el-tabs--right /deep/ .el-tabs__nav-wrap.is-right.is-scrollable {
|
padding: 0 0;
|
}
|
|
.rightcontent {
|
margin-right: 32px;
|
}
|
|
.el-tabs--right.el-tabs--border-card /deep/ .el-tabs__item.is-right {
|
border-left: 1px solid white;
|
border-top: 1px solid white;
|
border-bottom: none;
|
}
|
|
.el-tabs--right.el-tabs--border-card /deep/ .el-tabs__header.is-right {
|
border-left: none;
|
}
|
|
.el-tabs /deep/.el-tabs--border-card {
|
background-color: rgba(0, 0, 0, 0.4);
|
}
|
|
.el-tabs /deep/ .el-tabs__item.is-active {
|
/* background-color: rgba(0, 0, 0, .3) !important; */
|
background-color: transparent !important;
|
border-left: 1px solid transparent !important;
|
}
|
|
.el-tabs--border-card /deep/ .el-tabs__header {
|
background-color: transparent;
|
}
|
|
.el-tabs /deep/ .el-tabs__item {
|
height: 50px;
|
line-height: 70px;
|
padding: unset;
|
border-left: 1px solid white;
|
}
|
|
.el-tabs--right /deep/ .el-tabs__header.is-right {
|
margin-left: -32px;
|
}
|
|
/* .dwImg:hover {
|
content: url('../../assets/img/right/dw-l.png');
|
}
|
.bhImg:hover {
|
content: url('../../assets/img/right/bh-l.png');
|
}
|
.lsImg:hover {
|
content: url('../../assets/img/right/ls-l.png');
|
}
|
.cxImg:hover {
|
content: url('../../assets/img/right/cx-l.png');
|
}
|
.myImg:hover {
|
content: url('../../assets/img/right/my-l.png');
|
} */
|
.lkImg:hover {
|
content: url("../../assets/img/right/lk-l.png");
|
}
|
|
.qcImg:hover {
|
content: url("../../assets/img/right/qc-l.png");
|
}
|
|
/* yh-add */
|
.rightTop {
|
position: absolute;
|
top: 0;
|
right: 8px;
|
}
|
|
.rigthTools {
|
background: #fff;
|
width: 50px;
|
margin: 0 6px;
|
}
|
|
.rightTool {
|
position: absolute;
|
right: 120px;
|
top: 10px;
|
}
|
|
.rightTool .el-button {
|
padding: 0 !important;
|
font-size: 24px;
|
border: unset;
|
float: unset;
|
display: block;
|
background: transparent;
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
margin: 1px;
|
margin: 20px 0;
|
}
|
.searchElBg{
|
background-image: url("~@/assets/img/new/leftCircle.png") !important;
|
background-size: 48px 48px !important;
|
}
|
.searchBtn {
|
margin-top: 3px;
|
width: 40px;
|
pointer-events: none;
|
}
|
.searchElBg:hover{
|
background-image: url("~@/assets/img/new/leftCircle-y.png") !important;
|
background-size: 48px 48px !important;
|
}
|
.searchBg {
|
position: absolute;
|
left: -4px;
|
top: 15px;
|
width: 56px;
|
height: 56px;
|
z-index: -10;
|
}
|
.active {
|
background: #0987ff !important;
|
}
|
|
.user {
|
position: absolute;
|
right: 26px;
|
top: 17px;
|
width: 71px;
|
height: 71px;
|
background-image: url("~@/assets/img/new/rightCircle.png");
|
}
|
.user:hover {
|
background-image: url("~@/assets/img/new/rightCircle-y.png");
|
}
|
.user .el-avatar {
|
background-color: transparent;
|
margin: 3px auto 0;
|
}
|
|
.user /deep/ .el-icon-user-solid {
|
margin-right: 0px !important;
|
font-size: 28.9px;
|
}
|
.fcfhBox {
|
position: relative;
|
top: -50px;
|
left: -100px;
|
padding: 10px;
|
background-color: rgba(24, 87, 175, 0.7);
|
border-radius: 4px;
|
}
|
.fcfhactive {
|
background-color: #17a8fc !important;
|
}
|
.fcfhBox button {
|
background-color: rgba(24, 64, 118, 1);
|
}
|
.closeBtn {
|
font-size: 24px;
|
color: #fff;
|
vertical-align: top;
|
margin-left: 5px;
|
}
|
.resByMouseBox /deep/ .el-collapse-item__header {
|
background-color: transparent;
|
color: #fff;
|
height: 37px;
|
padding-left: 15px;
|
}
|
.resByMouseBox /deep/ .el-collapse-item__wrap {
|
background-color: transparent;
|
/* color: #fff; */
|
/* height: 37px; */
|
/* padding-left: 15px; */
|
}
|
.bottomWrap {
|
margin-top: 28px;
|
}
|
.bottomWrap /deep/ .el-collapse-item__content {
|
/* max-height: 308px; */
|
/* overflow: auto; */
|
color: #fff;
|
padding-left: 15px;
|
padding-bottom: 0;
|
}
|
.listBox {
|
width: 90%;
|
margin: 3px 0;
|
}
|
</style>
|
|
<script>
|
import { getUserInfo, updateUserPwd } from "@/api/api";
|
import qs from "qs";
|
import axios from "axios";
|
import location from "@/components/right/tools/location";
|
import plotting from "@/components/right/tools/plotting";
|
import search from "@/components/right/tools/search";
|
import measure from "@/components/right/tools/measure";
|
import query from "@/components/right/tools/query";
|
import querydata from "@/components/right/tools/query-data";
|
import leftztfx from "@/components/left/left-ztfx";
|
import lefttx from "@/components/left/left-tx";
|
import roam from "@/components/right/tools/roam";
|
import Layer from "@/components/left/layerTree/Layer";
|
import common from "@/components/common";
|
import { mapState, mapMutations } from "vuex";
|
import Bus from "../tools/Bus";
|
import { queryBySquare } from "@/api/api";
|
import FCFH from "@/components/right/FCFH";
|
|
//交通图层
|
let trafficLayer, panoramaLayer;
|
let flyPoint;
|
export default {
|
components: {
|
location,
|
plotting,
|
search,
|
measure,
|
query,
|
querydata,
|
roam,
|
leftztfx,
|
lefttx,
|
Layer,
|
FCFH,
|
},
|
name: "right-top",
|
data() {
|
let checkpass = (rule, value, callback) => {
|
if (value == this.form.newPassword) {
|
callback();
|
} else {
|
callback(new Error("密码不一致"));
|
}
|
};
|
return {
|
rules: {
|
newPassword: [
|
{ required: true, message: "请输入新密码", trigger: "blur" },
|
],
|
checkPassword: [
|
{ required: true, message: "不能为空", trigger: "blur" },
|
{ validator: checkpass, trigger: "blur" },
|
],
|
},
|
dialogFormVisible: false,
|
nickName: "用户",
|
form: {
|
oldPassword: "",
|
newPassword: "",
|
checkPassword: "",
|
},
|
resBypoi: [],
|
expands: [],
|
showRangeBox: false,
|
pointInfo: {},
|
isShowDetail: false,
|
// yh-add
|
tabPosition: "right",
|
activeName: "定位",
|
tabstatus: "",
|
// yh-add
|
//测量
|
measureData: [],
|
volumetricMeasurementTool: undefined,
|
isShow: false,
|
isShowInput: false,
|
isShowLocation: false,
|
isShowPlotting: false,
|
isShowMeasure: false,
|
isShowQuery: false,
|
isShowRoam: false,
|
isShowTraffic: false,
|
isShowQc: false,
|
isShowSpeEffect: false,
|
isShowSpeAnalyse: false,
|
isShowSpeAnalyseImg: false,
|
isShowSpeEffectImg: false,
|
isShowLayer: false,
|
activeIndex: 1,
|
info: "",
|
fcfhopen: false,
|
showInfoBox: false,
|
isShowFCFH: false,
|
layerAllData: [],
|
dictionary: {
|
// name: "名称",
|
// cameraInde: "相机编号",
|
// longitude: "经度",
|
// latitude: "纬度",
|
// installPla: "安装位置",
|
JK名称: "监控名称",
|
JK内码: "监控内码",
|
JK编号: "监控编号",
|
// JK经度: "监控经度",
|
// JK纬度: "监控纬度",
|
// JK传输: "监控传输",
|
// JK码流: "监控码流",
|
// JK矩阵: "监控矩阵",
|
JK类型: "监控类型",
|
// JK像素: "监控像素",
|
// JK海拔: "监控海拔",
|
JK安装: "监控安装",
|
JK编号: "监控编号",
|
JK区域: "监控区域",
|
// JK设备: "监控设备",
|
IP地址: "监控地址",
|
// JK端口: "监控端口",
|
// JK通道: "监控通道",
|
},
|
layerName: [],
|
};
|
},
|
computed: {
|
...mapState(["viewer1Show", "yqfk"]),
|
listenPointInfo() {
|
return this.$store.state.description;
|
},
|
},
|
mounted() {
|
// Bus.$on("jjHandle", this.jjHandle);
|
//关闭弹窗
|
Bus.$on("closeRightPop", (data) => {
|
if (data) {
|
this.showInfoBox = false;
|
}
|
});
|
//打开我的资源弹窗
|
Bus.$on("openMyResourcePop", (data) => {
|
if (data) {
|
this.isShowLayer = true;
|
}
|
});
|
//关闭我的资源弹窗
|
Bus.$on("closeMyResourcePop", (data) => {
|
if (data) {
|
this.isShowLayer = false;
|
}
|
});
|
Bus.$on("showRangeBox", (layer, res) => {
|
this.rangeQuery();
|
});
|
Bus.$on("ShowFCFH", (data) => {
|
if (this.isShowFCFH == data) {
|
return;
|
}
|
this.isShowFCFH = data;
|
});
|
},
|
destroyed() {
|
// Bus.$off("jjHandle", this.jjHandle);
|
Bus.$off("closeRightPop");
|
Bus.$off("closeMyResourcePop");
|
Bus.$off("showRangeBox");
|
Bus.$off("ShowFCFH");
|
},
|
methods: {
|
...mapMutations(["setViewer1Show", "setYqfk"]),
|
onSubmit(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let pwdItem = {
|
newPassword: this.form.newPassword,
|
oldPassword: this.form.oldPassword,
|
};
|
|
const options = {
|
method: "PUT",
|
headers: {
|
"content-type": "application/x-www-form-urlencoded",
|
Authorization: window.localStorage.getItem("TokenKey"),
|
},
|
data: qs.stringify(pwdItem),
|
url: "http://10.10.4.116:8089/system/user/profile/updatePwd",
|
};
|
axios(options).then((res) => {
|
if (res.data.code != 200) {
|
this.$message.error(res.data.msg);
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "success",
|
});
|
this.form.newPassword = "";
|
this.form.oldPassword = "";
|
this.form.checkPassword = "";
|
this.dialogFormVisible = false;
|
setTimeout(() => {
|
localStorage.removeItem("TokenKey");
|
localStorage.removeItem("TokenTime");
|
this.$router.push("/login");
|
}, 3000);
|
}
|
});
|
} else {
|
alert("验证不通过");
|
return false;
|
}
|
});
|
},
|
closeDig(formName) {
|
this.form.newPassword = "";
|
this.form.oldPassword = "";
|
this.form.checkPassword = "";
|
this.dialogFormVisible = false;
|
this.$refs[formName].resetFields();
|
},
|
/*分层分户*/
|
fcfhpick(open) {
|
if (open) {
|
this.fcfhopen = true;
|
sgworld.pick();
|
} else {
|
this.fcfhopen = false;
|
sgworld.endPick();
|
}
|
},
|
// 关闭分层分户功能框
|
closefcfhBox() {
|
this.isShowFCFH = false;
|
},
|
rangeQuery() {
|
let layersData = this.$store.state.selectedLayers.filter((item) => {
|
return (
|
item.urls &&
|
(item.urls.includes("yinjing0529") ||
|
item.urls.includes("chengshibujian0529"))
|
);
|
});
|
// let layersData = this.$store.state.selectedLayers.filter((item) =>
|
// item.sourceType == "cluster" || item.sourceType == "wfs"
|
// );
|
if (layersData.length != 0) {
|
let that = this;
|
buff = sgworld.Analysis.DrawPolygonBuffer(0, function () {
|
let area = buff.positions.flat().join(" ");
|
if (buff) {
|
buff.clearBuff();
|
}
|
that.showRangeBox = true;
|
let promises = layersData.map((item) => {
|
return queryBySquare(item.urls, item.layer, area);
|
});
|
Promise.all(promises).then((res) => {
|
let result = [];
|
for (let i = 0; i < res.length; i++) {
|
result.push(res[i].data.features);
|
}
|
that.resBypoi = result;
|
});
|
});
|
} else {
|
this.$message.error("您目前未选中可查询的图层");
|
}
|
},
|
expandChange(row, expandedRows) {
|
var that = this;
|
if (expandedRows.length > 1) {
|
that.expands = [];
|
if (row) {
|
that.expands.push(row);
|
}
|
that.$refs.refTable.toggleRowExpansion(expandedRows[0]);
|
} else {
|
that.expands = [];
|
}
|
},
|
closePOIbox() {
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
|
this.isShowDetail = false;
|
this.showRangeBox = false;
|
this.pointInfo = {};
|
this.resBypoi = [];
|
},
|
closeInfobox() {
|
Bus.$emit("clearSelectObject", "");
|
this.showInfoBox = false;
|
this.$refs.ZTFX.resetImg();
|
},
|
showLayer() {
|
this.isShowLayer = true;
|
Bus.$emit("closeLegendPop", true);
|
this.isShowInput = false;
|
},
|
hideLayer() {
|
this.isShowLayer = false;
|
},
|
spjkLoad(info) {
|
let screenHeight =
|
document.body.clientHeight || document.documentElement.clientHeigh;
|
let offsetTop = screenHeight - 385;
|
offsetTop = offsetTop < 0 ? 0 : offsetTop;
|
|
offsetTop = offsetTop > 100 ? offsetTop - 100 : offsetTop;
|
layerOpen(info["JK名称"], {
|
width: 470,
|
height: 385,
|
offset: [offsetTop + "px", "380px"],
|
url: "./static/html/video/video.html?code=" + info["JK内码"],
|
fn: {
|
success: (layero, index) => {
|
SmartEarthPopupData.layerContainer = layero;
|
},
|
end: () => {
|
// try{
|
// this.isOpen.ymfx = false;
|
// }catch{}
|
},
|
cancel: () => {
|
sgworld.drawObj &&
|
sgworld.drawObj.end &&
|
sgworld.drawObj.end("cancel");
|
},
|
},
|
});
|
// window.sxtkGeojson = new SmartEarth.ClusterLayer(sgworld.Viewer, {
|
// pixelRange: 30,
|
// gradient: {
|
// 0.0001: "rgb(0,191,255)",
|
// 0.001: "rgb(0,128,0)",
|
// 0.01: "rgb(255,165,0)",
|
// 0.1: "rgb(255,0,0)",
|
// },
|
// style: "clustering",
|
// });
|
// window.sxtkGeojson.dataSource.clustering.minimumClusterSize = 5;
|
// let url = window.sessionStorage.getItem("sxtGeojsonUrl");
|
// axios
|
// .get(url)
|
// .then((data) => {
|
// console.log(data);
|
// let features = data.data.features;
|
// features.forEach((feature) => {
|
// let geom = feature.geometry.coordinates;
|
// let properties = feature.properties;
|
// let point = new SmartEarth.Degrees(geom[0], geom[1]);
|
// // let item = {
|
// // lon
|
// // };
|
|
// let entitie = window.sxtkGeojson.add(point, {
|
// image: SmartEarthRootUrl + "Workers/image/sxt.png",
|
// });
|
// entitie.properties = properties;
|
// entitie.tag = "sxt";
|
// });
|
|
// sgworld.Navigate.flyToObj(window.sxtkGeojson.dataSource);
|
// window.sxthandler = new Cesium.ScreenSpaceEventHandler(
|
// sgworld.Viewer.scene.canvas
|
// );
|
// window.sxthandler.setInputAction((event) => {
|
// let pick = sgworld.Viewer.scene.pick(event.position);
|
// //debugger;
|
// if (pick && pick.id && pick.id.tag == "sxt") {
|
// //结束之前操作
|
|
// layuiLayer.close(SmartEarthPopupData.layerProp);
|
|
// sgworld.drawObj &&
|
// (sgworld.drawObj.drawHandler &&
|
// sgworld.drawObj.drawHandler.destroy(),
|
// sgworld.drawObj.end && sgworld.drawObj.end());
|
|
// const props = pick.id.properties;
|
// let screenHeight =
|
// document.body.clientHeight ||
|
// document.documentElement.clientHeigh;
|
// let offsetTop = screenHeight - 385;
|
// offsetTop = offsetTop < 0 ? 0 : offsetTop;
|
|
// offsetTop = offsetTop > 100 ? offsetTop - 100 : offsetTop;
|
// // console.log(props.installPla._value)
|
// layerOpen(props.name._value, {
|
// width: 470,
|
// height: 385,
|
// offset: [offsetTop + "px", "100px"],
|
// url:
|
// "./static/html/video/video.html?code=" +
|
// props.cameraInde._value,
|
// fn: {
|
// success: (layero, index) => {
|
// SmartEarthPopupData.layerContainer = layero;
|
// },
|
// end: () => {
|
// this.isOpen.ymfx = false;
|
// },
|
// cancel: () => {
|
// sgworld.drawObj &&
|
// sgworld.drawObj.end &&
|
// sgworld.drawObj.end("cancel");
|
// },
|
// },
|
// });
|
// }
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
// })
|
// .catch((err) => {
|
// console.log(err);
|
// });
|
},
|
stdsjHandle() {
|
window.open(
|
"http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
|
);
|
},
|
yqfkHandle() {
|
this.setYqfk(!this.yqfk);
|
},
|
tdglHandle() {
|
this.setViewer1Show(!this.viewer1Show);
|
},
|
// jjHandle() {
|
// if (!window.panoramaHandler) {
|
// var urls = "http://10.10.4.116:8070/gisserver/wmsserver/YZ_LW";
|
// window.panoramaLayer = sgworld.Creator.CreateWMSImageFeatureLayer(
|
// "gisserver",
|
// {
|
// url: urls,
|
// queryParameters: {
|
// layers: "",
|
// },
|
// },
|
// {},
|
// "0",
|
// true,
|
// function () {}
|
// );
|
// window.panoramaHandler = new Cesium.ScreenSpaceEventHandler(
|
// Viewer.scene.canvas
|
// );
|
// window.panoramaHandler.setInputAction((event) => {
|
// let p;
|
// p = sgworld.Navigate.getMouseDegrees(event);
|
// let panorama = new yzPanorama();
|
// panorama.open({
|
// id: "qjMap",
|
// closeId: "panoramaClose",
|
// lng: p.lon,
|
// lat: p.lat,
|
// });
|
|
// // let StreetUrl = "http://10.10.4.116:8085/yzAdapter/";
|
// // let _StreetscapeYZ = new StreetscapeYZ(sgworld, {
|
// // StreetUrl: StreetUrl,
|
// // lon: p.lon,
|
// // lat: p.lat
|
// // });
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
// } else {
|
// try {
|
// window.panoramaLayer.deleteObject();
|
// } catch (e) {}
|
// window.panoramaHandler.destroy();
|
// window.panoramaHandler = undefined;
|
// }
|
// },
|
// yh-add
|
closeAllHighLight(type) {
|
!(type == "plotting") && this.$refs.plotting.clearHighLight();
|
!(type == "roam") && this.$refs.roam.clearActive();
|
!(type == "measure") && this.$refs.measure.clearActive();
|
!(type == "query") && this.$refs.query.clearActive();
|
},
|
simulationHoverOff() {
|
// 清除边界线
|
borderLine.forEach((item) => {
|
sgworld.Creator.SimpleGraphic.PrimitiveCollection.remove(item);
|
});
|
borderLine = [];
|
this.closeall();
|
},
|
// 鼠标悬停触发
|
simulationHoverOn(tab) {
|
this.closeall();
|
|
switch (tab) {
|
case "定位":
|
this.isShowLocation = true;
|
this.isShow = true;
|
this.activeName = "定位";
|
break;
|
case "标绘":
|
this.isShowPlotting = true;
|
this.isShow = true;
|
this.activeName = "标绘";
|
break;
|
case "量算":
|
this.isShowMeasure = true;
|
this.isShow = true;
|
this.activeName = "量算";
|
break;
|
case "空间查询":
|
this.isShowQuery = true;
|
this.isShow = true;
|
this.activeName = "空间查询";
|
break;
|
case "漫游":
|
this.isShowRoam = true;
|
this.isShow = true;
|
this.activeName = "漫游";
|
break;
|
case "专题分析":
|
this.isShowSpeAnalyse = true;
|
this.isShowSpeAnalyseImg = true;
|
this.activeName = "专题分析";
|
break;
|
case "特效":
|
this.isShowSpeEffect = true;
|
this.isShowSpeEffectImg = true;
|
this.activeName = "特效";
|
break;
|
default:
|
this.closeall();
|
break;
|
}
|
},
|
|
// 把tab状态置为关闭态
|
closeall() {
|
try {
|
this.$refs.measure.clearMeasure();
|
} catch (e) {}
|
this.isShow = false;
|
this.isShowLocation = false;
|
this.isShowPlotting = false;
|
this.isShowMeasure = false;
|
this.isShowQuery = false;
|
this.isShowRoam = false;
|
this.isShowSpeEffect = false;
|
this.isShowSpeAnalyse = false;
|
this.isShowSpeAnalyseImg = false;
|
this.isShowSpeEffectImg = false;
|
},
|
// 点击tab面板时触发,tab为回调参数
|
tabclick(tab) {
|
switch (tab.label) {
|
// case "定位":
|
// this.isShowLocation=!this.isShowLocation;
|
// break;
|
// case "标绘":
|
// this.isShowPlotting=!this.isShowPlotting;
|
// break;
|
// case "量算":
|
// this.isShowMeasure=!this.isShowMeasure;
|
// break;
|
// case "空间查询":
|
// this.isShowQuery=!this.isShowQuery;
|
// break;
|
// case "漫游":
|
// this.isShowRoam=!this.isShowRoam;
|
// break;
|
case "实时路况":
|
this.showTraffic();
|
break;
|
case "清除":
|
this.showQc();
|
break;
|
default:
|
// console.log(tab.label);
|
}
|
},
|
// yh-add
|
updataQueryData(data) {
|
let queryData = [];
|
for (let key in data) {
|
data[key].tableData &&
|
data[key].tableData.length &&
|
queryData.push(data[key]);
|
}
|
this.$refs.drawer.showQueryData = true;
|
this.$refs.drawer.updataTable(queryData);
|
},
|
showInput() {
|
// 关闭我的资源弹框
|
Bus.$emit("closeMyResourcePop", true);
|
|
//关闭其他
|
this.closeAll("isShowInput");
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isShowInput = !this.isShowInput;
|
!this.isShowInput && this.$refs.search.clear();
|
},
|
showLocation() {
|
//关闭其他
|
this.closeAll("isShowLocation");
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isShowLocation = !this.isShowLocation;
|
if (!this.isShowLocation) {
|
this.$refs.location.close();
|
}
|
},
|
showPlotting() {
|
//关闭其他
|
this.closeAll("isShowPlotting");
|
this.isShowPlotting = !this.isShowPlotting;
|
},
|
showMeasure() {
|
//关闭其他
|
this.closeAll("isShowMeasure");
|
this.isShowMeasure = !this.isShowMeasure;
|
},
|
showQuery() {
|
//关闭其他
|
this.closeAll("isShowQuery");
|
this.isShowQuery = !this.isShowQuery;
|
},
|
showRoam() {
|
//关闭其他
|
this.closeAll("isShowRoam");
|
this.isShowRoam = !this.isShowRoam;
|
},
|
showTraffic() {
|
this.closeAll();
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isShowTraffic = !this.isShowTraffic;
|
|
if (!this.isShowTraffic) {
|
this.$message({
|
showClose: true,
|
message: "关闭实时路况!",
|
});
|
Viewer.imageryLayers.remove(trafficLayer);
|
} else {
|
this.$message({
|
showClose: true,
|
message: "开启实时路况!",
|
});
|
//添加图层
|
let provider = new Cesium.WebMapServiceImageryProvider({
|
url: common.trafficserve,
|
layers: "zjplatform:RTIC_POLYLINE",
|
parameters: {
|
service: "WMS",
|
format: "image/png",
|
transparent: true,
|
},
|
});
|
trafficLayer = Viewer.imageryLayers.addImageryProvider(provider);
|
|
sgworld.Navigate.flyToPosition(
|
121.52510534037954,
|
29.872768408885968,
|
45027
|
);
|
}
|
},
|
//清除
|
showQc() {
|
this.$parent.$parent.closeHighLight();
|
//关闭其他
|
this.closeAll();
|
|
//定位搜索
|
this.$refs.search.clear();
|
//标绘
|
this.$refs.plotting.clear();
|
//测量
|
this.$refs.measure.clearMeasure();
|
//特效
|
this.$parent.$parent.clearTX();
|
//分析
|
window.clearAnalyse && window.clearAnalyse();
|
},
|
closeAll(exclude) {
|
exclude && this.$parent.$parent.closeLeft();
|
let excludeState = exclude && this[exclude];
|
this.isShow = false;
|
this.isShowInput = false;
|
this.isShowLocation = false;
|
this.isShowPlotting = false;
|
this.isShowMeasure = false;
|
this.isShowQuery = false;
|
this.isShowRoam = false;
|
this.isShowQc = false;
|
|
exclude && (this[exclude] = excludeState);
|
|
if (!this.isShowLocation) {
|
this.$refs.location.close();
|
}
|
},
|
showDetail(item) {
|
// console.log(item);
|
this.pointInfo = item;
|
this.isShowDetail = true;
|
// tooltipHTML = "";
|
// console.log(this.info);
|
// for (let i in pickFeature.id.attributes) {
|
// let value = pickFeature.id.attributes[i];
|
// value && (tooltipHTML += ` <p>${i}：${value || "无"}</p><br>`);
|
// }
|
// for (let i in this.info) {
|
// let value = obj[i];
|
// value && (tooltipHTML += `<p>${i}：${value || "无"}</p>`);
|
// }
|
// if (divPoint1) {
|
// sgworld.Creator.DeleteObject(divPoint1);
|
// }
|
// let description = `<div style='background:rgba(0,0,0,.3);border:2px solid #000;color:#fff;'>${tooltipHTML}</div>`;
|
// console.log(description);
|
// if (tooltip) {
|
// tooltip.show(false);
|
// tooltip = null;
|
// }
|
// tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, {
|
// color: "black",
|
// addY: -178,
|
// far: 200000,
|
// closeBtn: true,
|
// close: () => {
|
// tooltip.show(false);
|
// tooltip = null;
|
// },
|
// });
|
// tooltip.showAt(
|
// Cesium.Cartesian3.fromDegrees(obj["JK经度"], obj["JK纬度"], 0),
|
// description
|
// );
|
},
|
closeDetailbox() {
|
this.pointInfo = {};
|
this.isShowDetail = false;
|
},
|
flyToPOI(item) {
|
flyPoint && Viewer.entities.remove(flyPoint);
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
item.geometry.coordinates[0],
|
item.geometry.coordinates[1],
|
200
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-45),
|
roll: Cesium.Math.toRadians(0.0),
|
},
|
duration: 3,
|
});
|
flyPoint = Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(
|
parseFloat(item.geometry.coordinates[0]),
|
parseFloat(item.geometry.coordinates[1])
|
),
|
billboard: {
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale: 1,
|
image: window.SmartEarthRootUrl + "Workers/image/mark.png",
|
heightReference: 1,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
},
|
},
|
watch: {
|
listenPointInfo: {
|
handler(n, o) {
|
//特别注意，不能用箭头函数，箭头函数，this指向全局
|
for (let item in n) {
|
if (
|
typeof n[item] === "undefined" ||
|
n[item] === null ||
|
n[item] === ""
|
) {
|
delete n[item];
|
}
|
}
|
this.info = n;
|
// this.showInfoBox = true;
|
|
if (this.info["JK内码"]) {
|
// this.$message({
|
// showClose: true,
|
// message: "连接状态查询中",
|
// });
|
this.spjkLoad(this.info);
|
}
|
},
|
// immediate: true, //刷新加载 立马触发一次handler
|
deep: true, // 可以深度检测到 obj 对象的属性值的变化
|
},
|
},
|
};
|
</script>
|
