<template>
|
<div id="sdkContainer"></div>
|
<header-box></header-box>
|
|
<transition name="el-zoom-in-bottom" v-show="data.showlogo">
|
<div class="nav_bg">
|
<div class="nav">
|
<div class="bj_box" @click="BJclick('bj')">
|
<span>{{ data.BJtext }}</span>
|
</div>
|
<div class="yc_box" @click="BJclick('yj')">
|
<span>{{ data.YJtext }}</span>
|
</div>
|
<div class="RLTZ" v-show="dialog.RLT_isshow">
|
<div class="topz">10mg/m³</div>
|
<img src="../assets/img/rltl.jpg" alt="" />
|
<div class="bottomz">0mg/m³</div>
|
</div>
|
<div class="nav_btn">
|
<div
|
v-for="(e, i) in btnArr"
|
:key="i"
|
class="btn_animation"
|
:class="`btn${e.num}`"
|
>
|
<div
|
@click.self="select(e)"
|
class="f_icon"
|
:style="
|
e.isActive
|
? `background: url(${require(`../assets/img/${e.backgroundy}`)}) no-repeat center;background-size: 100% 100%;`
|
: `background: url(${require(`../assets/img/${e.background}`)}) no-repeat center;background-size: 100% 100%;`
|
"
|
></div>
|
<div
|
:class="e.isActive ? `b_titley` : `b_title`"
|
:data-text="e.name"
|
@click.self="select(e)"
|
>
|
{{ e.name }}
|
</div>
|
<div class="chlid_box" v-if="e.child.length" v-show="e.isActive">
|
<!-- <div class="left_b"></div>
|
<div class="right_b"></div> -->
|
<div
|
class="child_btn"
|
v-for="(v, i) in e.child"
|
:key="i"
|
@click.stop="chlidSelect(v)"
|
>
|
<div
|
class="c_icon"
|
:style="
|
v.isActive
|
? `background: url(${require(`../assets/img/${v.backgroundy}`)}) no-repeat center;background-size: 100% 100%;`
|
: `background: url(${require(`../assets/img/${v.background}`)}) no-repeat center;background-size: 100% 100%;`
|
"
|
></div>
|
<div
|
:class="v.isActive ? `c_titley` : `c_title`"
|
:data-text="v.name"
|
>
|
{{ v.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="operate_btn">
|
<el-button id="FS_btn" size="small" @click="FSbtn">俯视</el-button>
|
</div>
|
</div>
|
</div>
|
</transition>
|
<transition name="el-zoom-in-center" v-show="data.showlogo">
|
<div class="chlid_btnbox">
|
<div
|
class="child_btn"
|
v-for="(v, i) in childBtn"
|
:key="i"
|
@click.stop="chlidSelect(v)"
|
>
|
<div
|
class="c_icon"
|
:style="
|
v.isActive
|
? `background: url(${require(`../assets/img/${v.backgroundy}`)}) no-repeat center;background-size: 100% 100%;`
|
: `background: url(${require(`../assets/img/${v.background}`)}) no-repeat center;background-size: 100% 100%;`
|
"
|
></div>
|
<div :class="v.isActive ? `c_titley` : `c_title`" :data-text="v.name">
|
{{ v.name }}
|
</div>
|
</div>
|
</div>
|
</transition>
|
|
<div class="weather_box_c" v-show="dialog.weather_isshow">
|
<div class="popout_title">天气操作面板</div>
|
<!-- <div class="close" @click="popoutClose('HJ')"></div> -->
|
<weather
|
@changeWeather="changeWeather"
|
@timeData="timeData"
|
:weatherData="data.weatherData"
|
></weather>
|
</div>
|
|
<div class="chart_box" v-if="dialog.chart_isshow">
|
<div class="popout_title">曲线统计图</div>
|
<div class="close" @click="popoutClose('QX')"></div>
|
|
<chart :POIName="data.POIName" :POIType="data.POIType"></chart>
|
</div>
|
<transition name="el-zoom-in-center" v-show="data.showlogo">
|
<poiList></poiList>
|
</transition>
|
<!-- <datePicker v-show="dialog.datePicker_isshow"></datePicker> -->
|
<BJlist :POIListData="data.BJlist" v-show="dialog.BJbox_isshow"></BJlist>
|
<YJlist :POIListData="data.YJlist" v-show="dialog.YJbox_isshow"></YJlist>
|
<SYFX
|
:SYPOIname="data.POIName"
|
@toggleFK="toggleFK"
|
v-if="dialog.SYbox_isshow"
|
></SYFX>
|
<SYFK :SYPOIname="data.POIName" :syfkData="syfkData" v-if="showFk"></SYFK>
|
<WGlist v-if="dialog.WGbox_isshow"></WGlist>
|
<SZSZ v-show="dialog.SZbox_isshow"></SZSZ>
|
<BGDC v-show="dialog.BGbox_isshow"></BGDC>
|
<SWRLT v-if="dialog.SWbox_isshow"></SWRLT>
|
<datePicker v-show="dialog.datePicker_isshow"></datePicker>
|
<YCWG v-show="dialog.datePicker_isshow"></YCWG>
|
<gjfx v-show="showXGZS"></gjfx>
|
<zqlfx v-show="showXGZS"></zqlfx>
|
<zdmax v-show="showXGZS"></zdmax>
|
<zdbh v-show="showXGZS"></zdbh>
|
|
<div class="video_box" v-if="dialog.dialogVisible">
|
<video
|
:src="dialog.videoUrl"
|
controls="controls"
|
autoplay
|
muted
|
style="width: 100%"
|
></video>
|
</div>
|
</template>
|
<script>
|
//头部
|
import headerBox from "@/views/header.vue";
|
import InitMap from "@/assets/js/Map/index.js";
|
//左侧菜单
|
import menus from "@/views/menus.vue";
|
import { ref, reactive, onBeforeUnmount, onMounted } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import weather from "@/views/weather.vue";
|
import chart from "@/components/chart.vue";
|
// import timeBox from "@/components/time.vue";
|
import poiList from "@/components/poiList.vue";
|
import SYFX from "@/components/SYFX.vue";
|
import datePicker from "@/components/datePicker.vue";
|
import BJlist from "@/components/BJlist.vue";
|
import YJlist from "@/components/YJlist.vue";
|
import WGlist from "@/components/WGlist.vue";
|
import SZSZ from "@/components/SZSZ.vue";
|
import BGDC from "@/components/BGDC.vue";
|
import SWRLT from "@/components/SWRLT.vue";
|
// import operation from "@/components/operation.vue";
|
import rlt from "/public/json/ewr1.json";
|
import gjfx from "@/components/xgzs/gjfx.vue";
|
import zqlfx from "@/components/xgzs/zqlfx.vue";
|
import zdmax from "@/components/xgzs/zdmax.vue";
|
import zdbh from "@/components/xgzs/zdbh.vue";
|
import YCWG from "@/components/YCWG.vue";
|
import {
|
queryWeatherList,
|
queryLocaltion,
|
twodreliControllerbyt,
|
getRunAlarm,
|
getRunWarning,
|
} from "@/api/api.js";
|
|
import axios from "axios";
|
|
import { useStore } from "vuex";
|
import SYFK from "../components/SYFK.vue";
|
export default {
|
components: {
|
weather,
|
chart,
|
poiList,
|
datePicker,
|
SYFX,
|
BJlist,
|
WGlist,
|
SZSZ,
|
BGDC,
|
YJlist,
|
SWRLT,
|
SYFK,
|
gjfx,
|
zqlfx,
|
zdmax,
|
zdbh,
|
YCWG,
|
headerBox,
|
},
|
|
setup(props, { emit }) {
|
const store = useStore();
|
let childBtn = reactive([
|
{
|
isActive: false,
|
name: "风场模拟",
|
background: "fc.png",
|
backgroundy: "fcy.png",
|
},
|
{
|
isActive: false,
|
name: "污染物模拟",
|
background: "wr.png",
|
backgroundy: "wry.png",
|
},
|
{
|
isActive: false,
|
name: "二维污染物",
|
background: "ew.png",
|
backgroundy: "ewy.png",
|
},
|
{
|
isActive: false,
|
name: "三维污染物",
|
background: "ew.png",
|
backgroundy: "ewy.png",
|
},
|
{
|
isActive: false,
|
name: "监控点位",
|
background: "jk.png",
|
backgroundy: "jky.png",
|
},
|
{
|
isActive: false,
|
name: "排放点位",
|
background: "pf.png",
|
backgroundy: "pfy.png",
|
},
|
{
|
isActive: false,
|
name: "天气特效",
|
background: "tq.png",
|
backgroundy: "tqy.png",
|
},
|
// {
|
// isActive: false,
|
// name: "网格工具",
|
// background: "wg1.png",
|
// backgroundy: "wg1y.png",
|
// },
|
]);
|
let btnArr = reactive([
|
{
|
num: 1,
|
isActive: true,
|
background: "tc.png",
|
backgroundy: "tcy.png",
|
name: "效果展示",
|
child: [],
|
},
|
{
|
num: 2,
|
isActive: false,
|
background: "sy.png",
|
backgroundy: "syy.png",
|
name: "溯源分析",
|
child: [],
|
},
|
{
|
num: 3,
|
isActive: false,
|
background: "yc.png",
|
backgroundy: "ycy.png",
|
name: "预测分析",
|
child: [],
|
},
|
{
|
num: 5,
|
isActive: false,
|
background: "zn.png",
|
backgroundy: "zny.png",
|
name: "智能管理",
|
child: [
|
{
|
isActive: false,
|
name: "智能报告",
|
background: "dc.png",
|
backgroundy: "dcy.png",
|
},
|
],
|
},
|
{
|
num: 7,
|
isActive: false,
|
background: "cg.png",
|
backgroundy: "cgy.png",
|
name: "系统设置",
|
child: [
|
{
|
isActive: false,
|
name: "网格工具",
|
background: "wg1.png",
|
backgroundy: "wg1y.png",
|
},
|
{
|
isActive: false,
|
name: "阈值设置",
|
background: "yz.png",
|
backgroundy: "yzy.png",
|
},
|
],
|
},
|
{
|
num: 6,
|
isActive: false,
|
background: "xt.png",
|
backgroundy: "xty.png",
|
name: "系统说明",
|
child: [],
|
},
|
]);
|
let dialog = reactive({
|
weather_isshow: false,
|
chart_isshow: false,
|
time_isshow: false,
|
operation_isshow: false,
|
POIList_isshow: true,
|
POIList_isshow1: false,
|
datePicker_isshow: false,
|
SYbox_isshow: false,
|
BJbox_isshow: false,
|
WGbox_isshow: false,
|
SZbox_isshow: false,
|
BGbox_isshow: false,
|
RLT_isshow: false,
|
YJbox_isshow: false,
|
SWbox_isshow: false,
|
dialogVisible: false,
|
videoUrl: "",
|
});
|
let data = reactive({
|
sypoiname: "",
|
POIList3: [],
|
POIList1: [],
|
POIList2: [],
|
|
showlogo: true,
|
timer: "",
|
date_show: "",
|
time_show: "",
|
nowWeek: "",
|
timestatus: "",
|
WRpoi: [],
|
CCpoi: [],
|
SSpoi: [],
|
YZZpoi: [],
|
ids: "",
|
h: "",
|
timer1: null,
|
textWeather: "",
|
temperature: "",
|
windSpeed: "",
|
windDirection: "",
|
POIList: [],
|
wall: null,
|
weatherData: "",
|
wurenwuState: false,
|
wurenwuTimeState: false,
|
POIType: "",
|
state2: [],
|
state1: [],
|
histogram: null,
|
|
HeatMap: null,
|
|
POIName: "",
|
});
|
|
//关闭按钮和功能框
|
const closeBtn = (val1) => {
|
btnArr.forEach((e) => {
|
if (e.name == val1) {
|
e.isActive = false;
|
}
|
if (val1 == "溯源分析") {
|
sgworld.Core.postMessage({ type: "delete" });
|
if (data.WRpoi) {
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
}
|
if (data.CCpoi) {
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
}
|
|
dialog.SYbox_isshow = false;
|
}
|
if (val1 == "预测分析") {
|
if (data.WRpoi) {
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
}
|
if (data.CCpoi) {
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
}
|
dialog.datePicker_isshow = false;
|
}
|
if (val1 == "智能管理") {
|
dialog.BGbox_isshow = false;
|
dialog.SZbox_isshow = false;
|
}
|
});
|
};
|
const closeChildBtn = (val1) => {};
|
const closePoi = (val1) => {
|
if (data.CCpoi.length != 0) {
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
}
|
if (data.WRpoi.length != 0) {
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
}
|
// if (YJpoi.length != 0) {
|
// YJpoi.forEach((e) => {
|
// sgworld.ProjectTree.deleteItem(e);
|
// });
|
// YJpoi = [];
|
// }
|
// if (BJpoi.length != 0) {
|
// BJpoi.forEach((e) => {
|
// sgworld.ProjectTree.deleteItem(e);
|
// });
|
// BJpoi = [];
|
// }
|
};
|
const closePoi1 = (val1) => {
|
if (data.YZZpoi.length != 0) {
|
data.YZZpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.YZZpoi = [];
|
}
|
if (data.SSpoi.length) {
|
data.SSpoi.forEach((e) => {
|
window.sgworld.ProjectTree.deleteItem(e);
|
});
|
data.SSpoi = [];
|
}
|
};
|
//关闭弹框
|
function popoutClose(row) {
|
switch (row) {
|
case "QX":
|
if (data.histogram != null) {
|
data.histogram.deleteObject();
|
data.histogram = null;
|
}
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
dialog.chart_isshow = false;
|
|
break;
|
|
default:
|
break;
|
}
|
}
|
|
//一个小时更新阳光
|
function sunshine(e) {
|
// debugger;
|
sgworld.Analysis.setTime(e);
|
}
|
// data.timer1 = setInterval(() => {
|
// sunshine(data.h);
|
// }, 3600000);
|
//获取poi
|
const getPOI = async () => {
|
const dt = await queryLocaltion();
|
// console.log(dt);
|
|
var arr = [];
|
var arr1 = [];
|
var arr2 = [];
|
var arr3 = [];
|
dt.result.forEach((e) => {
|
if (e.type == "监控点") {
|
arr.push(e);
|
// let ids = sgworld.Core.createRandomId();
|
// createPoi(e, img, ids, "name", type);
|
// data[id].push(ids);
|
}
|
if (e.type == "超级站") {
|
arr1.push(e);
|
}
|
if (e.type == "有组织排放") {
|
arr2.push(e);
|
}
|
if (e.type == "实时排放") {
|
arr3.push(e);
|
}
|
});
|
store.commit("getjkList", arr);
|
store.commit("getccList", arr1);
|
store.commit("getyzList", arr2);
|
store.commit("getssList", arr3);
|
// data.poiList = arr;
|
// data.poiList1 = arr1;
|
// data.poiList2 = arr2;
|
// data.poiList3 = arr3;
|
// console.log(data.poiList);
|
// if (type == "WY" || type == "CJ") {
|
// getSpecialPoi(dt.data);
|
// }
|
// console.log(data.poiList);
|
// console.log(dt);
|
};
|
|
//获取柱状图
|
const getHistogram = async (name) => {
|
if (data.histogram != null) {
|
data.histogram.deleteObject();
|
data.histogram = null;
|
}
|
let headers = { "Cache-Control": "no-cache" };
|
const dt = await axios.get(`${jsonUrl}/json/aroundjk.json`, {}, headers);
|
if (dt.data.length > 0) {
|
let arr = [];
|
dt.data.forEach((e) => {
|
if (e.name == name) {
|
arr.push({ x: e.voc_x, y: e.voc_y, value: e.vocs_value });
|
}
|
});
|
|
let ids = sgworld.Core.createRandomId();
|
data.histogram = sgworld.Creator.createHistogram({
|
id: ids,
|
meshType: "Box", //柱子模型类型
|
values: arr,
|
maxValueHeight: 20, //最大值的柱子高度（米）
|
bottomHeight: 100, //柱状图底部的世界高度（米）
|
valueWidth: 10, //柱子的宽度（米）
|
showValueText: true, //是否显示文本
|
valueType: "", //单位
|
valueFontColor: "#0028ff", //字体颜色
|
topColor: "#df3900", //柱体顶部颜色
|
bottomColor: "#5cdf00", //柱体底部颜色
|
// topColor: "rgba(223,57,0,0.5)", //柱体顶部颜色
|
// bottomColor: "rgba(92,223,0,0.5)", //柱体底部颜色
|
emission: 0.7, //柱体自发光强度
|
});
|
}
|
};
|
//获取热力图
|
const getHeat = async (e, date) => {
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
let rltarr = [];
|
if (e == 1) {
|
const dt = await twodreliControllerbyt({
|
date: date.startTime,
|
});
|
if (dt.result) {
|
dt.result.forEach((e) => {
|
rltarr.push({ x: e.lon, y: e.lat, value: e.value });
|
});
|
}
|
} else {
|
// const dt = await twodreliControllerbyt(date);
|
const dt = await twodreliControllerbyt({
|
date: date.startTime,
|
});
|
if (dt.result) {
|
dt.result.forEach((e) => {
|
rltarr.push({ x: e.lon, y: e.lat, value: e.value });
|
});
|
}
|
sgworld.Navigate.flyToPosition(
|
115.95338101508028,
|
39.726857627913596,
|
800,
|
{
|
heading: -81.9000473022461,
|
pitch: -59.400020599365234,
|
roll: -6.248129218058927,
|
}
|
);
|
}
|
|
// console.log(rlt);
|
data.HeatMap = sgworld.Creator.addHeatMap("r", {
|
id: "123",
|
sourceData: rltarr,
|
// sourceData: getData(),
|
radius: radius,
|
gradient: {
|
".3": "#b9f474",
|
".5": "#feae33",
|
".7": "#6373ca",
|
".95": "#6d042f",
|
},
|
});
|
};
|
|
// 一级菜单点击
|
function select(row) {
|
if (row.isActive) {
|
row.isActive = !row.isActive;
|
} else {
|
btnArr.forEach((e) => {
|
e.isActive = false;
|
});
|
// for (const key in data.dialog) {
|
// data.dialog[key] = false;
|
// }
|
row.isActive = !row.isActive;
|
}
|
|
if (row.num != 6) {
|
dialog.dialogVisible = false;
|
}
|
if (row.num != 2) {
|
showFk.value = false;
|
}
|
switch (row.num) {
|
case 2:
|
// dialog.SYbox_isshow = row.isActive;
|
childBtn[4].isActive = row.isActive;
|
if (row.isActive) {
|
closeChildBtn("天气特效");
|
closeChildBtn("三维污染物");
|
closeChildBtn("网格工具");
|
closeBtn("预测分析");
|
closeBtn("智能管理");
|
// closePoi();
|
if (data.WRpoi.length == 0) {
|
//如果有报警点
|
let jkpoiData = JSON.parse(JSON.stringify(store.state.jkList));
|
let CCpoiData = JSON.parse(JSON.stringify(store.state.ccList));
|
if (data.BJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
//如果有预警点
|
if (data.YJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
CCpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/CJJCZ.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "CJ");
|
data.CCpoi.push(ids);
|
});
|
jkpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/WYW.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "WY");
|
data.WRpoi.push(ids);
|
});
|
}
|
// if (data.WRpoi.length == 0) {
|
// store.state.ccList.forEach((e) => {
|
// let ids = sgworld.Core.createRandomId();
|
// createPoi(e, "img/CJJCZ.png", ids, "name", "CJ");
|
// data.CCpoi.push(ids);
|
// });
|
// }
|
// sgworld.Navigate.flyToPosition(115.9581, 39.7387, 1000);
|
} else {
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
dialog.SYbox_isshow = false;
|
sgworld.Core.postMessage({ type: "delete" });
|
dialog.chart_isshow = false;
|
|
// 关闭溯源反馈弹窗
|
showFk.value = false;
|
}
|
showXGZS.value = false;
|
|
break;
|
case 1:
|
showXGZS.value = !showXGZS.value;
|
|
if (row.isActive) {
|
let typearr = ["Billboard", "polygon", "polyline", "wall"];
|
typearr.forEach((e) => {
|
sgworld.ProjectTree.removeAll(e);
|
});
|
sgworld.Core.postMessage({ type: "delete" });
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
sgworld.Core.postMessage("Type=shunxuwinds;Bool=false;");
|
sgworld.Core.postMessage("Type=wuranwu;Bool=false;");
|
sgworld.Core.postMessage("Type=wuranwu;Type2=zidingyi;Bool=false;");
|
for (const key in dialog) {
|
dialog[key] = false;
|
}
|
sgworld.Navigate.flyToPosition(
|
115.95338101508028,
|
39.726857627913596,
|
447.44939899881655,
|
{
|
heading: -81.9000473022461,
|
pitch: -59.400020599365234,
|
roll: -6.248129218058927,
|
}
|
);
|
}
|
|
break;
|
case 5:
|
if (!row.isActive) {
|
dialog.SZbox_isshow = row.isActive;
|
dialog.BGbox_isshow = row.isActive;
|
row.child.forEach((e) => {
|
e.isActive = false;
|
});
|
} else {
|
closeBtn("溯源分析");
|
closeBtn("预测分析");
|
}
|
showXGZS.value = false;
|
|
break;
|
|
case 6:
|
dialog.videoUrl = window.location.href.split("#")[0] + videoJS;
|
dialog.dialogVisible = row.isActive;
|
sgworld.Navigate.getCameraInfo((data) => {
|
// console.log(data);
|
});
|
showXGZS.value = false;
|
|
break;
|
case 3:
|
showXGZS.value = false;
|
|
dialog.datePicker_isshow = row.isActive;
|
childBtn[4].isActive = row.isActive;
|
if (!row.isActive) {
|
window.sgworld.Core.postMessage({ TypeG1: "Delete" });
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
dialog.SYbox_isshow = false;
|
dialog.chart_isshow = false;
|
} else {
|
closeChildBtn("天气特效");
|
closeChildBtn("三维污染物");
|
closeChildBtn("网格工具");
|
closeBtn("智能管理");
|
closeBtn("溯源分析");
|
if (data.WRpoi.length == 0) {
|
//如果有报警点
|
let jkpoiData = JSON.parse(JSON.stringify(store.state.jkList));
|
let CCpoiData = JSON.parse(JSON.stringify(store.state.ccList));
|
if (data.BJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
//如果有预警点
|
if (data.YJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
CCpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/CJJCZ.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "CJ");
|
data.CCpoi.push(ids);
|
});
|
jkpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/WYW.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "WY");
|
data.WRpoi.push(ids);
|
});
|
}
|
// if (data.WRpoi.length == 0) {
|
// store.state.ccList.forEach((e) => {
|
// let ids = sgworld.Core.createRandomId();
|
// createPoi(e, "img/CJJCZ.png", ids, "name", "CJ");
|
// data.CCpoi.push(ids);
|
// });
|
// }
|
// sgworld.Navigate.flyToPosition(115.9581, 39.7387, 1000);
|
}
|
break;
|
case 7:
|
showXGZS.value = false;
|
// dialog.WGbox_isshow = row.isActive
|
// if (!row.isActive) {
|
// sgworld.Core.postMessage({ type: "delete" })
|
// }
|
break;
|
}
|
}
|
//二级菜单点击
|
function chlidSelect(row) {
|
row.isActive = !row.isActive;
|
switch (row.name) {
|
case "监控点位":
|
if (row.isActive) {
|
closePoi();
|
// sgworld.Navigate.flyToPosition(115.9581, 39.7387, 1000);
|
// getPOI("监控点", "WY", "WRpoi", "img/WYW.png");
|
// getPOI("超级站", "CJ", "CCpoi", "img/CJJCZ.png");
|
//如果有报警点
|
var jkpoiData = JSON.parse(JSON.stringify(store.state.jkList));
|
var CCpoiData = JSON.parse(JSON.stringify(store.state.ccList));
|
if (data.BJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.BJlist.length; i++) {
|
if (data.BJlist[i].name == e.name) {
|
imgurl = "img/bjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
//如果有预警点
|
if (data.YJlist.length > 0) {
|
jkpoiData.forEach((e) => {
|
let imgurl = "img/WYW.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
CCpoiData.forEach((e) => {
|
let imgurl = "img/CJJCZ.png";
|
|
for (let i = 0; i < data.YJlist.length; i++) {
|
if (data.YJlist[i].name == e.name) {
|
imgurl = "img/yjd.png";
|
}
|
}
|
e.imgurl = imgurl;
|
});
|
}
|
CCpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/CJJCZ.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "CJ");
|
data.CCpoi.push(ids);
|
});
|
jkpoiData.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
if (!e.imgurl) {
|
e.imgurl = "img/WYW.png";
|
}
|
createPoi(e, e.imgurl, ids, "name", "WY");
|
data.WRpoi.push(ids);
|
});
|
} else {
|
data.WRpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.WRpoi = [];
|
data.CCpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.CCpoi = [];
|
}
|
break;
|
case "排放点位":
|
if (row.isActive) {
|
closePoi1();
|
// sgworld.Navigate.flyToPosition(115.9232889, 39.73658889, 1000);
|
store.state.yzList.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
createPoi(e, "img/YZI1.png", ids, "name", "WY");
|
data.YZZpoi.push(ids);
|
});
|
|
// getPOI("有组织排放", "YZ", "YZZpoi", "img/YZI1.png");
|
setTimeout(() => {
|
// getPOI("实时排放", "SS", "SSpoi", "img/SS.png");
|
store.state.ssList.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
createPoi(e, "img/SS.png", ids, "name", "CJ");
|
data.SSpoi.push(ids);
|
});
|
}, 500);
|
} else {
|
data.SSpoi.forEach((e) => {
|
window.sgworld.ProjectTree.deleteItem(e);
|
});
|
data.SSpoi = [];
|
data.YZZpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
data.YZZpoi = [];
|
}
|
break;
|
case "风场模拟":
|
if (row.isActive) {
|
sgworld.Core.postMessage(
|
`Type=shunxuwinds;Bool=true;Density=${FC.Density};Speed=${FC.Speed};`
|
);
|
} else {
|
sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
sgworld.Core.postMessage("Type=shunxuwinds;Bool=false;");
|
}
|
break;
|
case "污染物模拟":
|
dialog.RLT_isshow = row.isActive;
|
if (row.isActive) {
|
sgworld.Core.postMessage(
|
"Type=wuranwu;Bool=true;Type2=zidong;Alpha=0.03;Speed=2;"
|
);
|
} else {
|
sgworld.Core.postMessage("Type=wuranwu;Bool=false;");
|
sgworld.Core.postMessage("Type=wuranwu;Type2=zidingyi;Bool=false;");
|
}
|
break;
|
case "二维污染物":
|
dialog.RLT_isshow = row.isActive;
|
if (row.isActive) {
|
sgworld.Navigate.flyToPosition(
|
115.95338101508028,
|
39.726857627913596,
|
800,
|
{
|
heading: -81.9000473022461,
|
pitch: -59.400020599365234,
|
roll: -6.248129218058927,
|
}
|
);
|
// const year = new Date().getFullYear();
|
// const month =
|
// new Date().getMonth() + 1 < 10
|
// ? "0" + (new Date().getMonth() + 1)
|
// : new Date().getMonth() + 1;
|
// const date =
|
// new Date().getDate() < 10
|
// ? "0" + new Date().getDate()
|
// : new Date().getDate();
|
// const hh =
|
// new Date().getHours() < 10
|
// ? "0" + (new Date().getHours() - 1)
|
// : new Date().getHours() - 1;
|
// let dateObj = {
|
// startTime: `${year}${month}${date}${hh}`,
|
// endOfTime: `${year}${month}${date}${hh}`,
|
// };
|
const year = new Date().getFullYear() + "-";
|
const month =
|
new Date().getMonth() + 1 < 10
|
? "0" + (new Date().getMonth() + 1) + "-"
|
: new Date().getMonth() + 1 + "-";
|
const date =
|
new Date().getDate() < 10
|
? "0" + new Date().getDate() + " "
|
: new Date().getDate() + " ";
|
const hh =
|
new Date().getHours() < 10
|
? "0" + (new Date().getHours() - 1) + ":"
|
: new Date().getHours() - 1 + ":";
|
let dateObj = {
|
startTime: year + month + date + hh + "00:00",
|
endOfTime: `${year}${month}${date}${hh}`,
|
};
|
getHeat(1, dateObj);
|
} else {
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
}
|
|
break;
|
case "天气特效":
|
dialog.weather_isshow = row.isActive;
|
|
closeBtn("智能管理");
|
closeBtn("溯源分析");
|
closeBtn("预测分析");
|
closeChildBtn("网格工具");
|
closeChildBtn("三维污染物");
|
break;
|
case "网格工具":
|
dialog.WGbox_isshow = row.isActive;
|
if (!row.isActive) {
|
sgworld.Core.postMessage({ type: "delete" });
|
}
|
|
closeBtn("智能管理");
|
closeBtn("溯源分析");
|
closeBtn("预测分析");
|
closeChildBtn("天气特效");
|
closeChildBtn("三维污染物");
|
break;
|
case "阈值设置":
|
dialog.SZbox_isshow = row.isActive;
|
closeBtn("溯源分析");
|
closeBtn("预测分析");
|
closeChildBtn("天气特效");
|
closeChildBtn("网格工具");
|
closeChildBtn("三维污染物");
|
break;
|
case "智能报告":
|
closeBtn("溯源分析");
|
closeBtn("预测分析");
|
closeChildBtn("天气特效");
|
closeChildBtn("网格工具");
|
closeChildBtn("三维污染物");
|
|
dialog.BGbox_isshow = row.isActive;
|
|
break;
|
case "三维污染物":
|
dialog.SWbox_isshow = row.isActive;
|
if (!row.isActive) {
|
sgworld.Core.postMessage({ duoceng: "delete" });
|
}
|
break;
|
}
|
}
|
//创建poi点
|
function createPoi(e, img, id, name, type) {
|
var poi = window.sgworld.Creator.createBillboard({
|
id: id,
|
lon: e.lon, //经度
|
lat: e.lat, //纬度
|
height: 150, //高度
|
text: e[name], //文本内容
|
textLocation: "up", //文本位置
|
fontSize: 18, //文本字体大小
|
fontColor: "#00D2FF", //字体颜色
|
fontOffset: {
|
//文本自定义偏移量
|
x: 0,
|
y: 0,
|
},
|
|
image: `${imgUrl}${img}`, //POI图标地址
|
// distanceDisplayCondition: {
|
// near: 0,
|
// far: 20000,
|
// },
|
data: {
|
name: e[name],
|
type: type,
|
},
|
scale: 0.3,
|
clickedScale: 0.3,
|
POIName: "",
|
});
|
}
|
//天气获取接口
|
async function queryWeather(year, month, date, h) {
|
// const dataObj = await queryWeatherList({
|
// begin: `${year-1}-${month}-${date} ${h}:00:00`,
|
// end: `${year}-${month}-${date} ${h}:00:00`,
|
// });
|
let begin = `${year - 1}-${month}-${date}-${h}:00:00`;
|
let end = `${year}-${month}-${date}-${h}:00:00`;
|
const dataObj = await queryWeatherList(begin, end);
|
// console.log(dataObj);
|
if (dataObj.result.length != 0) {
|
formatWeather(dataObj.result[0]);
|
}
|
}
|
//格式化天气
|
const formatWeather = (row) => {
|
data.temperature = parseInt(row.temperature);
|
data.windSpeed = Number(row.windSpeed).toFixed(2);
|
|
switch (row.windDirection) {
|
case "Southwest":
|
data.windDirection = "西南风";
|
break;
|
case "Southeast":
|
data.windDirection = "东南风";
|
break;
|
case "Northeast":
|
data.windDirection = "东北风";
|
break;
|
case "Northwest":
|
data.windDirection = "西北风";
|
break;
|
case "North":
|
data.windDirection = "北风";
|
break;
|
case "East":
|
data.windDirection = "东风";
|
break;
|
case "West":
|
data.windDirection = "西风";
|
break;
|
case "South":
|
data.windDirection = "南风";
|
break;
|
}
|
|
switch (row.weatherCondition) {
|
case "Sunny":
|
data.weatherData = "sun";
|
data.textWeather = "晴天";
|
break;
|
|
case "Moderate Rain":
|
data.weatherData = "rain";
|
data.textWeather = "中雨";
|
break;
|
case "Heavy Rain":
|
data.weatherData = "rain";
|
data.textWeather = "大雨";
|
break;
|
case "Light Rain":
|
data.weatherData = "rain";
|
data.textWeather = "小雨";
|
break;
|
case "Light Snow":
|
data.weatherData = "snow";
|
data.textWeather = "小雪";
|
break;
|
case "Moderate Snow":
|
data.weatherData = "snow";
|
data.textWeather = "中雪";
|
break;
|
case "Heavy Snow":
|
data.weatherData = "snow";
|
data.textWeather = "大雪";
|
break;
|
case "T-Storm":
|
data.weatherData = "rain";
|
data.textWeather = "暴风雨";
|
break;
|
case "T-Storm Snow":
|
data.weatherData = "snow";
|
data.textWeather = "暴风雪";
|
break;
|
}
|
|
// window.sgworld.Analysis.createWeather(weatherData, true);
|
};
|
const changeWeather = (val) => {
|
formatWeather(val);
|
};
|
|
const timeData = async (val) => {
|
let arr = val.data.split(/\s+/);
|
|
let day = arr[0].split("-");
|
|
let Hour = arr[1].split(":");
|
let M, D, H;
|
if (day[1][0] == "0") {
|
M = day[1][1];
|
} else {
|
M = day[1];
|
}
|
M = M < 10 ? "0" + M : M;
|
if (day[2][0] == "0") {
|
D = day[2][1];
|
} else {
|
D = day[2];
|
}
|
D = D < 10 ? "0" + D : D;
|
if (Hour[0][0] == "0") {
|
H = Hour[0][1];
|
} else {
|
H = Hour[0];
|
}
|
H = H < 10 ? "0" + H : H;
|
// sgworld.Analysis.setTime(Hour[0]);
|
queryWeather(day[0], M, D, H);
|
|
if (childBtn[0].isActive) {
|
sgworld.Core.postMessage(
|
`Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour[0]};Density=${FC.Density};Speed=${FC.Speed};`
|
);
|
}
|
if (childBtn[1].isActive) {
|
sgworld.Core.postMessage(
|
`Type=wuranwu;Bool=true;Type2=zidingyi;Yearstart=${day[0]};Mouthstart=${day[1]};Daystart=${day[2]};Hourend=${Hour[0]};Alpha=0.03;Speed=0.5;`
|
);
|
}
|
if (childBtn[2].isActive) {
|
let date = {
|
startTime: val.data,
|
endOfTime: val.data,
|
};
|
getHeat(2, date);
|
}
|
// if (childBtn[2].isActive) {
|
// let date = {
|
// startTime: `${day[0]}${day[1]}${day[2]}${Hour[0]}`,
|
// endOfTime: `${day[0]}${day[1]}${day[2]}${Hour[0]}`,
|
// };
|
// getHeat(2, date);
|
// }
|
};
|
|
const BJclick = (e) => {
|
var BJpoi = [];
|
var YJpoi = [];
|
if (e == "yj") {
|
if (dialog.BJbox_isshow) {
|
dialog.BJbox_isshow = false;
|
}
|
dialog.YJbox_isshow = !dialog.YJbox_isshow;
|
if (!dialog.YJbox_isshow) {
|
window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
}
|
if (dialog.YJbox_isshow) {
|
if (data.YJlist != 0) {
|
data.YJlist.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
// createPoi(e, "img/yjd.png", ids, "name", "WY");
|
createPoi(e, "img/yjd.png", ids, "locationName", "WY");
|
YJpoi.push(ids);
|
});
|
store.commit("getYJpoi", YJpoi);
|
}
|
} else {
|
if (store.state.YJpoi) {
|
store.state.YJpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
store.commit("getYJpoi", []);
|
}
|
}
|
} else {
|
if (dialog.YJbox_isshow) {
|
dialog.YJbox_isshow = false;
|
}
|
dialog.BJbox_isshow = !dialog.BJbox_isshow;
|
if (!dialog.BJbox_isshow) {
|
window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
}
|
if (dialog.BJbox_isshow) {
|
if (data.BJlist != 0) {
|
data.BJlist.forEach((e) => {
|
let ids = sgworld.Core.createRandomId();
|
// createPoi(e, "img/bjd.png", ids, "name", "WY");
|
createPoi(e, "img/bjd.png", ids, "locationName", "WY");
|
BJpoi.push(ids);
|
});
|
store.commit("getBJpoi", BJpoi);
|
}
|
} else {
|
if (store.state.BJpoi) {
|
store.state.BJpoi.forEach((e) => {
|
sgworld.ProjectTree.deleteItem(e);
|
});
|
store.commit("getBJpoi", []);
|
}
|
}
|
}
|
};
|
//服饰按钮
|
const FSbtn = () => {
|
sgworld.Core.postMessage({ fu: "shi" });
|
};
|
//俯视键盘快捷键
|
|
const keydownEvent = () => {
|
document.onkeydown = (e) => {
|
if (e.defaultPrevented) {
|
return;
|
}
|
const body = document.getElementsByTagName("body")[0];
|
// match(xxxx应填写文件在浏览器中的地址，不需要包括https、http或者www)，这里是为了防止其他页面触发
|
if (e.keyCode === 80 && e.target === body) {
|
// console.log("按下了回车键");
|
FSbtn(); //需要调用的方法
|
}
|
};
|
};
|
|
getPOI();
|
|
onMounted(() => {
|
keydownEvent();
|
InitMap.init3DMap();
|
});
|
//销毁 // 销毁定时器
|
onBeforeUnmount(() => {
|
clearInterval(data.timer);
|
clearInterval(data.timer1);
|
let typearr = ["Billboard", "polygon", "polyline", "wall"];
|
typearr.forEach((e) => {
|
sgworld.ProjectTree.removeAll(e);
|
});
|
|
if (data.histogram != null) {
|
data.histogram.deleteObject();
|
data.histogram = null;
|
}
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
|
sgworld.endPick();
|
});
|
//关闭浏览器清除效果
|
window.onbeforeunload = (e) => {
|
clearInterval(data.timer);
|
clearInterval(data.timer1);
|
let typearr = ["Billboard", "polygon", "polyline", "wall"];
|
typearr.forEach((e) => {
|
sgworld.ProjectTree.removeAll(e);
|
});
|
|
if (data.histogram != null) {
|
data.histogram.deleteObject();
|
data.histogram = null;
|
}
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
if (data.state1.length > 0) {
|
data.state1.forEach((e) => {
|
sgworld.Core.postMessage({ func_name: "RemovePOI", id: e });
|
});
|
}
|
if (data.state2.length > 0) {
|
data.state2.forEach((e) => {
|
sgworld.Core.postMessage({ func_name: "RemovePOI", id: e });
|
});
|
}
|
// clearInterval(data.timer1);
|
sgworld.endPick();
|
};
|
|
const showXGZS = ref(true);
|
let syfkData = reactive({
|
SJvalue: "",
|
JLvalue: "",
|
SYPOIname: "",
|
date: "",
|
});
|
const showFk = ref(false);
|
function toggleFK(params) {
|
syfkData.SJvalue = params.SJvalue;
|
syfkData.JLvalue = params.JLvalue;
|
syfkData.SYPOIname = params.SYPOIname;
|
(syfkData.date = params.date), (showFk.value = params.isShow);
|
// console.log(params);
|
}
|
return {
|
data,
|
select,
|
|
popoutClose,
|
changeWeather,
|
timeData,
|
getHistogram,
|
btnArr,
|
chlidSelect,
|
dialog,
|
childBtn,
|
getPOI,
|
BJclick,
|
showFk,
|
toggleFK,
|
showXGZS,
|
syfkData,
|
FSbtn,
|
};
|
},
|
};
|
</script>
|
<style>
|
.el-select-dropdown__item {
|
font-size: 16px;
|
}
|
</style>
|
<style lang="less">
|
#app {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.nav_bg {
|
width: 100%;
|
height: 380px;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
// background: linear-gradient(rgba(5, 19, 41, 0), rgba(5, 19, 41, 1));
|
background: url("../assets/img/bt_bg.png") no-repeat center;
|
background-size: 100% 100%;
|
.nav {
|
height: 275px;
|
width: 100%;
|
background: url("../assets/img/db.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
.bj_box {
|
height: 207px;
|
width: 260px;
|
background: url("../assets/img/baojingbj.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
bottom: 30px;
|
left: 60px;
|
cursor: pointer;
|
span {
|
white-space: nowrap; /*强制span不换行*/
|
position: absolute;
|
left: 50%;
|
top: 54px;
|
transform: translateX(-50%);
|
font-size: 26px;
|
font-family: YouSheBiaoTiHei;
|
font-weight: 600;
|
color: #ffffff;
|
background: linear-gradient(180deg, #ffffff 0%, #ff3131 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
.yc_box {
|
height: 207px;
|
width: 260px;
|
background: url("../assets/img/yujingbj.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
bottom: 30px;
|
left: 340px;
|
cursor: pointer;
|
span {
|
white-space: nowrap; /*强制span不换行*/
|
position: absolute;
|
left: 50%;
|
top: 54px;
|
transform: translateX(-50%);
|
font-size: 26px;
|
font-family: YouSheBiaoTiHei;
|
font-weight: 600;
|
color: #ffffff;
|
background: linear-gradient(180deg, #ffffff 0%, #ff3131 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
.RLTZ {
|
width: calc(65px * 2);
|
height: calc(293px * 2);
|
background: rgba(0, 0, 0, 0.5);
|
position: absolute;
|
bottom: 30px;
|
right: 60px;
|
border-radius: 4px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
.topz {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
.bottomz {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
img {
|
width: calc(9px * 2);
|
height: calc(230px * 2);
|
}
|
}
|
.nav_btn {
|
width: 1127px;
|
// height: 259px;
|
position: absolute;
|
left: 50%;
|
top: -50px;
|
// transform: translate(-50%, -50%);
|
transform: translateX(-50%);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.btn_animation {
|
// width: 185px;
|
// height: 100%;
|
// transfo-style: preserver-3d;
|
// transition: 0.1s linear;
|
cursor: pointer;
|
position: relative;
|
.f_icon {
|
width: 164px;
|
height: 164px;
|
// background-size: 100% 100%;
|
}
|
.b_title {
|
position: relative;
|
margin-top: 10px;
|
font-size: 40px;
|
font-family: JLinXin;
|
font-weight: 600;
|
font-style: italic;
|
color: #eff8fc;
|
}
|
.b_titley {
|
position: relative;
|
margin-top: 10px;
|
font-size: 40px;
|
font-family: JLinXin;
|
font-weight: 600;
|
font-style: italic;
|
color: #eff8fc;
|
}
|
}
|
|
.btn1 {
|
// padding-bottom: 70px;
|
}
|
.btn2 {
|
padding-bottom: 70px;
|
}
|
.btn3 {
|
padding-bottom: 95px;
|
}
|
.btn4 {
|
padding-bottom: 95px;
|
}
|
.btn5 {
|
padding-bottom: 95px;
|
}
|
.btn6 {
|
}
|
.btn7 {
|
padding-bottom: 70px;
|
}
|
.chlid_box {
|
width: 287px;
|
height: 182px;
|
background: url("../assets/img/znlejcdbj.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: -185px;
|
left: 50%;
|
transform: translateX(-50%);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-left: 45px;
|
padding-right: 45px;
|
.right_b {
|
width: 140px;
|
height: 108px;
|
background: url("../assets/img/yjt.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
right: -90px;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.left_b {
|
width: 140px;
|
height: 108px;
|
background: url("../assets/img/zjt.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
left: -90px;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.child_btn {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
.c_icon {
|
width: 86px;
|
height: 110px;
|
margin-bottom: 10px;
|
}
|
.c_title {
|
font-size: 28px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
.c_titley {
|
position: relative;
|
font-size: 28px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
}
|
}
|
.operate_btn {
|
position: absolute;
|
bottom: 30px;
|
right: 200px;
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 4px solid #2e58cc;
|
border-radius: 20px;
|
color: #ffffff;
|
height: 64px;
|
font-size: 28px;
|
padding: 16px 30px;
|
}
|
}
|
}
|
}
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
.b_title {
|
position: relative;
|
background: linear-gradient(0deg, #d1f8ff 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.b_title:after {
|
background: none;
|
content: attr(data-text);
|
left: 0;
|
position: absolute;
|
text-shadow: 3px 4px 3px #021528; //relief shade effect
|
top: 0;
|
z-index: -1;
|
}
|
.b_titley {
|
position: relative;
|
background: linear-gradient(0deg, #fed670 0%, #fff0c9 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.b_titley:after {
|
background: none;
|
content: attr(data-text);
|
left: 0;
|
position: absolute;
|
text-shadow: 3px 4px 3px #0e0900; //relief shade effect
|
top: 0;
|
z-index: -1;
|
}
|
.c_titley {
|
background: linear-gradient(0deg, #fed670 0%, #fff0c9 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.c_titley:after {
|
background: none;
|
content: attr(data-text);
|
left: 0;
|
position: absolute;
|
text-shadow: 2px 3px 4px #0e0900; //relief shade effect
|
top: 0;
|
z-index: -1;
|
}
|
}
|
.chlid_btnbox {
|
width: 1060px;
|
height: 182px;
|
background: url("../assets/img/gjbj.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 288px;
|
right: 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-left: 70px;
|
padding-right: 70px;
|
|
.child_btn {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
}
|
.c_icon {
|
width: 60px;
|
height: 74px;
|
margin-bottom: 20px;
|
}
|
.c_title {
|
font-size: 28px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
.c_titley {
|
position: relative;
|
font-size: 28px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
}
|
#sdkContainer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
// transform: translateX(-50%);
|
width: 100%;
|
height: 100%;
|
|
// background: #000;
|
}
|
.chart_box {
|
position: absolute;
|
right: 70px;
|
top: 490px;
|
width: calc(742px * 1.5);
|
// width: 1200px;
|
height: 640px;
|
padding: 40px;
|
box-sizing: border-box;
|
background: url("../assets/img/zbg.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
|
.weather_box_c {
|
position: absolute;
|
right: 20px;
|
top: 490px;
|
width: 775px;
|
height: 427px;
|
padding: 50px;
|
box-sizing: border-box;
|
background: url("../assets/img/bgk.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
|
.close {
|
width: 22px;
|
height: 22px;
|
cursor: pointer;
|
background: url("../assets/img/close.png") center no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
right: 50px;
|
top: 50px;
|
}
|
.popout_title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
// position: absolute;
|
// left: 50px;
|
// top: 50px;
|
}
|
.controls {
|
position: absolute;
|
left: 50%;
|
right: 50%;
|
width: 30%;
|
height: 30%;
|
}
|
.video_box {
|
width: 50%;
|
bottom: 21%;
|
position: absolute;
|
left: 23%;
|
}
|
.video_box_close {
|
width: 100%;
|
background: #333333;
|
cursor: pointer;
|
}
|
</style>
|
