Merge branch 'master' of http://server4.wh-nf.cn:8081/git/root/urbanLifeline_YanAn
commit c4fdc12c6923572c8721b0c3c16a18dab1f4e068
2 parents c0eb2cf + 88dcde7
@zhangzhihui zhangzhihui authored on 17 Oct
Showing 11 changed files
View
5
src/views/DialogTabs/DialogConfig.js
title: '燃气安全应急响应预警发布',
content: markRaw(res_components['RQ_Warning']),
name: 'RQ_Warning',
},
{
title: '街景',
content: markRaw(res_components['streetscape']),
name: 'streetscape',
},
],
};
 
export default config;
View
53
src/views/DialogTabs/component/streetscape.vue 0 → 100644
<template>
<div id="streetscape"></div>
</template>
 
<script setup name="streetscape">
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const AllData = reactive({
panorama: null,
});
// 初始化街景地图
const initePanoramaMap = () => {
AllData.panorama = BMapGL.Panorama('streetscape');
 
AllData.panorama.setPov({
// 修改全景的视角
pitch: 10,
heading: 0,
});
AllData.panorama.setOptions({
linksControl: true, // 隐藏道路指示控件,默认true
navigationControl: true, // 隐藏导航控件,默认true
});
};
onMounted(() => {
initePanoramaMap();
// AllData.panorama.addEventListener('position_changed', function (pos) {
// console.log('pos---', pos);
// // AllData.panorama.setPosition(new BMapGL.Point(pos.lng, pos.lat));
// });
bus.on('streetPosition', e => {
console.log('streetPosition---', e);
let position_Street = turf.point(e);
gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
AllData.panorama.setPosition(
new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
);
gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
});
});
onBeforeUnmount(() => {
bus.off('xxinformationList');
});
</script>
 
<style lang="scss" scoped>
#streetscape {
width: 100%;
height: 100%;
}
</style>
View
245
src/views/oneMap/FloodStuationReview/xqRightBox.vue
<span class="tableHeaderList tableList3">设防阈值</span>
<span class="tableHeaderList tableList4">告警时间</span>
</div>
 
<Vue3SeamlessScroll :list="FXJCData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
<Vue3SeamlessScroll
:list="FXJCData"
:singleHeight="34"
:singleWaitTime="1500"
:hover="true"
class="tableBody"
>
<div class="tableBodyList" v-for="item in FXJCData">
<span class="tableBodyList_span1">{{ item.zb }}</span>
<span class="tableBodyList_span2"> {{ item.zt }}</span>
<span class="tableBodyList_span3">{{ item.szzt }}</span>
<span style="margin-left: 5px">{{ item.name }}</span>
</div>
<div
class="tabItem_two"
:style="{ color: item.value == 30 ? '#00F294FF' : item.value == 9 ? '#00E7FCFF' : '#FFC30EFF' }"
:style="{
color:
item.value == 30
? '#00F294FF'
: item.value == 9
? '#00E7FCFF'
: '#FFC30EFF',
}"
>
{{ item.value }}
</div>
</div>
<div class="problemText">
<div class="problemTextTop">
<div class="problemContent">{{ item.remark }}</div>
<div class="problemContent">{{ item.address }}</div>
<div class="problemContent">{{ item.person }}{{ ' ' }}{{ item.phone }}</div>
<div class="problemContent">
{{ item.person }}{{ " " }}{{ item.phone }}
</div>
</div>
<div class="problemTextBottom">
<div class="problemContent">上报:{{ item.startTime }}</div>
<div class="problemContent">截止:{{ item.endTime }}</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import WarningEcharts from '@/views/oneMap/Echarts/WarningEcharts.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
 
import clz from '@/assets/images/fhpl/clz.png'; //
import wcl from '@/assets/images/fhpl/wcl.png'; //
import ycl from '@/assets/images/fhpl/ycl.png'; //
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import WarningEcharts from "@/views/oneMap/Echarts/WarningEcharts.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import bengzhantingzhi from "@/assets/images/fhpl/bengzhantingzhi.png";
import bengzhanyunxing from "@/assets/images/fhpl/bengzhanyunxing.png";
 
import clz from "@/assets/images/fhpl/clz.png"; //
import wcl from "@/assets/images/fhpl/wcl.png"; //
import ycl from "@/assets/images/fhpl/ycl.png"; //
 
const list = [
{
name: '1#泵',
name: "1#泵",
status: 1,
},
{
name: '2#泵',
name: "2#泵",
status: 0,
},
{
name: '3#泵',
name: "3#泵",
status: 0,
},
 
{
name: '4#泵',
name: "4#泵",
status: 1,
},
];
const problemList = ref([
{
scale: 'Ⅳ',
remark: '污水井盖丢失',
address: '小河沟',
person: '张三',
phone: '13277980987',
startTime: '2022-02-27 10:00',
endTime: '2022-02-28 10:00',
class: 'highProblem',
},
{
scale: 'Ⅲ',
remark: '污水井盖丢失',
address: '小河沟',
person: '张三',
phone: '13277980987',
startTime: '2022-02-27 10:00',
endTime: '2022-02-28 10:00',
class: 'middleProblem',
},
{
scale: 'Ⅱ',
remark: '污水井盖丢失',
address: '小河沟',
person: '张三',
phone: '13277980987',
startTime: '2022-02-27 10:00',
endTime: '2022-02-28 10:00',
class: 'lowProblem',
scale: "Ⅳ",
remark: "污水井盖丢失",
address: "小河沟",
person: "张三",
phone: "13277980987",
startTime: "2022-02-27 10:00",
endTime: "2022-02-28 10:00",
class: "highProblem",
},
{
scale: "Ⅲ",
remark: "污水井盖丢失",
address: "小河沟",
person: "张三",
phone: "13277980987",
startTime: "2022-02-27 10:00",
endTime: "2022-02-28 10:00",
class: "middleProblem",
},
{
scale: "Ⅱ",
remark: "污水井盖丢失",
address: "小河沟",
person: "张三",
phone: "13277980987",
startTime: "2022-02-27 10:00",
endTime: "2022-02-28 10:00",
class: "lowProblem",
},
]);
const ListBox = ref([
{ name: '水雨情', value: 1 },
{ name: '险情', value: 2 },
{ name: '工情', value: 3 },
{ name: "水雨情", value: 1 },
{ name: "险情", value: 2 },
{ name: "工情", value: 3 },
]);
const ListBoxJq = ref([
{ name: '值守上报', value: 1 },
{ name: '公众电话', value: 2 },
{ name: "值守上报", value: 1 },
{ name: "公众电话", value: 2 },
]);
const activedname = ref('水雨情');
const activedJq = ref('值守上报');
const jqdtname = ref('已处理');
const activedname = ref("水雨情");
const activedJq = ref("值守上报");
const jqdtname = ref("已处理");
 
const jqdtList = ref([
{ name: '已处理', value: 30, Imgurl: ycl },
{ name: '未处理', value: 9, Imgurl: wcl },
{ name: '处理中', value: 61, Imgurl: clz },
{ name: "已处理", value: 30, Imgurl: ycl },
{ name: "未处理", value: 9, Imgurl: wcl },
{ name: "处理中", value: 61, Imgurl: clz },
]);
 
// 点击事件
function Listclick(val) {
console.log(val, 'val');
console.log(val, "val");
activedname.value = val.name;
console.log(activedname.value, ' activedname.value');
console.log(activedname.value, " activedname.value");
}
 
function jqdtclick(val) {
jqdtname.value = val.name;
 
const activeIndex = ref(0);
const munuList = [
{
name: '管网(29)',
},
{
name: '积水点(16)',
},
{
name: '排口(24)',
name: "管网(29)",
},
{
name: "积水点(16)",
},
{
name: "排口(24)",
},
];
const chartData1 = ref({
xAxis: ['1号点', '2号点', '3号点', '4号点', '5号点', '6号点', '7号点', '8号点', '9号点'],
xAxis: [
"1号点",
"2号点",
"3号点",
"4号点",
"5号点",
"6号点",
"7号点",
"8号点",
"9号点",
],
yAxis: [1.1, 1.3, 2, 1.25, 1.1, 3, 3.5, 1.3, 3.8, 1.2, 2, 1], //最高流量
yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //最高水位
refresh: 1,
});
const FXJCData = ref([
{
zb: '延河西路管网',
sz: '04-15 14:23:12',
szzt: '300mm',
zt: '水深:450mm',
},
{
zb: '二道街管网',
sz: '04-15 14:23:13',
szzt: '300mm',
zt: '水深:345mm',
},
{
zb: '王家坪旧址门口',
sz: '04-15 14:23:14',
szzt: '30mm',
zt: '水深:55mm',
},
{
zb: '东三巷排口',
sz: '04-15 14:23:15',
szzt: '10m³/h',
zt: '流量:43m³/h',
zb: "延河西路管网",
sz: "04-15 14:23:12",
szzt: "300mm",
zt: "水深:450mm",
},
{
zb: "二道街管网",
sz: "04-15 14:23:13",
szzt: "300mm",
zt: "水深:345mm",
},
{
zb: "王家坪旧址门口",
sz: "04-15 14:23:14",
szzt: "30mm",
zt: "水深:55mm",
},
{
zb: "东三巷排口",
sz: "04-15 14:23:15",
szzt: "10m³/h",
zt: "流量:43m³/h",
},
]);
</script>
 
height: calc(100% - 60px);
.button_box_list {
width: 100%;
height: 40px;
background: url('@/assets/images/fhpl/bj_img.png') no-repeat;
background: url("@/assets/images/fhpl/bj_img.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
padding: 0 10px;
.button_box {
margin-right: 9px;
cursor: pointer;
}
.activeClass {
background: url('@/assets/images/fhpl/Select_img.png') no-repeat;
background: url("@/assets/images/fhpl/Select_img.png") no-repeat;
background-size: 100% 100%;
// background: red;
color: #fdffff;
}
.Warning_Box_tp {
margin: 10px auto;
width: 420px;
height: calc(100% - 65px);
background: url('@/assets/images/fhpl/sqjca.png') no-repeat;
background: url("@/assets/images/fhpl/sqjca.png") no-repeat;
background-size: 100% 100%;
}
.Warning_Box_gq {
margin: 5px auto;
}
.info {
color: #fff;
height: 32px;
background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%);
background: linear-gradient(
0deg,
rgba(26, 109, 255, 0.2) 0%,
rgba(40, 193, 250, 0.2) 100%
);
border-radius: 3px;
padding: 0 20px;
margin-top: 15px;
line-height: 30px;
height: 100%;
border-radius: 6px;
text-align: center;
cursor: pointer;
font-size: 16px;
// border: 1px solid;
&:nth-of-type(1) {
background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%);
border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
background: linear-gradient(0deg, #00496f 0%, #001c2a 100%);
border: 1px solid #2cfce9;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
font-size: 16px;
color: #d3f6ff;
.tabItem_one {
// background: red;
width: 65%;
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
View
322
src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
</div>
<div class="MaterialEcharts flex">
<div class="yyBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
雨衣
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
20
</div>
</div>
</div>
<div class="djjBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
对讲机
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
24
</div>
</div>
</div>
<div class="ybBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
油布
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
32
</div>
</div>
</div>
<div class="jsyBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
救生衣
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
45
</div>
</div>
</div>
<div class="qsbBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
潜水泵
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
20
</div>
</div>
</div>
<div class="qtBox">
<div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
<div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 15px; color: #ffffff; margin-left: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-left: 20px;
"
>
其他
</div>
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 17px; color: #00f2ff; margin-right: 20px">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
color: #00f2ff;
margin-right: 20px;
"
>
57
</div>
</div>
</div>
</div>
</template>
 
<script setup>
import ChartCl from './chartCl.vue';
import ChartXcry from './ChartXcry.vue';
import track from '@/assets/track.json';
import track1 from '@/assets/track1.json';
import car from '@/assets/newImgs/car.png';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import ChartCl from "./chartCl.vue";
import ChartXcry from "./ChartXcry.vue";
import track from "@/assets/track.json";
import track1 from "@/assets/track1.json";
import car from "@/assets/newImgs/car.png";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
const ryData = ref({});
const ryRefresh = ref('');
const ryRefresh = ref("");
const clData = {
xData: ['陕J234S3', '陕JF9768'],
xData: ["陕J234S3", "陕JF9768"],
data1: [9.8, 11],
data2: [21, 28],
refresh: '1',
refresh: "1",
};
// 车辆调度
function getCarIndex(num) {
console.log('num--', num);
console.log("num--", num);
if (num == 0) {
clearInterval(window.routeTimer);
mapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol']);
mapBoxVectorLayer.removeByIds(["dynamicRoute", "dynamicRoute_Symbol"]);
let center = turf.center(track);
newfiberMapbox.map.easeTo({
center: [center.geometry.coordinates[0], center.geometry.coordinates[1] - 0.005],
zoom: 13.8,
});
mapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
mapBoxVectorLayer.addDynamicRoute("dynamicRoute", track, car);
} else if (num == 1) {
clearInterval(window.routeTimer);
mapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol']);
mapBoxVectorLayer.removeByIds(["dynamicRoute", "dynamicRoute_Symbol"]);
let center = turf.center(track1);
newfiberMapbox.map.easeTo({
center: [center.geometry.coordinates[0], center.geometry.coordinates[1] - 0.005],
zoom: 13.8,
});
mapBoxVectorLayer.addDynamicRoute('dynamicRoute', track1, car);
mapBoxVectorLayer.addDynamicRoute("dynamicRoute", track1, car);
}
}
// 人员
function getData() {
let obj = {
xData: [
'市卫健委',
'市水务局',
'市城管局',
'市自然资源局',
'市交通运输局',
'市气象局',
'市公安局',
'市消防救援支队',
'市应急管理局',
"市卫健委",
"市水务局",
"市城管局",
"市自然资源局",
"市交通运输局",
"市气象局",
"市公安局",
"市消防救援支队",
"市应急管理局",
],
data: [10, 15, 20, 12, 28, 30, 35, 40, 50],
num: [],
};
let max = JSON.parse(JSON.stringify(obj.data));
let one = max.sort((a, b) => b - a)[0];
max.forEach(i => {
max.forEach((i) => {
obj.num.push(one);
});
ryData.value = obj;
ryRefresh.value = Math.random();
position: relative;
left: 10px;
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
position: relative;
left: 10px;
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
margin-top: 12px;
}
position: relative;
left: 10px;
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
position: relative;
left: 10px;
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
margin-top: 12px;
}
position: relative;
left: 10px;
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
position: relative;
left: 10px;
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
margin-top: 12px;
}
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/yy.png') no-repeat;
background: url("@/assets/images/fhpl/yy.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/djj.png') no-repeat;
background: url("@/assets/images/fhpl/djj.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/yb.png') no-repeat;
background: url("@/assets/images/fhpl/yb.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/jsj.png') no-repeat;
background: url("@/assets/images/fhpl/jsj.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/qsb.png') no-repeat;
background: url("@/assets/images/fhpl/qsb.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
margin-top: 8px;
margin-left: 13px;
width: 197px;
height: 50px;
background: url('@/assets/images/fhpl/qt.png') no-repeat;
background: url("@/assets/images/fhpl/qt.png") no-repeat;
background-size: 100% 100%;
.wzBox_A {
width: 139px;
height: 39px;
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
View
154
src/views/oneMap/OverallOverview/LeftBox.vue
</div>
</template>
 
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import publicEch from '@/views/oneMap/Echarts/publicEch.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd.png'; //隧道
import ps_icon from '@/assets/newImgs/ps.png'; //排水
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import publicEch from "@/views/oneMap/Echarts/publicEch.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import ranqi_icon from "@/assets/newImgs/rq.png"; //燃气
import qiaoliang from "@/assets/newImgs/ql.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd.png"; //隧道
import ps_icon from "@/assets/newImgs/ps.png"; //排水
 
const chartData2 = ref({ xAxis: [], yAxis: [], yAxis2: [] });
const refresh = ref('');
const refresh = ref("");
const categoryList = ref([
{ name: '燃气', value: 1 },
{ name: '排水', value: 2 },
{ name: '桥梁', value: 3 },
{ name: '隧道', value: 4 },
{ name: "燃气", value: 1 },
{ name: "排水", value: 2 },
{ name: "桥梁", value: 3 },
{ name: "隧道", value: 4 },
]);
const yearList = ref([
{ name: '7天', value: 1 },
{ name: '15天', value: 2 },
{ name: '30天', value: 3 },
{ name: "7天", value: 1 },
{ name: "15天", value: 2 },
{ name: "30天", value: 3 },
]);
const FXJCData = ref([
{
name: '延安中学',
jcsj: '2024/10/23 15:25',
zk: '正常',
},
]);
const yxjcname = ref('7天');
const yxjcname = ref("7天");
function yearclick(val) {
yxjcname.value = val.name;
}
const riskData = ref([
{
name1: '管网',
name2: '传感器',
name3: '窨井',
num1: '234',
num2: '12',
num3: '12',
name1: "管网",
name2: "传感器",
name3: "窨井",
num1: "234",
num2: "12",
num3: "12",
Imgurl: ranqi_icon,
dw1: '公里',
dw2: '套',
dw3: '口',
dw1: "公里",
dw2: "套",
dw3: "口",
},
]);
 
const activedname = ref('燃气');
const activedname = ref("燃气");
// 点击事件
function categoryclick(val) {
console.log(val.name, '1');
console.log(val.name, "1");
activedname.value = val.name;
if (activedname.value == '燃气') {
if (activedname.value == "燃气") {
riskData.value = [
{
name1: '管网',
name2: '传感器',
name3: '窨井',
num1: '234',
num2: '12',
num3: '12',
name1: "管网",
name2: "传感器",
name3: "窨井",
num1: "234",
num2: "12",
num3: "12",
Imgurl: ranqi_icon,
dw1: '公里',
dw2: '套',
dw3: '口',
dw1: "公里",
dw2: "套",
dw3: "口",
},
];
} else if (activedname.value == '排水') {
} else if (activedname.value == "排水") {
riskData.value = [
{
name1: '管网',
name2: '检查口',
name3: '感知设备',
num1: '234',
num2: '234',
num3: '18',
name1: "管网",
name2: "检查口",
name3: "感知设备",
num1: "234",
num2: "234",
num3: "18",
Imgurl: ps_icon,
dw1: '公里',
dw2: '处',
dw3: '套',
dw1: "公里",
dw2: "处",
dw3: "套",
},
];
} else if (activedname.value == '桥梁') {
} else if (activedname.value == "桥梁") {
riskData.value = [
{
name1: '数量',
name2: '长度',
name3: '感知设备',
num1: '1',
num2: '204',
num3: '92',
name1: "数量",
name2: "长度",
name3: "感知设备",
num1: "1",
num2: "204",
num3: "92",
Imgurl: qiaoliang,
dw1: '座',
dw2: '米',
dw3: '套',
dw1: "座",
dw2: "米",
dw3: "套",
},
];
} else {
riskData.value = [
{
name1: '数量',
name2: '长度',
name3: '感知设备',
num1: '1',
num2: '750',
num3: '111',
name1: "数量",
name2: "长度",
name3: "感知设备",
num1: "1",
num2: "750",
num3: "111",
Imgurl: sd_icon,
dw1: '座',
dw2: '米',
dw3: '套',
dw1: "座",
dw2: "米",
dw3: "套",
},
];
}
}
 
function GetgetFacilities() {
let obj = {
x: ['燃气', '排水', '桥梁', '隧道', '其他'],
y: ['870', '568', '700', '600', '276'],
x: ["燃气", "排水", "桥梁", "隧道", "其他"],
y: ["870", "568", "700", "600", "276"],
};
chartData2.value.xAxis = obj.x;
chartData2.value.yAxis = obj.y;
refresh.value = Math.random();
// background: yellow;
.icon {
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.gw {
font-family: Source Han Sans CN;
font-weight: bold;
position: relative;
left: 10px;
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
position: relative;
left: 12px;
top: 10px;
 
// box-shadow: inset 0px -7px 10px -5px #47eef38a;
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
}
.yxjcList {
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
View
330
src/views/oneMap/OverallOverview/RightBox.vue
<div class="middleextA flex">
<div>
<img :src="item.Imgurl" alt="" />
</div>
<div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)">{{ item.name }}</div>
<div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)">
{{ item.name }}
</div>
</div>
<div class="middleextB flex">
<div class="BJ_CenBox1" :style="getWidth(item, 1)"></div>
<div
>
{{ item.num }}
</div>
 
<div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 13px; color: #34909f">
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 13px;
color: #34909f;
"
>
{{ item.dw }}
</div>
</div>
</div>
<div class="below">
<div class="handIn">{{ item.num }}</div>
<div
class="oflower"
:style="{ color: item.gm == '较多' ? '#FF4D5DFF' : item.gm == '正常' ? '#2BE7ABFF' : '#F8E270FF' }"
:style="{
color:
item.gm == '较多'
? '#FF4D5DFF'
: item.gm == '正常'
? '#2BE7ABFF'
: '#F8E270FF',
}"
>
{{ item.gm }}
</div>
</div>
</div>
</div>
</div>
<div class="WarningEcharts">
<AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
<AssessmentjsEcharts
:data="chartData2"
:refresh="chartData2.refresh"
></AssessmentjsEcharts>
</div>
</div>
</template>
 
<script setup>
import tslyqk_constituent_3d from '@/views/oneMap/Echarts/tslyqk_constituent_3d.vue'; //3d图例
import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
 
import { ref, reactive, toRefs, onMounted } from 'vue';
import tslyqk_constituent_3d from "@/views/oneMap/Echarts/tslyqk_constituent_3d.vue"; //3d图例
import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
 
import { ref, reactive, toRefs, onMounted } from "vue";
const AllData = reactive({});
import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
import czsj from '@/assets/newImgs/czsj.png'; //处置数据
import czl from '@/assets/newImgs/czl.png'; //处置率
 
import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比
import bus from '@/bus';
import yjsj from "@/assets/newImgs/yjsj.png"; //预警数据
import czsj from "@/assets/newImgs/czsj.png"; //处置数据
import czl from "@/assets/newImgs/czl.png"; //处置率
 
import ranqi_icon from "@/assets/newImgs/ranqi_icon.png"; //燃气
import qiaoliang from "@/assets/newImgs/qiaoliang.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd_icon.png"; //隧道
import ps_icon from "@/assets/newImgs/ps_icon.png"; //隧道
import fxzb from "@/assets/newImgs/fxzb.png"; //风险占比
import bus from "@/bus";
const yearList = ref([
{ name: '月', value: 1 },
{ name: '年', value: 2 },
{ name: "月", value: 1 },
{ name: "年", value: 2 },
]);
const chartData2 = ref({
xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
refresh: 1,
});
const riskData = ref([
{ name: '燃气', num: 4549.53, sl: 1922.11, Imgurl: ranqi_icon, dw: '公里' },
{ name: '排水', num: 435.7, sl: 118, Imgurl: ps_icon, dw: '公里' },
{ name: '桥梁', num: 84, sl: 0, Imgurl: qiaoliang, dw: '座' },
{ name: '隧道', num: 1, sl: 0, Imgurl: sd_icon, dw: '座' },
{ name: "燃气", num: 4549.53, sl: 1922.11, Imgurl: ranqi_icon, dw: "公里" },
{ name: "排水", num: 435.7, sl: 118, Imgurl: ps_icon, dw: "公里" },
{ name: "桥梁", num: 84, sl: 0, Imgurl: qiaoliang, dw: "座" },
{ name: "隧道", num: 1, sl: 0, Imgurl: sd_icon, dw: "座" },
]);
const tableData = ref([
{ name: '预警数量', num: '60', gm: '较多', Imgurl: yjsj },
{ name: '处置数量', num: '60', gm: '正常', Imgurl: czsj },
{ name: '处置率', num: '75%', gm: '未完成', Imgurl: czl },
{ name: "预警数量", num: "60", gm: "较多", Imgurl: yjsj },
{ name: "处置数量", num: "60", gm: "正常", Imgurl: czsj },
{ name: "处置率", num: "75%", gm: "未完成", Imgurl: czl },
]);
 
const activedname = ref('月');
const activedname = ref("月");
function yearclick(val) {
activedname.value = val.name;
}
// 动态计算盒子的宽度
return `width:${widthNum}%`;
};
 
// 风险评估点击事件
const FxClickName = ref('燃气');
const FxClickName = ref("燃气");
const obj = ref([
{
name: '低风险 70% 1345.5',
name: "低风险 70% 1345.5",
value: 1345.5,
itemStyle: {
color: '#2BE7ABFF',
color: "#2BE7ABFF",
},
},
{
name: '一般风险 20% 384.5',
name: "一般风险 20% 384.5",
value: 384.5,
itemStyle: {
color: '#18A7F2FF',
color: "#18A7F2FF",
},
},
{
name: '较大风险 5% 91.11',
name: "较大风险 5% 91.11",
value: 91.11,
itemStyle: {
color: '#F8E270FF',
color: "#F8E270FF",
},
},
{
name: '重大风险 5% 91',
name: "重大风险 5% 91",
value: 91,
itemStyle: {
color: '#FF5D6CFF',
color: "#FF5D6CFF",
},
},
]);
 
function FxClick(val) {
FxClickName.value = val;
if (FxClickName.value == '燃气') {
if (FxClickName.value == "燃气") {
let obj = [
{
name: '低风险 70% 1345.5',
name: "低风险 70% 1345.5",
value: 1345.5,
itemStyle: {
color: '#2BE7ABFF',
},
},
{
name: '一般风险 20% 384.5',
color: "#2BE7ABFF",
},
},
{
name: "一般风险 20% 384.5",
value: 384.5,
itemStyle: {
color: '#18A7F2FF',
},
},
{
name: '较大风险 5% 91.11',
color: "#18A7F2FF",
},
},
{
name: "较大风险 5% 91.11",
value: 91.11,
itemStyle: {
color: '#F8E270FF',
},
},
{
name: '重大风险 5% 91',
color: "#F8E270FF",
},
},
{
name: "重大风险 5% 91",
value: 91,
itemStyle: {
color: '#FF5D6CFF',
color: "#FF5D6CFF",
},
},
];
bus.emit('FxVisible', obj);
} else if (FxClickName.value == '排水') {
bus.emit("FxVisible", obj);
} else if (FxClickName.value == "排水") {
let obj = [
{
name: '低风险 65% 76.7',
name: "低风险 65% 76.7",
value: 76.7,
itemStyle: {
color: '#2BE7ABFF',
},
},
{
name: '一般风险 20% 23.6',
color: "#2BE7ABFF",
},
},
{
name: "一般风险 20% 23.6",
value: 23.6,
itemStyle: {
color: '#18A7F2FF',
},
},
{
name: '较大风险 10% 11.8',
color: "#18A7F2FF",
},
},
{
name: "较大风险 10% 11.8",
value: 11.8,
itemStyle: {
color: '#F8E270FF',
},
},
{
name: '重大风险 5% 5.9',
color: "#F8E270FF",
},
},
{
name: "重大风险 5% 5.9",
value: 5.9,
itemStyle: {
color: '#FF5D6CFF',
color: "#FF5D6CFF",
},
},
];
bus.emit('FxVisible', obj);
} else if (FxClickName.value == '桥梁') {
bus.emit("FxVisible", obj);
} else if (FxClickName.value == "桥梁") {
let obj = [
{
name: '低风险 0% 0',
value: 0,
itemStyle: {
color: '#2BE7ABFF',
},
},
{
name: '一般风险 0% 0',
value: 0,
itemStyle: {
color: '#18A7F2FF',
},
},
{
name: '较大风险 0% 0',
value: 0,
itemStyle: {
color: '#F8E270FF',
},
},
{
name: '重大风险 0% 0',
value: 0,
itemStyle: {
color: '#FF5D6CFF',
name: "低风险 0% 0",
value: 0,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 0% 0",
value: 0,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 0% 0",
value: 0,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 0% 0",
value: 0,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit('FxVisible', obj);
bus.emit("FxVisible", obj);
} else {
let obj = [
{
name: '低风险 0% 0',
value: 0,
itemStyle: {
color: '#2BE7ABFF',
},
},
{
name: '一般风险 0% 0',
value: 0,
itemStyle: {
color: '#18A7F2FF',
},
},
{
name: '较大风险 0% 0',
value: 0,
itemStyle: {
color: '#F8E270FF',
},
},
{
name: '重大风险 0% 0',
value: 0,
itemStyle: {
color: '#FF5D6CFF',
name: "低风险 0% 0",
value: 0,
itemStyle: {
color: "#2BE7ABFF",
},
},
{
name: "一般风险 0% 0",
value: 0,
itemStyle: {
color: "#18A7F2FF",
},
},
{
name: "较大风险 0% 0",
value: 0,
itemStyle: {
color: "#F8E270FF",
},
},
{
name: "重大风险 0% 0",
value: 0,
itemStyle: {
color: "#FF5D6CFF",
},
},
];
bus.emit('FxVisible', obj);
bus.emit("FxVisible", obj);
}
}
 
const showPanel = ref(true); //面板展开收起
},
{ immediate: true }
);
onMounted(() => {
bus.emit('FxVisible', obj.value);
bus.emit("FxVisible", obj.value);
});
</script>
 
<style lang="scss" scoped>
.middleextB {
height: 14px;
width: 58%;
margin-top: 8px;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 76, 118, 0.8) 100%
);
border-radius: 16px;
border: 1px solid #15d2fd;
// background: yellow;
.BJ_CenBox1 {
margin-top: 5px;
.part {
width: 130px;
height: 160px;
background: url('@/assets/newImgs/iSpt.png') no-repeat;
background: url("@/assets/newImgs/iSpt.png") no-repeat;
background-size: 100% 100%;
.parttop {
height: 160px;
.upper {
top: 8px;
position: relative;
width: 408px;
height: 44px;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
.icon {
margin-left: 5px;
width: 25px;
height: 25px;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
font-size: 16px;
color: #ebfeff;
line-height: 25px;
padding-left: 5px;
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
height: 10px;
line-height: 0px;
margin-top: 10px;
}
.text {
padding: 0 10px 0 6px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
font-size: 16px;
color: #c1d3d4;
}
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
View
70
src/views/oneMap/components/ZHQL.vue
<template>
<div id="ZHQL">
<!-- 左侧盒子 -->
<div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
<div
:class="[
'LeftBox',
'animate__animated',
showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
]"
>
<LeftBox></LeftBox>
</div>
<!-- 右侧盒子 -->
<div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
import { ref, reactive, toRefs, onMounted } from 'vue';
 
// 顶部信息展示
import QL_WD from '@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png';
import QL_SD from '@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png';
import QL_FS from '@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png';
import QL_FL from '@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png';
import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
const AllData = reactive({
// 顶部信息展示
TopInfoData: [
{
icon: QL_WD,
font: '温度',
num: '16',
unit: '℃',
font: "温度",
num: "16",
unit: "℃",
},
{
icon: QL_SD,
font: '湿度',
num: '32',
unit: '%',
font: "湿度",
num: "32",
unit: "%",
},
{
icon: QL_FS,
font: '风速',
num: '5.2',
unit: 'm/s',
font: "风速",
num: "5.2",
unit: "m/s",
},
{
icon: QL_FL,
font: '风力',
num: '4',
unit: '级',
font: "风力",
num: "4",
unit: "级",
},
],
});
const showPanel = ref(true); //面板展开收起
height: calc(100% - 98px);
position: absolute;
left: 10px;
top: 70px;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
// padding: 10px;
height: calc(100% - 98px);
position: absolute;
right: 10px;
top: 70px;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
// padding: 10px;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
View
18
src/views/oneMap/components/mapboxPopup.vue
const allData = reactive({
dataList: {},
popupShow: false,
dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
streetPosition: null,
});
const dataOption = ref([]);
const selectData = ref([]);
const selectCode = ref('');
bus.emit('publicDialog', data);
};
//街景弹框点击事件
const showStreetLayer = () => {
console.log('少爷在这里加~~~~~~~~~');
let data = {
title: '街景',
comIDs: ['streetscape'],
};
bus.emit('publicDialog', data);
setTimeout(() => {
bus.emit('streetPosition', allData.streetPosition);
}, 200);
};
onMounted(() => {
bus.on('closeCesiumPopup', () => {
allData.popupShow = false;
}
});
bus.on('popupcontent', params => {
console.log('popup接收地图标注点值---111', params);
allData.streetPosition = params.point;
allData.dataList = params.popupInfo;
let pipePopupDiv = document.getElementById('cesiumPopupID');
 
let popupCenter, center, offsets;
View
112
src/views/oneMap/index.vue
import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
// 引用地图
import OneMap from './map/newfiberMapBox.vue';
// 引用街景地图
import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 
// 引用王家坪大桥BIm
import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
// 引用隧道BIm
import Tunnel from './BIM/Tunnel.vue';
// 二级菜单展示
const handleMouseLeave = item => {
AllData.ErJiMenuShowID = null;
};
 
// async function urlToFile(url, fileName) {
// // 使用 fetch 获取图片并转换为 Blob
// const response = await fetch(url);
// const blob = await response.blob();
// // 将 Blob 转换为 File 对象
// const file = new File([blob], fileName, { type: blob.type });
// return file;
// }
 
// const createCanvas = (id)=>{
// let canvas = document.createElement("canvas");
// canvas.id = "canvas"+id;
// canvas.style.display = 'none';
// document.body.append(canvas);
// return canvas;
// }
 
// const createPlot = async (e,canvas)=>{
// var tif = await GeoTIFF.fromArrayBuffer( e.target.result);
// var tifImg = await tif.getImage();
// var readRasters = await tifImg.readRasters();
// plot == null &&(plot = new plotty.plot({canvas, data: readRasters[0], width: tifImg.getWidth(), height: tifImg.getHeight(), domain: [0, 256], colorScale: "mycolorscale"}));
// plot.setData(readRasters[0],tifImg.getWidth(),tifImg.getHeight());
// plot.render();
// }
 
// const createCanvasLayer = (canvasId,i,bbox)=>{
// bbox = [[bbox[0],bbox[3]],[bbox[2],bbox[3]],[bbox[2],bbox[1]],[bbox[0],bbox[1]]];
// newfiberMapbox.map.addSource('canvas-source'+i, {
// type: 'canvas',
// canvas: canvasId ,
// coordinates: bbox,
// animate: true
// });
 
// newfiberMapbox.map.addLayer({
// id: 'canvas-layer'+i,
// type: 'raster',
// source: 'canvas-source'+i
// });
// newfiberMapbox.map.moveLayer('canvas-layer'+i);
// }
 
// const plotInit =(colorScale=colorScale)=>{
// const minVal = colorScale[0].value;
// const maxVal = colorScale[colorScale.length -1].value;
// let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
// if(color[color.length-1].value / maxVal < 1) color.push({value:maxVal,color:colorScale[color.length].color});
// plotty.addColorScale("mycolorscale",color.map(i => i.color), color.map(i => (i.value / maxVal).toFixed(5)));
// }
 
// let colorScale = [
// {value: "0", color: "rgba(7, 213, 118, 0)"},
// {value: "0.1", color: "rgba(7, 213, 118, 0)"},
// {value: "5", color: "rgba(7, 213, 118, 1)"},
// {value: "15", color: "rgba(38, 129, 240,1)"},
// {value: "30", color: "rgba(247, 223, 56, 1)"},
// {value: "70", color: "rgba(230, 85, 41, 1)"},
// {value: "140", color: "rgba(255, 26, 26, 1)"},
// ]
// let imageFiles = [];
// let canvas = [];
// let plot = null;
// const initRainImage = async ()=>{
// const images = [
// "http://192.168.16.133:9994/tif/0819_0.tif",
// "http://192.168.16.133:9994/tif/0819_1.tif",
// "http://192.168.16.133:9994/tif/0819_2.tif",
// "http://192.168.16.133:9994/tif/0819_3.tif",
// "http://192.168.16.133:9994/tif/0819_4.tif",
// "http://192.168.16.133:9994/tif/0819_5.tif",
// "http://192.168.16.133:9994/tif/0819_6.tif",
// "http://192.168.16.133:9994/tif/0819_7.tif",
// "http://192.168.16.133:9994/tif/0819_8.tif",
// "http://192.168.16.133:9994/tif/0819_9.tif",
// "http://192.168.16.133:9994/tif/0819_10.tif",
// "http://192.168.16.133:9994/tif/0819_11.tif",
// "http://192.168.16.133:9994/tif/0819_12.tif",
// "http://192.168.16.133:9994/tif/0819_13.tif",
// "http://192.168.16.133:9994/tif/0819_14.tif",
// "http://192.168.16.133:9994/tif/0819_15.tif",
// "http://192.168.16.133:9994/tif/0819_16.tif",
// "http://192.168.16.133:9994/tif/0819_17.tif",
// "http://192.168.16.133:9994/tif/0819_18.tif",
// "http://192.168.16.133:9994/tif/0819_19.tif",
// "http://192.168.16.133:9994/tif/0819_20.tif",
// "http://192.168.16.133:9994/tif/0819_21.tif",
// "http://192.168.16.133:9994/tif/0819_22.tif",
// "http://192.168.16.133:9994/tif/0819_23.tif",
// ];
// imageFiles = await Promise.all(images.map(url => urlToFile(url,_.last(_.split(url,"/")))));
 
// canvas = createCanvas(0);
// plotInit(colorScale);
// createCanvasLayer(canvas.id,0,[109.36903069276376,36.53005543707354,109.62694602722712,36.7105574823517]);
// let i = 0;
// let interval = setInterval(()=>{
// if(i >= imageFiles.length) i = 0;
// setRainImage(i++);
// },1000)
// }
 
// const setRainImage = (index) => {
// var reader = new FileReader();
// reader.onload = e => createPlot(e,canvas);
// reader.readAsArrayBuffer(imageFiles[index]);
// }
</script>
 
<style lang="scss" scoped>
#oneMapIndex {
View
50
src/views/oneMap/map/PanoramaMap.vue 100644 → 0
<template>
<div class="mapPage">
<div id="container"></div>
</div>
</template>
 
<script setup name="PanoramaMap">
import { ref, reactive, toRefs, onMounted } from 'vue';
 
const AllData = reactive({
panorama: null,
});
// 初始化街景地图
const initePanoramaMap = () => {
AllData.panorama = BMapGL.Panorama('container');
AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
AllData.panorama.setPov({
// 修改全景的视角
pitch: 10,
heading: 140,
});
AllData.panorama.setOptions({
linksControl: true, // 隐藏道路指示控件,默认true
navigationControl: true, // 隐藏导航控件,默认true
});
};
onMounted(() => {
initePanoramaMap();
});
onBeforeUnmount(() => {});
</script>
 
<style lang="scss" scoped>
.mapPage {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
background: lavender;
}
 
#container {
width: 100%;
height: 100%;
position: absolute;
}
</style>
View
50
src/views/oneMap/smartBridge/LeftBox.vue
</div>
<div class="centerContent contentBox">
<div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
<div class="shebeiBox_left">
<div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
<div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">
{{ t }}
</div>
<div class="shebeiBox_left_num">
<span>{{ item.num }}</span
>
</div>
</div>
</template>
 
<script setup name="leftQL">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
 
// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
// import ps_icon from '@/assets/newImgs/ps.png'; //排水
 
import jianjie from '@/assets/qiaoliangImg/jianjie_ql.png';
import jk_01 from '@/assets/qiaoliangImg/qljk_01.png';
import jk_02 from '@/assets/qiaoliangImg/qljk_02.png';
import jk_03 from '@/assets/qiaoliangImg/qljk_03.png';
import jk_04 from '@/assets/qiaoliangImg/qljk_04.png';
import lfj_icon from '@/assets/qiaoliangImg/lfj.png';
import sxj_icon from '@/assets/qiaoliangImg/sxj.png';
import wdj_icon from '@/assets/qiaoliangImg/wdj.png';
import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
import jsdj_icon from '@/assets/qiaoliangImg/jsdj.png';
import ybj_icon from '@/assets/qiaoliangImg/ybj.png';
import jianjie from "@/assets/qiaoliangImg/jianjie_ql.png";
import jk_01 from "@/assets/qiaoliangImg/qljk_01.png";
import jk_02 from "@/assets/qiaoliangImg/qljk_02.png";
import jk_03 from "@/assets/qiaoliangImg/qljk_03.png";
import jk_04 from "@/assets/qiaoliangImg/qljk_04.png";
import lfj_icon from "@/assets/qiaoliangImg/lfj.png";
import sxj_icon from "@/assets/qiaoliangImg/sxj.png";
import wdj_icon from "@/assets/qiaoliangImg/wdj.png";
import jlszy_icon from "@/assets/qiaoliangImg/jlszy.png";
import jsdj_icon from "@/assets/qiaoliangImg/jsdj.png";
import ybj_icon from "@/assets/qiaoliangImg/ybj.png";
 
const introduce =
'延安王家坪大桥(彩虹桥)位于延安市王家坪革命纪念馆前,是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要,由省政府决定、省交通厅负责实施的,是在原桥位置上新建的一座特大桥。该项工程于1997年4月22日开工建设,1998年9月28日竣工通车,工程总投资3667万元。';
"延安王家坪大桥(彩虹桥)位于延安市王家坪革命纪念馆前,是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要,由省政府决定、省交通厅负责实施的,是在原桥位置上新建的一座特大桥。该项工程于1997年4月22日开工建设,1998年9月28日竣工通车,工程总投资3667万元。";
const videoList = [jk_01, jk_02, jk_03, jk_04];
const shebeiList = [
{
name: ['静力水准仪'],
name: ["静力水准仪"],
icon: jlszy_icon,
num: 22,
},
{
name: ['应变计'],
name: ["应变计"],
icon: ybj_icon,
num: 42,
},
{
name: ['加速度计'],
name: ["加速度计"],
icon: jsdj_icon,
num: 18,
},
{
name: ['温度计'],
name: ["温度计"],
icon: wdj_icon,
num: 3,
},
{
name: ['裂缝计'],
name: ["裂缝计"],
icon: lfj_icon,
num: 3,
},
{
name: ['摄像机'],
name: ["摄像机"],
icon: sxj_icon,
num: 3,
},
];
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-indent: 2em;
overflow-y: auto;
padding: 10px;
// box-sizing: border-box;
background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
background: url("@/assets/tunnelImg/jjwz.png") no-repeat;
background-size: 100% 100%;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
display: flex;
justify-content: space-between;
align-items: center;
// kpbj_img
background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
background: url("@/assets/tunnelImg/kpbj_img.png") no-repeat;
background-size: 100% 100%;
.shebeiBox_left {
z-index: 99;
height: 100%;