|
|
@@ -1,29 +1,89 @@
|
|
|
<script setup>
|
|
|
- import {
|
|
|
- inject
|
|
|
- } from "vue";
|
|
|
- import html2canvas from 'html2canvas';
|
|
|
- import {
|
|
|
- blobToBase64,
|
|
|
- base64ToBlob
|
|
|
- } from '@/assets/js/blobtobase64';
|
|
|
- const getMapInstance = inject("getMapInstance");
|
|
|
- jt3d = getMapInstance();
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="mainview">
|
|
|
- <div class="header">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="middleviewer">
|
|
|
- <div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
|
|
|
- <div class="viewertop">
|
|
|
- <img :src="res.url" @click="flyto(res.info)">
|
|
|
+ <div id="main5">
|
|
|
+ <div class="chushuikou">
|
|
|
+ <div class="chushuikou1">
|
|
|
+ <div class="chushuikou1-1">
|
|
|
+ <label>区域</label>
|
|
|
+ <label>水泵电流</label>
|
|
|
+ <label>出入口经</label>
|
|
|
+ <label>实时流量</label>
|
|
|
+ <label>运行状态</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou2">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label >1号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou3">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>2号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
|
|
|
</div>
|
|
|
- <div class="viewerbottom">
|
|
|
- {{res.name}}
|
|
|
- <img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou4">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>3号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou5">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>4号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou4">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>5号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou5">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>6号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou4">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>6号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chushuikou5">
|
|
|
+ <div class="chushuikou2-1">
|
|
|
+ <label>6号机井</label>
|
|
|
+ <label style="color:'#ecec66';">200A</label>
|
|
|
+ <label >100/150</label>
|
|
|
+ <label >80m³/h</label>
|
|
|
+ <button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -40,263 +100,96 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- //获取输入框值
|
|
|
- getName() {
|
|
|
- this.viewersName = document.getElementById("inputValue").value;
|
|
|
- },
|
|
|
-
|
|
|
- //跳转方法
|
|
|
- flyto(options) {
|
|
|
- jt3d.LocateUtil.flyToPoint(options)
|
|
|
- },
|
|
|
-
|
|
|
- //删除方法，传keyvalue以及需要修改属性
|
|
|
- deleteviewer(item, index) {
|
|
|
- //删除对应数组内的对象
|
|
|
- this.ImgurlList.splice(index, 1)
|
|
|
- if (item.id) {
|
|
|
- this.$http.get('/delete', {
|
|
|
- tableName: 'sys_map_angle',
|
|
|
- keyValue: item.id,
|
|
|
- }).then(res => {
|
|
|
- console.log(res.data)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //添加视角标签，当前页存数组，向数据库传入相机参数
|
|
|
- addviewer() {
|
|
|
- //获取当前界面截图方法
|
|
|
- html2canvas(
|
|
|
- this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
|
|
|
- // backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
|
|
|
- useCORS: true, //支持图片跨域
|
|
|
- scale: 1 / 8, //设置放大的倍数
|
|
|
- }
|
|
|
- ).then(canvas => {
|
|
|
- //截图用img元素承装，显示在页面的上
|
|
|
- let url = canvas.toDataURL('image/png')
|
|
|
- //经纬度、高度
|
|
|
- // 获取 相机姿态信息
|
|
|
- let heading = window["viewer"].scene.camera.heading
|
|
|
- let pitch = window["viewer"].scene.camera.pitch
|
|
|
- let roll = window["viewer"].scene.camera.roll
|
|
|
- let position = window["viewer"].scene.camera.positionCartographic
|
|
|
- let longitude = Cesium.Math.toDegrees(position.longitude) //y
|
|
|
- let latitude = Cesium.Math.toDegrees(position.latitude) //x
|
|
|
- let height = position.height
|
|
|
- let info = {
|
|
|
- latitude: latitude,
|
|
|
- longitude: longitude,
|
|
|
- height: height,
|
|
|
- pitch: Cesium.Math.toDegrees(pitch),
|
|
|
- roll: Cesium.Math.toDegrees(roll),
|
|
|
- heading: Cesium.Math.toDegrees(heading)
|
|
|
- }
|
|
|
- //dom for循环渲染列表
|
|
|
- this.ImgurlList.unshift({
|
|
|
- url: url,
|
|
|
- name: this.viewersName,
|
|
|
- info: info
|
|
|
- })
|
|
|
-
|
|
|
- //base64转换为二进制文件
|
|
|
- // let blob = base64ToBlob(url)
|
|
|
- // //文件转为文件流
|
|
|
- // let formData = new FormData();
|
|
|
- // formData.append('file',blob)
|
|
|
-
|
|
|
- let data = {
|
|
|
- name: this.viewersName,
|
|
|
- x: latitude,
|
|
|
- y: longitude,
|
|
|
- z: height,
|
|
|
- pitch: Cesium.Math.toDegrees(pitch),
|
|
|
- roll: Cesium.Math.toDegrees(roll),
|
|
|
- heading: Cesium.Math.toDegrees(heading),
|
|
|
- screenshot: url,
|
|
|
- userId: this.id,
|
|
|
- // id:0
|
|
|
- }
|
|
|
-
|
|
|
- //添加数据接口
|
|
|
- this.$http.post('/postSubmit', {
|
|
|
- tableName: 'sys_map_angle',
|
|
|
- keyValue: '',
|
|
|
- formData: data,
|
|
|
- }).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success == true) {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- },
|
|
|
- searchviewer() {
|
|
|
- this.info = JSON.parse(localStorage.getItem('person'))
|
|
|
- this.id = this.info.id
|
|
|
- //获取所有图片数据
|
|
|
- this.$http.get('/getTableList', {
|
|
|
- tableName: 'sys_map_angle', //
|
|
|
- sqlWhere: "name like '%" + this.viewersName + "%'",
|
|
|
- orderByField: ''
|
|
|
- }).then(res => {
|
|
|
- console.log('获取图片', res.data)
|
|
|
- this.ImgurlList = [];
|
|
|
- res.data.forEach(item => {
|
|
|
- let info = {
|
|
|
- latitude: item.x,
|
|
|
- longitude: item.y,
|
|
|
- height: item.z,
|
|
|
- pitch: item.pitch,
|
|
|
- roll: item.roll,
|
|
|
- heading: item.heading
|
|
|
- }
|
|
|
- // let url = blobToBase64(item.screenshot)
|
|
|
- //dom for循环渲染列表
|
|
|
- this.ImgurlList.push({
|
|
|
- url: item.screenshot,
|
|
|
- name: item.name,
|
|
|
- info: info,
|
|
|
- id: item.id
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- // console.log('img列表',this.ImgurlList)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.info = JSON.parse(localStorage.getItem('person'))
|
|
|
- this.id = this.info.id
|
|
|
- //获取所有图片数据
|
|
|
- this.$http.get('/getTableList', {
|
|
|
- tableName: 'sys_map_angle', //
|
|
|
- sqlWhere: '', //+ this.loginForm.id
|
|
|
- orderByField: ''
|
|
|
- }).then(res => {
|
|
|
- console.log('获取图片', res.data)
|
|
|
- res.data.forEach(item => {
|
|
|
- let info = {
|
|
|
- latitude: item.x,
|
|
|
- longitude: item.y,
|
|
|
- height: item.z,
|
|
|
- pitch: item.pitch,
|
|
|
- roll: item.roll,
|
|
|
- heading: item.heading
|
|
|
- }
|
|
|
- // let url = blobToBase64(item.screenshot)
|
|
|
- //dom for循环渲染列表
|
|
|
- this.ImgurlList.push({
|
|
|
- url: item.screenshot,
|
|
|
- name: item.name,
|
|
|
- info: info,
|
|
|
- id: item.id
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- // console.log('img列表',this.ImgurlList)
|
|
|
- })
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .mainview {
|
|
|
+
|
|
|
+ #main5{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
-
|
|
|
- .header {
|
|
|
+
|
|
|
+ .chushuikou {
|
|
|
width: 100%;
|
|
|
+ height: 175rem;
|
|
|
+ margin-top: 10rem;
|
|
|
+ // margin-left: 5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35rem;
|
|
|
+ background-color: rgba(61, 198, 255, 0.4);
|
|
|
display: flex;
|
|
|
-
|
|
|
- input,
|
|
|
- input:focus {
|
|
|
- outline: none;
|
|
|
- width: 185rem !important;
|
|
|
- border: 1rem solid rgba(255, 255, 255, 0.8);
|
|
|
- margin-right: 10rem;
|
|
|
- height: 26rem !important;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- background-color: rgba(255, 255, 255, 0) !important;
|
|
|
- border-radius: 3rem;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
-
|
|
|
- .middleviewer {
|
|
|
- width: 265rem;
|
|
|
- height: 100%;
|
|
|
- margin-left: 7rem;
|
|
|
-
|
|
|
- .viewer {
|
|
|
- width: 265rem !important;
|
|
|
- height: 196rem !important;
|
|
|
- margin-top: 15rem;
|
|
|
- border: 1rem solid #ffffff !important;
|
|
|
- border-radius: 1rem !important;
|
|
|
-
|
|
|
- .viewertop {
|
|
|
- width: 265rem !important;
|
|
|
- height: 166rem !important;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .viewerbottom {
|
|
|
- line-height: 30rem !important;
|
|
|
- text-align: center !important;
|
|
|
- width: 265rem !important;
|
|
|
- height: 30rem !important;
|
|
|
- position: relative;
|
|
|
- background-color: rgba(15, 145, 185, 0.7);
|
|
|
-
|
|
|
- .deleteImg {
|
|
|
- width: 24rem;
|
|
|
- height: 24rem;
|
|
|
- right: 5rem;
|
|
|
- top: 3rem;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .chushuikou1-1 {
|
|
|
+ font-family: SimHei;
|
|
|
+ font-size: 14rem;
|
|
|
+ color: #C8daf5;
|
|
|
+ width: 100%;
|
|
|
+ height: 13rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-input {
|
|
|
- flex-grow: 0 !important;
|
|
|
- width: 200rem !important;
|
|
|
- // display: inline !important;
|
|
|
- // margin-left: 5rem;
|
|
|
- margin-right: 10rem;
|
|
|
- height: 30rem !important;
|
|
|
- }
|
|
|
-
|
|
|
- //输入框文字颜色
|
|
|
- ::v-deep .el-input__inner {
|
|
|
- color: rgba(255, 255, 255, 1)
|
|
|
- }
|
|
|
-
|
|
|
- //输入框背景色
|
|
|
- ::v-deep .el-input__wrapper {
|
|
|
- background-color: rgba(255, 255, 255, 0) !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-button {
|
|
|
- border-radius: 3rem !important;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-button--primary {
|
|
|
- background-color: rgba(64, 158, 255, 0.6) !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 0rem;
|
|
|
+
|
|
|
+ .chushuikou2-1 {
|
|
|
+ font-family: SimHei;
|
|
|
+ font-size: 13rem;
|
|
|
+ color: #C8daf5;
|
|
|
+ width: 100%;
|
|
|
+ height: 13rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: auto;
|
|
|
+ // margin-left: 30rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou2-2 {
|
|
|
+ font-family: SimHei;
|
|
|
+ font-size: 13rem;
|
|
|
+ color: #C8daf5;
|
|
|
+ width: 100%;
|
|
|
+ height: 13rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: auto;
|
|
|
+ // margin-left: 30rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35rem;
|
|
|
+ background-color: rgba(0, 37, 98, 0.4);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou4 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chushuikou5 {
|
|
|
+ width: 100%;
|
|
|
+ height: 35rem;
|
|
|
+ background-color: rgba(0, 37, 98, 0.4);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
DESKTOP-GBVU60Q\dell
