1463 lines
44 KiB
Vue
1463 lines
44 KiB
Vue
<template>
|
||
<div class="dashboard-container" v-loading.fullscreen="fullScreenLoading"
|
||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||
<div class="absolute " style="z-index: 99999;">
|
||
<!-- <el-button @click="create">点一下</el-button> -->
|
||
<!-- <span style="color: red">{{ $t("login.loginTitle") }}</span>-->
|
||
<!-- <el-select @change="langChange" v-model="value" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>-->
|
||
<!-- <span class="svg-container" @click="handleLogin">
|
||
<svg-icon icon-class="point" :class-name="['point','pp']"></svg-icon>
|
||
<svg-icon icon-class="personalModel" :class-name="['point','pp']"></svg-icon>
|
||
<svg-icon icon-class="measure" :class-name="['point','pp']"></svg-icon>
|
||
<svg-icon icon-class="height_measure" :class-name="['point','pp']"></svg-icon>
|
||
</span>-->
|
||
</div>
|
||
<Tree v-if="noSituation" class="absolute zIndex9 tree" ref="tree"></Tree>
|
||
<!-- <WangEditor class="absolute zIndex99"></WangEditor>-->
|
||
<myHeaderAll ref="myHeaderAll" v-if="noSituation"></myHeaderAll>
|
||
|
||
<bottomMenu v-if="noSituation"></bottomMenu>
|
||
|
||
<!-- 态势演播 -->
|
||
<!-- <div class="movie absolute zIndex999">
|
||
<gant class="movie absolute zIndex999"/>
|
||
</div> -->
|
||
<!-- <button class="videoStop absolute zIndex999" @click="videoStop">结束录制</button> -->
|
||
<!--左侧一级菜单-->
|
||
<firstMenu v-if="noSituation" class="absolute zIndex9" ref="firstMenu"></firstMenu>
|
||
<!--左侧二级菜单-->
|
||
<secondMenu class="absolute" ref="secondMenu"></secondMenu>
|
||
<editor class="absolute zIndex99" ref="editor"></editor>
|
||
<selectImg class="selectImgBox absolute" ref="selectImg"></selectImg>
|
||
<!--剖面分析-->
|
||
<profileAnalysis class="profileAnalysisBox absolute zIndex99"></profileAnalysis>
|
||
<!--土方分析-->
|
||
<cutFill class="cutFillBox absolute zIndex99"></cutFill>
|
||
<!--淹没分析-->
|
||
<inundationAnalysis class="inundationAnalysisBox absolute zIndex99"></inundationAnalysis>
|
||
<!-- <div class="richTextDialogBox">-->
|
||
<el-dialog :title="richTextDialog.title" :modal="false" :visible.sync="richTextDialog.visible" width="1090px"
|
||
@close="cancel" :center="true" :close-on-click-modal="false">
|
||
<div id="richTextEditor" style="background: #fff"></div>
|
||
<!-- :content="richTextDialog.content"-->
|
||
<!-- <richTextEditor></richTextEditor>-->
|
||
<!-- <div style="display: flex;justify-content: flex-end;padding: 6px 0;">
|
||
|
||
<el-button size="mini" type="primary" @click="save">确定</el-button>
|
||
<el-button size="mini" type="danger" @click="cancel">取消</el-button>
|
||
</div>-->
|
||
</el-dialog>
|
||
<!--坐标定位-->
|
||
<flyToLocation ref="flyToLocation" class="flyToLocationBox absolute zIndex99"></flyToLocation>
|
||
<junbiao ref="junbiao" class="junbiaoBox absolute zIndex999"></junbiao>
|
||
<junbiao3d ref="junbiao3d" class="junbiao3dBox absolute zIndex999"></junbiao3d>
|
||
<vrModel class="vrModelBox absolute zIndex999"></vrModel>
|
||
<textModel class="textModelBox absolute zIndex999"></textModel>
|
||
<adddirectory class="adddirectoryBox absolute zIndex999"></adddirectory>
|
||
<model ref="model" class="modelBox absolute zIndex999"></model>
|
||
<modelg ref="modelg" class="modelBoxg absolute zIndex999"></modelg>
|
||
<modelSelect ref="modelSelect" class="modelSelectBox absolute zIndex999"></modelSelect>
|
||
<bimInfo ref="bimInfo" class="bimInfoBox absolute zIndex99"></bimInfo>
|
||
<echartsTotal ref="echartsTotal" class="echartsTotalBox absolute zIndex99"></echartsTotal>
|
||
<rolePermission></rolePermission>
|
||
<div class="absolute zIndex99 tongbu" style="top: 5vw">
|
||
<el-button size="mini" @click="tongbu">数据同步</el-button>
|
||
</div>
|
||
<div v-if="showBigData || noSituation" style="display: flex">
|
||
<div id="earth" :class="['fullSize']"></div>
|
||
<div id="map2d" :class="['fullSize', 'absolute', 'halfEarth', 'zIndex1']" style="left: 50%; height: 100vh"></div>
|
||
</div>
|
||
<div v-if="!noSituation && !showBigData" id="earthContainers" :class="['fullSize']"></div>
|
||
<div v-if="noSituation" class="absolute zIndex9 logo" style="bottom: 15px" @click="changeState">
|
||
<!-- <img src="@/assets/images/81.gif" /> -->
|
||
<!-- <img src="@/assets/images/rotation.gif" /> -->
|
||
<!-- <img src="@/assets/images/地球.gif" />-->
|
||
<img :src="require('@/assets/images/shijingjun/' + skinInfo + '/logo.png')" alt="" />
|
||
<!-- <img src="@/assets/images/3c60ff3cd2d9e0547ada43a58fa60c3.png">-->
|
||
<!-- <img src="@/assets/images/aaaaaa.webp">-->
|
||
<!-- <button v-for="item in optionss" @click="addMarker(item)">{{ item.source_name }}</button>-->
|
||
</div>
|
||
<scene class="absolute zIndex999 scene"></scene>
|
||
<div id="modal" style=""></div>
|
||
<el-drawer class="transformDrawerBox" :modal-append-to-body="false" :wrapperClosable="false" title="转换"
|
||
:visible.sync="transformDrawer" direction="ltr">
|
||
<div class="transformDrawerContent">
|
||
<el-collapse @change="changeActive" v-model="transformTypeActiveName" accordion>
|
||
<template v-for="item in transformTypes">
|
||
<el-collapse-item :title="item.title" :name="item.name">
|
||
<div class="transformDrawerItem">
|
||
<span>源文件路径</span>
|
||
<el-input size="medium" v-model="input" :placeholder="item.placeholder ? item.placeholder : '请输入文件路径'
|
||
">
|
||
<template slot="append">
|
||
<el-button @click="openDialog(item)">
|
||
<i class="el-icon-more"></i>
|
||
</el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
|
||
<div class="transformDrawerItem">
|
||
<span>存放路径</span>
|
||
<el-input size="medium" v-model="output" :placeholder="item.outplaceholder ? item.outplaceholder : '请输入文件路径'
|
||
">
|
||
<template slot="append">
|
||
<el-button @click="openSaveDialog(item)">
|
||
<i class="el-icon-more"></i>
|
||
</el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-collapse-item>
|
||
</template>
|
||
</el-collapse>
|
||
<div class="btn">
|
||
<el-button :disabled="transformTypeActiveName == ''" type="primary" size="medium" @click="transform">转换
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
<!-- 导入作战数据生成的点的样式-->
|
||
<fightingDataStyle ref="fightingDataStyle" class="fightingDataStyleBox absolute zIndex99"></fightingDataStyle>
|
||
<DTH ref="dth" :host="host" :token="token" class="zIndex99"></DTH>
|
||
<!-- 标准版本 无人机 -->
|
||
<!-- <flyer v-if="flyerDiv" class="flyer"></flyer> -->
|
||
<!-- <flyer2 v-if="flyerDiv2" class="flyer"></flyer2> -->
|
||
<!--态势部分-->
|
||
<div v-show="!showBigData && !noSituation" class="titles">
|
||
实景三维态势推演系统
|
||
</div>
|
||
<svg v-show="!showBigData && !noSituation" class="icon icon-top" aria-hidden="true">
|
||
<use xlink:href="#icon-top"></use>
|
||
</svg>
|
||
<svg class="icon icon-tuichudenglu" @click="closeSituation" aria-hidden="true" v-if="showList">
|
||
<use xlink:href="#icon-tuichudenglu"></use>
|
||
</svg>
|
||
<!--右侧元素指挥舱-->
|
||
<!--新增态势0827-->
|
||
<div v-if="editSituation" :class="[
|
||
'cabinBox',
|
||
'animate__animated',
|
||
typeof showCabin == 'boolean'
|
||
? showCabin
|
||
? 'animate__zoomOutRight'
|
||
: 'animate__zoomInRight'
|
||
: '',
|
||
]">
|
||
<cabin @changeShow="changeShow('showCabin', 'showCabinBtn')" ref="cabin"></cabin>
|
||
</div>
|
||
<div v-if="editSituation && typeof showCabinBtn == 'boolean'" :class="[
|
||
'cabinShowBtn',
|
||
'cabinShowBtn',
|
||
'animate__animated',
|
||
typeof showCabinBtn == 'boolean'
|
||
? showCabinBtn
|
||
? 'animate__lightSpeedInRight'
|
||
: 'animate__lightSpeedOutRight'
|
||
: '',
|
||
]">
|
||
<div class="switch-node-outer">
|
||
<div class="switch-node-inner" @click="changeShow('showCabinBtn', 'showCabin')">
|
||
展开指挥舱
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--态势事件新建框-->
|
||
<div class="newEventBox" v-if="eventBox">
|
||
<newEvent></newEvent>
|
||
</div>
|
||
<!--态势时间面板-->
|
||
<eventEditor class="eventEditor"></eventEditor>
|
||
<!--元素列表框-->
|
||
<div :class="[
|
||
'elementBox',
|
||
'animate__animated',
|
||
typeof showElement == 'boolean'
|
||
? showElement
|
||
? 'animate__zoomOutLeft'
|
||
: 'animate__zoomInLeft'
|
||
: '',
|
||
]" v-if="editSituation">
|
||
<elements @changeShow="changeShow('showElement', 'showElementBtn')" v-if="!showList"></elements>
|
||
</div>
|
||
<!--新增态势0822 -->
|
||
<div v-if="editSituation && typeof showElementBtn == 'boolean'" style="left: 0%;" :class="[
|
||
'elementShowBtn',
|
||
'animate__animated',
|
||
typeof showElementBtn == 'boolean'
|
||
? showElementBtn
|
||
? 'animate__lightSpeedInLeft'
|
||
: 'animate__lightSpeedOutLeft'
|
||
: '',
|
||
]">
|
||
<div class="switch-node-outer">
|
||
<div class="switch-node-inner" @click="changeShow('showElementBtn', 'showElement')">
|
||
展开军标标绘
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<svg class="icon icon-tuichu" @click="closeSituationEdit" aria-hidden="true" v-if="editSituation">
|
||
<use xlink:href="#icon-tuichu"></use>
|
||
</svg>
|
||
<!-- 方案列表 -->
|
||
<div class="content" v-if="showList">
|
||
<situationList ref="situation" @openSituationEdit="openSituationEdit"></situationList>
|
||
</div>
|
||
<div v-if="eventsList" class="timeline-container">
|
||
<deduction ref="Deduction" :TSTYOBJ="TSTYOBJ" :action="action"></deduction>
|
||
</div>
|
||
<!-- gis资源列表 -->
|
||
<div class="gisTable">
|
||
<el-dialog title="gis资源列表" :modal="false" :visible.sync="dialogTableVisible" @open="fetchData">
|
||
<el-table class="gisTable" :row-key="getRowKey" :reserve-selection="true" :data="gisData" ref="multipleTable"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55"> </el-table-column>
|
||
<!--<el-table-column width="150" property="date" label="日期"></el-table-column>-->
|
||
<el-table-column property="source_name" label="名称"></el-table-column>
|
||
<el-table-column width="300" property="source_type" label="类型"></el-table-column>
|
||
</el-table>
|
||
<div class="btnsbox">
|
||
<el-button class="btns" @click="addResource">添加</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<input type="file" id="fileInputlink" style="display: none;" multiple
|
||
accept=".jpg, .png, .webp, .svg, .bmp, .gif,.mp4,.mp3,.pdf" @change="uploadFile" />
|
||
<input type="file" id="fileInputPanorama" style="display: none;" multiple accept=".jpeg,.png,.jpg"
|
||
@change="uploadFile2" />
|
||
<!-- 海东1021 -->
|
||
<div class="goodSearch" v-if="goodSearchDialog">
|
||
<div class="contentBox " v-draggable>
|
||
<div class="titleBox nav">
|
||
<span class="title">{{ $t("leftMenu.secondMenu.goodsSearch") }}</span>
|
||
<span class="closeBox">
|
||
<span @click="goodSearchDialog = false">✕</span>
|
||
</span>
|
||
<div class="hr"></div>
|
||
</div>
|
||
<!-- <template v-if="goodSearchEmpty">
|
||
<div class="empty-img">
|
||
|
||
</div>
|
||
</template>
|
||
<template v-else> -->
|
||
<div id="goodSearchEchart"></div>
|
||
<div style="height: 60px;position: relative;">
|
||
<el-button class="export-btn" style="
|
||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||
color: #ffffff;
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 20px;
|
||
">导出Excel</el-button>
|
||
</div>
|
||
<!-- </template> -->
|
||
</div>
|
||
</div>
|
||
<!-- 海东表格设置 -->
|
||
<excelSet ref="excelSet" class="excelSetBox absolute zIndex99"></excelSet>
|
||
<!-- tufu_select -->
|
||
<tufuSelect style="top: 115px;right: 50px;" class="tufuSelect absolute zIndex99"></tufuSelect>
|
||
<!-- 战术计算 -->
|
||
<tactical class="tacticalBox absolute"></tactical>
|
||
<!-- modelSet -->
|
||
<ModelSet class="ModelSetBox absolute"></ModelSet>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 新增态势0910
|
||
import {ipcRenderer, remote} from "electron";
|
||
import { mapGetters } from "vuex";
|
||
import Tree from "@/components/Tree/index";
|
||
import bottomMenu from "@/components/bottomMenus/bottomMenu.vue";
|
||
import myHeaderAll from "@/components/myHeaderAll/index.vue";
|
||
import firstMenu from "@/components/LeftMenu/firstMenu.vue";
|
||
import secondMenu from "@/components/LeftMenu/secondMenu.vue";
|
||
import editor from "@/components/editor/index.vue";
|
||
import selectImg from "@/components/selectImg.vue";
|
||
import profileAnalysis from "@/components/analysis/profileAnalysis.vue";
|
||
import cutFill from "@/components/analysis/cutFill.vue";
|
||
import inundationAnalysis from "@/components/analysis/inundationAnalysis.vue";
|
||
import flyToLocation from "@/components/dialog/flyToLocation.vue";
|
||
import junbiao from "@/components/dialog/junbiao.vue";
|
||
import junbiao3d from "@/components/dialog/junbiao3d.vue";
|
||
import model from "@/components/dialog/model.vue";
|
||
import modelg from "@/components/dialog/modelg.vue";
|
||
import vrModel from "@/components/dialog/vrModel.vue";
|
||
import textModel from "@/components/dialog/textModel.vue";
|
||
import ModelSet from "@/components/dialog/ModelSet.vue";
|
||
import modelSelect from "@/components/dialog/modelSelect.vue";
|
||
import echartsTotal from "@/components/dialog/echartsTotal.vue";
|
||
import bimInfo from "@/components/dialog/bimInfo.vue";
|
||
import fightingDataStyle from "@/components/dialog/fightingDataStyle.vue";
|
||
import scene from "@/components/three/index.vue";
|
||
import rolePermission from "@/components/myHeaderAll/systemPopup/components/permission/permission.vue";
|
||
import gant from "../../components/gantt-next/gant.vue";
|
||
import modelTransform from "./modelTransform";
|
||
import DTH from "@/components/DTH/index";
|
||
// import flyer from "@/components/UAV2/index";
|
||
// import flyer2 from "@/components/UAV3/index";
|
||
import situationList from "@/components/situationList/index.vue";
|
||
import deduction from "@/components/TS/deduction.vue";
|
||
import cabin from "@/components/situationEdit/cabin.vue";
|
||
import elements from "@/components/situationEdit/element.vue";
|
||
import nodeType from "@/components/treeNode";
|
||
import newEvent from "@/components/Events/newEvent.vue";
|
||
import adddirectory from "../../components/dialog/adddirectory.vue";
|
||
import excelSet from "@/components/dialog/excelSet.vue";
|
||
import eventEditor from "@/components/TS/eventEditor/index.vue";
|
||
import tufuSelect from "@/components/dialog/tufu_select.vue";
|
||
import tactical from "@/components/dialog/tactical.vue";
|
||
import {
|
||
getSelectedNode,
|
||
getNodeData,
|
||
cusAddNodes,
|
||
cusRenderNode,
|
||
} from "@/components/Tree/treeNode";
|
||
import { addSource, delSource, checkAuth, linkFile } from "@/api/gisAPI";
|
||
import { eventList, tilesetAdd, tilesetList } from "@/api/aboutCabin";
|
||
import { obj } from "@/api/dataFromApi";
|
||
import { getIP } from "../../utils";
|
||
import { getToken } from "@/utils/auth";
|
||
import { cusNodeIcon } from "../../components/Tree/treeNode";
|
||
|
||
// import richTextEditor from "@/components/editor/richTextEditor.vue";
|
||
let handleLogin = (that) => {
|
||
// 需要登录就去掉“/dashboard”
|
||
that.$store
|
||
.dispatch("Login", {
|
||
host: "http://localhost:8890",
|
||
username: "admin",
|
||
password: "c30807e6587ade285ba7ade9f881b3d7",
|
||
})
|
||
.then(() => {
|
||
console.log("logined$$$$$$$$$$$$$$");
|
||
// that.createEarth();
|
||
// this.$router.push({path: '/'})
|
||
})
|
||
.catch(() => { });
|
||
};
|
||
|
||
export default {
|
||
name: "dashboard",
|
||
mixins: [modelTransform],
|
||
components: {
|
||
newEvent,
|
||
elements,
|
||
cabin,
|
||
deduction,
|
||
situationList,
|
||
eventEditor,
|
||
// flyer,
|
||
// flyer2,
|
||
DTH,
|
||
gant,
|
||
scene,
|
||
Tree,
|
||
rolePermission,
|
||
bottomMenu,
|
||
myHeaderAll,
|
||
firstMenu,
|
||
secondMenu,
|
||
editor,
|
||
selectImg,
|
||
profileAnalysis,
|
||
cutFill,
|
||
inundationAnalysis,
|
||
model,
|
||
modelSelect,
|
||
bimInfo,
|
||
fightingDataStyle,
|
||
echartsTotal,
|
||
junbiao,
|
||
junbiao3d,
|
||
flyToLocation,
|
||
vrModel,
|
||
textModel,
|
||
adddirectory,
|
||
// richTextEditor
|
||
// New,
|
||
// WangEditor
|
||
excelSet,
|
||
tufuSelect,
|
||
tactical,
|
||
ModelSet,
|
||
modelg
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
eventLists: [],
|
||
TSTYOBJ: {},
|
||
action: null,
|
||
// flyerDiv
|
||
flyerDiv: false,
|
||
flyerDiv2: false,
|
||
excelSetDialog: false,
|
||
//海东1021
|
||
goodSearchDialog: false,
|
||
goodSearchEmpty: false,
|
||
// 新增态势0827
|
||
showCabin: "",
|
||
showCabinBtn: "",
|
||
// 新增态势0821
|
||
showElement: "",
|
||
showElementBtn: "",
|
||
//新增态势
|
||
noSituation: true,
|
||
showBigData: false,
|
||
showList: false,
|
||
editSituation: false,
|
||
eventBox: false,
|
||
eventsList: false,
|
||
dialogTableVisible: false,
|
||
gisData: [],
|
||
multipleSelection: [],
|
||
// tasks: Store.tasks, //渲染的真实任务数据、
|
||
// scales: Store.scales,
|
||
host: localStorage.getItem("service"),
|
||
token: getToken(),
|
||
skinInfo: JSON.parse(localStorage.getItem("systemSetting")).skinInfo,
|
||
appVersion: "81", //localStorage.getItem("appVersion"),
|
||
fullScreenLoading: false,
|
||
transformDrawer: false,
|
||
State: true, //功能菜单的显示状态
|
||
imgsrc: "",
|
||
halfEarth: false,
|
||
|
||
richTextDialog: {
|
||
title: "true",
|
||
content: "<span style='color:red'>true</span>",
|
||
visible: false,
|
||
},
|
||
treeObj: null,
|
||
|
||
/* BillboardObject,
|
||
*PolygonObject,
|
||
PolylineObject,
|
||
Model,
|
||
Path,
|
||
Circle,
|
||
AttackArrow,
|
||
PincerArrow,*/
|
||
/*测试用*/
|
||
optionss: [
|
||
{
|
||
source_name: "点标注",
|
||
key: "DrawPoint",
|
||
source_type: "point",
|
||
className: "public",
|
||
},
|
||
/* {name: "线", source_name: "线标注", key: "DrawPolyline", source_type: "line",},
|
||
{name: "面", source_name: "面标注", key: "DrawPolygon", source_type: "panel",},
|
||
{name: "圆", source_name: "圆标注", key: "DrawCircle", source_type: "circle",},
|
||
{name: "箭头", source_name: "箭头", key: "DrawAttackArrow", source_type: "attackArrow",},
|
||
{name: "钳形箭头", source_name: "钳形箭头", key: "DrawPincerArrow", source_type: "pincerArrow",},
|
||
*/
|
||
],
|
||
/*测试用*/
|
||
options: [
|
||
{
|
||
value: "zh",
|
||
label: "中文简体",
|
||
},
|
||
{
|
||
value: "en",
|
||
label: "英文",
|
||
},
|
||
{
|
||
value: "tw",
|
||
label: "中文繁体",
|
||
},
|
||
],
|
||
value: "zh",
|
||
};
|
||
},
|
||
beforeMount() {
|
||
// this.appVersion="earth"
|
||
},
|
||
computed: {
|
||
...mapGetters(["name", "roles", "lang"]),
|
||
},
|
||
beforeCreate() {
|
||
// if (!(this.$store.getters.token))
|
||
// handleLogin(this)
|
||
//新增态势
|
||
// window.Store = new TSTY.store();
|
||
// window.Clock = new TSTY.clock();
|
||
},
|
||
mounted() {
|
||
ipcRenderer.on("udpServerError",(e,msg)=>{
|
||
this.$message.error(msg);
|
||
})
|
||
ipcRenderer.on("udpServerSuccess",(e,msg)=>{
|
||
this.$message.success(msg);
|
||
})
|
||
// new Notification("这是标题", {
|
||
// body: "这是正文",
|
||
// icon:
|
||
// "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
|
||
// requireInteraction: true,
|
||
// image:
|
||
// "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
|
||
// });
|
||
window.$dth = this.$refs.dth;
|
||
|
||
// this.appVersion=localStorage.getItem("appVersion")
|
||
const that = this;
|
||
// this.imgsrc=require('@/assets/images/'+'81'+'/'+this.skinInfo+'/logo.png')
|
||
window.addEventListener("setItemEvent", (e) => {
|
||
if (e.key == "systemSetting") {
|
||
let obj = JSON.parse(e.newValue);
|
||
that.skinInfo = obj.skinInfo;
|
||
}
|
||
});
|
||
window.$root_home_index = this;
|
||
// // this.$nextTick(() => {
|
||
// this.createEarth()
|
||
this.value = this.$i18n.locale;
|
||
//
|
||
/*YJMap.on().then(() => {
|
||
window.map2d = new YJMap.Map("map2d")
|
||
})*/
|
||
this.$recvChanel("checkSituation", () => {
|
||
this.removeEarth1();
|
||
});
|
||
//测试用
|
||
this.$recvChanel("getTreeObj", (treeObj) => {
|
||
console.log(treeObj);
|
||
this.treeObj = treeObj;
|
||
this.$removeChanel("getTreeObj");
|
||
});
|
||
// checkAuth(res => {
|
||
// // console.log(res)
|
||
// // this.authInfo = res
|
||
// })
|
||
//测试用
|
||
|
||
// this.changeState()
|
||
window.addEventListener("openEventBox", () => {
|
||
console.log("++++++++++++++++++++++++++++");
|
||
this.eventBox = true;
|
||
this.$nextTick(() => {
|
||
window.dispatchEvent(window.EventsNameMap.get("initEvent"));
|
||
});
|
||
});
|
||
// this.create();
|
||
|
||
//
|
||
this.$recvChanel("linkFile", () => {
|
||
this.importPath();
|
||
});
|
||
this.$recvChanel('panoramaFile', () => {
|
||
this.importPath2()
|
||
})
|
||
|
||
|
||
this.systemSetting = JSON.parse(localStorage.getItem("systemSetting"));
|
||
// this.systemSetting.skinInfo = this.system.skin
|
||
if (this.systemSetting.sheetIndexStatusSwitch) {
|
||
this.$changeComponentShow(".tufuSelect", true);
|
||
} else {
|
||
this.$changeComponentShow(".tufuSelect", false);
|
||
}
|
||
},
|
||
methods: {
|
||
// 上传链接link
|
||
uploadFile(event) {
|
||
let files = event.target.files;
|
||
console.log("files", files);
|
||
|
||
if (files.length > 0) {
|
||
const formData = new FormData();
|
||
for (let i = 0; i < files.length; i++) {
|
||
const element = files[i];
|
||
formData.append("files", element);
|
||
}
|
||
|
||
// 创建loading实例
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '上传中 0%',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
|
||
// 配置axios请求
|
||
this.$axios({
|
||
method: 'post',
|
||
url: getIP() + '/yjearth4.0/api/v1/linkFile/import',
|
||
data: formData,
|
||
headers: {
|
||
'token': getToken()
|
||
},
|
||
onUploadProgress: (progressEvent) => {
|
||
if (progressEvent.lengthComputable) {
|
||
const percentComplete = Math.round((progressEvent.loaded / progressEvent.total) * 100);
|
||
loading.text = `上传中 ${percentComplete}%`;
|
||
}
|
||
}
|
||
}).then(response => {
|
||
loading.close();
|
||
const res = response.data;
|
||
if (res.code == 0) {
|
||
this.$message.success("上传成功");
|
||
this.$sendChanel("linkFileData", res.data.list);
|
||
} else {
|
||
this.$message.error(res.message || "上传失败");
|
||
}
|
||
}).catch(error => {
|
||
loading.close();
|
||
this.$message.error("上传失败: " + error.message);
|
||
});
|
||
}
|
||
},
|
||
// 上传全景
|
||
uploadFile2(event) {
|
||
let files = event.target.files;
|
||
if (files.length > 0) {
|
||
const formData = new FormData();
|
||
for (let i = 0; i < files.length; i++) {
|
||
const element = files[i];
|
||
formData.append("files", element);
|
||
}
|
||
|
||
// 创建loading实例
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '上传中 0%',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
|
||
// 配置axios请求
|
||
this.$axios({
|
||
method: 'post',
|
||
url: getIP() + '/yjearth4.0/api/v1/linkFile/import',
|
||
data: formData,
|
||
headers: {
|
||
'token': getToken()
|
||
},
|
||
onUploadProgress: (progressEvent) => {
|
||
if (progressEvent.lengthComputable) {
|
||
const percentComplete = Math.round((progressEvent.loaded / progressEvent.total) * 100);
|
||
loading.text = `上传中 ${percentComplete}%`;
|
||
}
|
||
}
|
||
}).then(response => {
|
||
loading.close();
|
||
const res = response.data;
|
||
if (res.code == 0) {
|
||
this.$message.success("上传成功");
|
||
this.$sendChanel("panoramaFileData", res.data.list);
|
||
} else {
|
||
this.$message.error(res.message || "上传失败");
|
||
}
|
||
}).catch(error => {
|
||
loading.close();
|
||
this.$message.error("上传失败: " + error.message);
|
||
});
|
||
}
|
||
},
|
||
// 导入链接link
|
||
importPath() {
|
||
document.getElementById("fileInputlink").click();
|
||
// this.$removeChanel("fileInputlink");
|
||
},
|
||
// 导入链接link
|
||
importPath2() {
|
||
document.getElementById("fileInputPanorama").click();
|
||
// this.$removeChanel("fileInputPanorama");
|
||
},
|
||
|
||
//新增态势0822
|
||
changeShow(key1, key2) {
|
||
this[key1] = !this[key1];
|
||
// this[key2]=!this[key2]
|
||
setTimeout(() => {
|
||
this[key2] = !this[key2];
|
||
}, 500);
|
||
},
|
||
// 创建地球
|
||
create() {
|
||
this.noSituation = !this.noSituation;
|
||
this.showBigData = true;
|
||
this.$nextTick(() => {
|
||
window.$createEarth();
|
||
});
|
||
},
|
||
|
||
//新增态势
|
||
closeSituation() {
|
||
//退出态势
|
||
this.noSituation = !this.noSituation;
|
||
this.showList = !this.showList;
|
||
this.$nextTick(() => {
|
||
window.$createEarth();
|
||
});
|
||
// 新增态势0910
|
||
remote.getCurrentWindow().setFullScreen(false);
|
||
// this.openEarth();
|
||
},
|
||
closeSituationEdit() {
|
||
// 新增态势0906
|
||
|
||
if (window.Earth1) {
|
||
window.draw && window.draw.end();
|
||
Array.from(ts_Map.values()).forEach((entity) => entity.remove());
|
||
|
||
ts_Map.clear();
|
||
window.Earth1.destroy();
|
||
window.Earth1 = null;
|
||
}
|
||
this.$refs.Deduction.stop();
|
||
this.editSituation = !this.editSituation;
|
||
this.eventsList = false;
|
||
this.showList = !this.showList;
|
||
// //新增态势0824
|
||
this.showElementBtn = "";
|
||
this.showCabinBtn = "";
|
||
this.showCabin = "";
|
||
this.showElement = "";
|
||
//
|
||
// this.eventBox = false;
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs.situation.getList();
|
||
});
|
||
},
|
||
getRowKey(row) {
|
||
// 需要为每一行设置一个唯一标识，这里假设每行的id是唯一的
|
||
return row.ID;
|
||
},
|
||
addResource() {
|
||
let ztreeObj = $.fn.zTree.getZTreeObj("treeDemos");
|
||
let nodes = ztreeObj.getSelectedNodes();
|
||
let p_id = 0;
|
||
if (nodes.length) {
|
||
p_id = nodeType[nodes[0].type].allowChildren
|
||
? nodes[0].id
|
||
: nodes[0].p_id;
|
||
}
|
||
let tilesetArr = [];
|
||
let allNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
|
||
allNodes.forEach(
|
||
(item) => item.source_id && tilesetArr.push(item.source_id)
|
||
);
|
||
this.multipleSelection.forEach((item) => {
|
||
if (item.source_id && tilesetArr.includes(item.source_id)) {
|
||
console.log("已经添加过该资源");
|
||
} else {
|
||
let param = {};
|
||
param.p_id = p_id;
|
||
param.name = item.source_name;
|
||
param.tree_index = item.tree_index;
|
||
param.type = item.source_type;
|
||
param.source_id = item.source_id;
|
||
param.detail = {
|
||
layer_index: item.layer_index,
|
||
params: item.detail,
|
||
};
|
||
tilesetAdd(param, (res) => {
|
||
console.log("render数据资源");
|
||
this.dialogTableVisible = false;
|
||
let idKey = ztreeObj.setting.data.simpleData.idKey;
|
||
let parentNode = ztreeObj.getNodeByParam(idKey, param.p_id, null);
|
||
res.icon = cusNodeIcon(res);
|
||
res.children = null;
|
||
let newNodes = ztreeObj.addNodes(parentNode, [res]);
|
||
nodeType[res.type].render(res);
|
||
ztreeObj.updateNode(newNodes[0]);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fetchData() {
|
||
tilesetList({}, (res) => {
|
||
// console.log(res);
|
||
this.gisData = res.list.length ? res.list : [];
|
||
|
||
let ztreeObj = $.fn.zTree.getZTreeObj("treeDemos");
|
||
let nodes = ztreeObj.transformToArray(ztreeObj.getNodes());
|
||
let tilesetArr = [];
|
||
|
||
nodes.forEach(
|
||
(item) => item.source_id && tilesetArr.push(item.source_id)
|
||
);
|
||
console.log("tilesetArr", tilesetArr);
|
||
console.log(this.gisData);
|
||
setTimeout(() => {
|
||
for (let i = 0; i < this.gisData.length; i++) {
|
||
let item = this.gisData[i];
|
||
console.log(this.$refs.multipleTable.toggleRowSelection);
|
||
console.log(item);
|
||
console.log(tilesetArr.includes(item.source_id));
|
||
if (item.source_id && tilesetArr.includes(item.source_id)) {
|
||
this.$refs.multipleTable.toggleRowSelection(item, true);
|
||
}
|
||
}
|
||
}, 10);
|
||
});
|
||
},
|
||
handleSelectionChange(val) {
|
||
console.log(val);
|
||
this.multipleSelection = val;
|
||
},
|
||
openSituationEdit(plan) {
|
||
window.currentPlan = plan;
|
||
eventList({ plan_id: plan.ID || plan.plan_id }, (res) => {
|
||
console.log("eventList", res);
|
||
this.eventLists = res.list
|
||
this.eventsList = true;
|
||
window.TSTYOBJ = window.TSTY.init({
|
||
startTimestamp: plan.plan_create_time,
|
||
tasks: this.eventLists,
|
||
scales: { preMainIndex: 2 }
|
||
});
|
||
this.action = window.TSTYOBJ.initAction()
|
||
this.TSTYOBJ = window.TSTYOBJ
|
||
this.$nextTick(() => {
|
||
TSTYOBJ.store.init()
|
||
TSTYOBJ.renderLine(this.$nextTick)
|
||
TSTYOBJ.renderLabel({ left: 0 })
|
||
TSTYOBJ.store.updateTimeLineRightRest()
|
||
})
|
||
this.showList = !this.showList;
|
||
this.editSituation = !this.editSituation;
|
||
this.createEarth("earthContainers");
|
||
|
||
/*
|
||
|
||
console.log("eventList", res);
|
||
// obj.tasks = res.list;
|
||
let arr = [];
|
||
res.list.forEach((item) => {
|
||
arr.push(window.Store.databaseToTimeline(item));
|
||
});
|
||
obj.tasks = arr;
|
||
obj.startTimestamp = plan.plan_create_time;
|
||
window.Store.initData(obj);
|
||
// window.Clock = new TSTY.clock();
|
||
this.scales = Store.scales;
|
||
this.tasks = Store.tasks;
|
||
|
||
this.showList = !this.showList;
|
||
this.editSituation = !this.editSituation;
|
||
this.createEarth("earthContainers");
|
||
this.eventsList = true;
|
||
this.$nextTick(() => {
|
||
window.Store.setFullWidth();
|
||
});*/
|
||
});
|
||
},
|
||
removeEarth1() {
|
||
/* Array.from(_entityMap.values()).forEach(
|
||
(entity) => entity && entity.remove()
|
||
);*/
|
||
_entityMap.clear();
|
||
if (window.Earth1) {
|
||
window.Earth1.destroy();
|
||
window.Earth1 = null;
|
||
}
|
||
this.noSituation = !this.noSituation;
|
||
this.showList = !this.showList;
|
||
this.$nextTick(() => {
|
||
this.$refs.situation.getList();
|
||
});
|
||
},
|
||
changeState() {
|
||
this.State = !this.State;
|
||
let bottomMenuMove = [
|
||
"animate__fadeInLeftBig",
|
||
"animate__fadeOutLeftBig",
|
||
];
|
||
let leftMenuMove = ["animate__fadeInUpBig", "animate__fadeOutDownBig"];
|
||
|
||
let add = 1,
|
||
remove = 0;
|
||
|
||
let left_second = document.querySelector(".left_second");
|
||
if (!this.State) {
|
||
left_second.style.display = "none";
|
||
}
|
||
|
||
if (this.State) {
|
||
add = 0;
|
||
remove = 1;
|
||
}
|
||
$(".bottomMenu").removeClass(bottomMenuMove[remove]);
|
||
$(".bottomMenu").addClass(bottomMenuMove[add]);
|
||
$(".left").removeClass(leftMenuMove[remove]);
|
||
$(".left").addClass(leftMenuMove[add]);
|
||
},
|
||
tongbu() {
|
||
this.$refs.firstMenu.tongbu2D();
|
||
},
|
||
// videoStop(){
|
||
// this.$changeComponentShow('.videoStop', false)
|
||
// this.$sendElectronChanel('endRecoder')
|
||
// },
|
||
flyToView() {
|
||
console.log("2222222222flyToView");
|
||
console.log(111111, localStorage.getItem("defaultView"));
|
||
if (localStorage.getItem("defaultView"))
|
||
YJ.Global.flyTo(JSON.parse(localStorage.getItem("defaultView")));
|
||
},
|
||
closeEditor() {
|
||
this.$sendChanel("closeEditor");
|
||
this.$changeComponentShow("#modal", false);
|
||
this.richTextDialog.visible = false;
|
||
},
|
||
/* save() {
|
||
this.$sendChanel("saveRichText")
|
||
this.$sendChanel("closeEditor")
|
||
this.richTextDialog.visible = false
|
||
},*/
|
||
cancel() {
|
||
this.$changeComponentShow("#modal", false);
|
||
this.$sendChanel("closeEditor");
|
||
this.richTextDialog.visible = false;
|
||
},
|
||
//测试用
|
||
addMarker(option) {
|
||
let selectedNode = getSelectedNode(this.treeObj);
|
||
if (selectedNode) {
|
||
let DbOption = JSON.parse(JSON.stringify(option));
|
||
let source_id = this.$md5(new Date().getTime() + option.source_name);
|
||
DbOption.source_id = source_id;
|
||
DbOption.p_id = selectedNode.source_id;
|
||
|
||
let draw = new YJ.Draw[option.key]();
|
||
draw.start((err, params) => {
|
||
console.log(params);
|
||
let detailOption = {};
|
||
if (
|
||
Object.prototype.toString.call(params) === "[object Object]" &&
|
||
!params.hasOwnProperty("lng")
|
||
) {
|
||
detailOption = params;
|
||
} else {
|
||
detailOption = { position: params, name: option.source_name };
|
||
}
|
||
if (err) throw err;
|
||
//node上树，node存数据库
|
||
let node = getNodeData(DbOption, detailOption);
|
||
console.log(DbOption);
|
||
addSource(node).then((res) => {
|
||
if ([0, 200].includes(res.code)) {
|
||
cusRenderNode(DbOption);
|
||
cusAddNodes(this.treeObj, selectedNode, [node]);
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.$message.warning("请选中一节点后操作");
|
||
}
|
||
},
|
||
|
||
/*langChange() {
|
||
this.$store.dispatch("changeLang", this.value)
|
||
this.$store.dispatch("changeIconSingleColor", "red")
|
||
console.log("lang", this.lang)
|
||
},*/
|
||
createEarth(domId) {
|
||
this.$nextTick(() => {
|
||
console.log("$nextTick");
|
||
if (YJ) {
|
||
window.Earth1 = new YJ.YJEarth(domId);
|
||
window.earth = window.Earth1;
|
||
YJ.Global.CesiumContainer(Earth1, { compass: false, legend: false });
|
||
YJ.Global.setGroundCover(true);
|
||
this.$refs.cabin.getSourceList();
|
||
window.Earth1.tabHide = ["属性信息"];
|
||
}
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
.dashboard {
|
||
&-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
|
||
//海东1021
|
||
.goodSearch {
|
||
z-index: 999;
|
||
|
||
.contentBox {
|
||
border: 1.5px solid;
|
||
backdrop-filter: blur(2px);
|
||
background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
|
||
rgba(0, 0, 0, 0.6);
|
||
width: 650px;
|
||
height: 400px;
|
||
position: absolute;
|
||
color: #fff;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-image: linear-gradient(to bottom,
|
||
rgb(0, 255, 255) 6.25%,
|
||
rgb(0, 200, 255) 100%) 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.titleBox {
|
||
height: 50px;
|
||
|
||
.title {
|
||
line-height: 50px;
|
||
padding-left: 15px;
|
||
font-size: 20px;
|
||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||
}
|
||
|
||
.closeBox {
|
||
right: 0;
|
||
position: absolute;
|
||
display: inline-block;
|
||
width: 35px;
|
||
height: 33px;
|
||
border-radius: 0 0 0 90%;
|
||
background: #00ffff;
|
||
|
||
&>span {
|
||
font-size: 22px;
|
||
position: absolute;
|
||
right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
#goodSearchEchart {
|
||
flex: auto;
|
||
}
|
||
|
||
.hr {
|
||
width: 89%;
|
||
margin: 0 auto;
|
||
border-bottom: 1px solid rgba(204, 204, 204, 0.2);
|
||
}
|
||
|
||
&:after {
|
||
display: block;
|
||
position: absolute;
|
||
content: "";
|
||
left: -1.5px;
|
||
top: -6px;
|
||
width: 70.5px;
|
||
height: 6px;
|
||
opacity: 1;
|
||
background: rgba(0, 255, 255, 1);
|
||
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
|
||
}
|
||
}
|
||
}
|
||
|
||
//height: calc(100vh - 50px);
|
||
//margin: 30px;
|
||
#earth {
|
||
display: flex;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
#earths {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: none;
|
||
}
|
||
|
||
.halfEarth {
|
||
display: block !important;
|
||
width: 50vw !important;
|
||
}
|
||
|
||
.zIndex1 {
|
||
z-index: -1;
|
||
}
|
||
|
||
.selectedEarthCss {
|
||
//border: 1px solid red;
|
||
padding: 2px;
|
||
}
|
||
|
||
.svg-container {
|
||
display: inline-block;
|
||
//border: 1px solid red;
|
||
}
|
||
|
||
.bottomMenuBox,
|
||
.leftBox {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.selectImgBox,
|
||
.profileAnalysisBox,
|
||
.cutFillBox,
|
||
.inundationAnalysisBox,
|
||
.flyToLocationBox,
|
||
.tongbu,
|
||
.modelSelectBox,
|
||
.bimInfoBox,
|
||
.echartsTotalBox,
|
||
.modelBox,
|
||
.vrModelBox,
|
||
.scene,
|
||
.editor,
|
||
.junbiaoBox,
|
||
.textModelBox,
|
||
.junbiao3dBox,
|
||
.videoStop,
|
||
.adddirectoryBox,
|
||
.excelSetBox,
|
||
.tufuSelect,
|
||
.tacticalBox,
|
||
.ModelSetBox,
|
||
.modelBoxg {
|
||
display: none;
|
||
}
|
||
|
||
.selectImgBox {
|
||
z-index: 9999999;
|
||
}
|
||
.ModelSetBox{
|
||
z-index: 10000;
|
||
}
|
||
|
||
.scene {
|
||
//width: 5vw;
|
||
//height: 5vw;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
//border: 1px solid red;
|
||
background: #808080;
|
||
}
|
||
|
||
.logo {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
bottom: 10px;
|
||
left: 20px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.richTextDialogBox {
|
||
position: absolute;
|
||
//border: 1px solid red;
|
||
width: 1090px;
|
||
height: 600px;
|
||
z-index: 2003;
|
||
}
|
||
|
||
#modal {
|
||
position: fixed;
|
||
z-index: 99;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .el-dialog {
|
||
height: 600px;
|
||
|
||
.el-dialog__body {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-text {
|
||
font-size: 30px;
|
||
line-height: 46px;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.dashboard-container {
|
||
|
||
//新增态势0830
|
||
.cabinShowBtn {
|
||
z-index: 9999;
|
||
//display: none;
|
||
position: absolute;
|
||
top: calc(50% - 225px);
|
||
|
||
.switch-node-outer {
|
||
position: relative;
|
||
background: #0ff;
|
||
clip-path: polygon(0% calc(var(--width) + var(--innerBorder)),
|
||
100% 0%,
|
||
100% 100%,
|
||
0% calc(100% - var(--width) - var(--innerBorder)));
|
||
padding: calc(var(--innerBorder) * 1.42) var(--innerBorder);
|
||
|
||
.switch-node-inner {
|
||
clip-path: polygon(0% var(--width),
|
||
100% var(--innerBorder),
|
||
100% calc(100% - var(--innerBorder)),
|
||
0% calc(100% - var(--width)));
|
||
//clip-path: polygon(0% var(--innerBorder), 100% var(--width), 100% calc(100% - 30px), 0% calc(100% - 3px));
|
||
cursor: pointer;
|
||
writing-mode: vertical-lr;
|
||
padding: calc(var(--width) * 1.1) 0;
|
||
width: var(--width);
|
||
line-height: var(--width);
|
||
background: var(--bg-color);
|
||
color: #0ff;
|
||
letter-spacing: 2.5px;
|
||
/* border: 1.5px solid rgba(0, 255, 255, 1); */
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.timeline-container {
|
||
position: absolute;
|
||
width: 100vw;
|
||
//height: 230px;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
bottom: 0;
|
||
|
||
.area {
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
//新增态势0822
|
||
.elementShowBtn {
|
||
z-index: 9999;
|
||
//display: none;
|
||
position: absolute;
|
||
//新增态势0827
|
||
//left: 0%;
|
||
top: calc(50% - 225px);
|
||
/*transform: translateY(-50%);*/
|
||
|
||
.switch-node-outer {
|
||
position: relative;
|
||
|
||
//width: var(--width);
|
||
clip-path: polygon(0% 0%,
|
||
100% calc(var(--width) + var(--innerBorder)),
|
||
100% calc(100% - var(--width) - var(--innerBorder)),
|
||
0% 100%);
|
||
//clip-path: polygon(0% 0%, 100% 33px, 100% calc(100% - 33px), 0% 100%);
|
||
padding: calc(var(--innerBorder) * 1.42) var(--innerBorder);
|
||
//padding: 4.6px 3px;
|
||
background: #0ff;
|
||
|
||
.switch-node-inner {
|
||
clip-path: polygon(0% var(--innerBorder),
|
||
100% var(--width),
|
||
100% calc(100% - var(--width)),
|
||
0% calc(100% - var(--innerBorder)));
|
||
//clip-path: polygon(0% var(--innerBorder), 100% var(--width), 100% calc(100% - 30px), 0% calc(100% - 3px));
|
||
cursor: pointer;
|
||
writing-mode: vertical-lr;
|
||
padding: calc(var(--width) * 1.1) 0;
|
||
width: var(--width);
|
||
line-height: var(--width);
|
||
background: var(--bg-color);
|
||
color: #0ff;
|
||
letter-spacing: 2.5px;
|
||
/* border: 1.5px solid rgba(0, 255, 255, 1); */
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cabinShowBtn {
|
||
right: 0%;
|
||
}
|
||
|
||
//新增态势
|
||
&>.content {
|
||
background: url("../../assets/img/bkgif@3x.gif") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100vw;
|
||
height: 100vh !important;
|
||
position: absolute;
|
||
z-index: 9;
|
||
}
|
||
|
||
.icon-top {
|
||
//width: 100%;
|
||
//height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
position: absolute;
|
||
width: vw(1920) !important;
|
||
//height: 8.888vh;
|
||
height: vh(96) !important;
|
||
//background: linear-gradient(180deg, rgba(0, 33, 36, 1) 0%, rgba(0, 38, 41, 1) 25.47%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
|
||
.timeline-content {
|
||
position: absolute;
|
||
width: 100vw;
|
||
height: vh(295);
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
bottom: 0;
|
||
background: url("../../assets/img/timeLinePanelBg.png") no-repeat 50% 100%;
|
||
background-size: cover;
|
||
|
||
.area {
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.icon-tuichu {
|
||
position: absolute;
|
||
top: vh(5);
|
||
right: vw(5);
|
||
z-index: 999;
|
||
width: vw(24) !important;
|
||
height: vh(24) !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.icon-tuichudenglu {
|
||
position: absolute;
|
||
z-index: 999;
|
||
width: vw(26);
|
||
height: vh(26);
|
||
right: vw(8);
|
||
top: vh(8);
|
||
}
|
||
|
||
.titles {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: px2font(40);
|
||
top: vh(19);
|
||
line-height: px2font(50);
|
||
font-family: "alimamashuheiti";
|
||
z-index: 999;
|
||
position: absolute;
|
||
color: #fff;
|
||
}
|
||
|
||
.elementBox,
|
||
.cabinBox {
|
||
width: vw(343);
|
||
height: vh(662);
|
||
position: absolute;
|
||
z-index: 9999;
|
||
top: vh(145);
|
||
border: vw(1.5) solid rgba(0, 255, 255, 1);
|
||
background: linear-gradient(180deg,
|
||
rgba(0, 255, 255, 0.2) 0%,
|
||
rgba(0, 255, 255, 0) 100%),
|
||
rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
}
|
||
|
||
.eventEditor {
|
||
border: 1px solid;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 999;
|
||
color: #fff;
|
||
background: rgba(0, 63, 63, 1);
|
||
overflow-y: auto;
|
||
font-size: px2font(16);
|
||
}
|
||
|
||
.elementBox {
|
||
left: vw(30);
|
||
}
|
||
|
||
.cabinBox {
|
||
right: vw(30);
|
||
}
|
||
|
||
//新增态势结束
|
||
.el-dialog {
|
||
height: 600px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.el-dialog__body {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
flex: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
#richTextEditor {
|
||
flex: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.w-e-text-container {
|
||
flex: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.transformDrawerContent {
|
||
padding-left: 15px;
|
||
|
||
.btn {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.transformDrawerItem {
|
||
padding-left: 10px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 5px;
|
||
|
||
>span {
|
||
display: block;
|
||
width: 115px;
|
||
/* align-content: center; */
|
||
}
|
||
}
|
||
}
|
||
|
||
.fightingDataStyleBox {
|
||
display: none;
|
||
}
|
||
|
||
.movie {
|
||
top: 0.1vh;
|
||
left: 0;
|
||
width: 98vw;
|
||
// display: none;
|
||
//height: 240px !important;
|
||
}
|
||
}
|
||
</style>
|