Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
a219da084e
|
|
@ -91,6 +91,7 @@
|
|||
"bpmn-js-properties-panel": "^5.13.0",
|
||||
"bpmn-js-token-simulation": "^0.33.1",
|
||||
"ceel-json-editor": "^0.0.3",
|
||||
"cesium": "^1.130.0",
|
||||
"codemirror": "^5.65.16",
|
||||
"cropperjs": "^1.6.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
|
|
@ -99,11 +100,13 @@
|
|||
"driver.js": "^1.3.1",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.6.0",
|
||||
"esbuild": "^0.19.12",
|
||||
"exceljs": "^4.4.0",
|
||||
"fabric": "^4.6.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"js-base64": "3.7.7",
|
||||
"js-md5": "^0.8.3",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"jszip": "^3.10.1",
|
||||
"kml-geojson": "^1.2.2",
|
||||
"localforage": "^1.10.0",
|
||||
|
|
@ -138,6 +141,7 @@
|
|||
"uuid": "^9.0.1",
|
||||
"vditor": "^3.9.8",
|
||||
"video.js": "^8.6.1",
|
||||
"vite-plugin-cesium": "^1.2.23",
|
||||
"vue": "3.3.4",
|
||||
"vue-color-kit": "^1.0.6",
|
||||
"vue-i18n": "^9.8.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export enum MapboxConfig {
|
||||
ACCESS_TOKEN = 'pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q',
|
||||
ACCESS_TOKEN = 'pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw',
|
||||
// ACCESS_TOKEN = "1234",
|
||||
TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
|
||||
// add more config options here
|
||||
|
|
|
|||
|
|
@ -59,6 +59,15 @@
|
|||
@ok="handleOk"
|
||||
>
|
||||
<Preview
|
||||
v-if="nowPreviewRecord.type == 'img' || nowPreviewRecord.type == 'video'"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
:previewRecordList="previewRecordList"
|
||||
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
||||
@closeModal="closeModal"
|
||||
@reloadTable="reload"
|
||||
/>
|
||||
<ModelModal
|
||||
v-if="nowPreviewRecord.type.includes('model')"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
:previewRecordList="previewRecordList"
|
||||
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
||||
|
|
@ -93,6 +102,7 @@
|
|||
import { CompressFileModal } from './modal/modal';
|
||||
import { RenameModal } from './modal/modal';
|
||||
import Preview from './preview/preview.vue';
|
||||
import ModelModal from './priview2D3D/modelModal.vue';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './modal.data';
|
||||
import dayjs from 'dayjs';
|
||||
|
|
@ -142,117 +152,125 @@
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '1-2',
|
||||
name: '南山风景照.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp',
|
||||
imgtype: '原片',
|
||||
taskname: '佛山大火救援项目',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 889,
|
||||
height: 500,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
canvasJson:
|
||||
'{"version":"4.6.0","objects":[{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":520.5,"top":634,"width":0,"height":0,"fill":null,"stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",520.999,634.5],["L",521.001,634.5]]},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":523,"top":352.5,"width":100,"height":100,"fill":"#ffffff00","stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.73,"scaleY":0.73,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"textbox","version":"4.6.0","originX":"left","originY":"top","left":523,"top":426.5,"width":200,"height":22.6,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"fontFamily":"Times New Roman","fontWeight":"normal","fontSize":20,"text":"太阳","underline":false,"overline":false,"linethrough":false,"textAlign":"left","fontStyle":"normal","lineHeight":1.16,"textBackgroundColor":"","charSpacing":0,"styles":{},"direction":"ltr","path":null,"pathStartOffset":0,"pathSide":"left","minWidth":20,"splitByGrapheme":false},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":784,"top":436.5,"width":190.01,"height":85.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",785.996,438.496],["Q",786,438.5,786.5,438.5],["Q",787,438.5,790.5,440],["Q",794,441.5,798.5,443.5],["Q",803,445.5,808,448],["Q",813,450.5,820,453.5],["Q",827,456.5,880,480.5],["Q",933,504.5,940,508],["Q",947,511.5,952.5,514],["Q",958,516.5,962.5,518],["Q",967,519.5,970,521],["Q",973,522.5,974.5,523],["L",976.004,523.504]]},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":808,"top":417.5,"width":123.01,"height":124.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",933.004,419.496],["Q",933,419.5,931.5,420.5],["Q",930,421.5,928,425],["Q",926,428.5,921.5,433],["Q",917,437.5,914,441.5],["Q",911,445.5,905.5,450.5],["Q",900,455.5,894,462],["Q",888,468.5,883,473.5],["Q",878,478.5,872,484.5],["Q",866,490.5,861.5,495],["Q",857,499.5,851,504.5],["Q",845,509.5,841.5,513],["Q",838,516.5,833.5,520],["Q",829,523.5,826,526.5],["Q",823,529.5,820,533],["Q",817,536.5,815,538],["Q",813,539.5,812.5,540.5],["Q",812,541.5,811,542.5],["L",809.996,543.504]]}],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":889,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1.46,"scaleY":1.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp","crossOrigin":null,"filters":[]}}',
|
||||
id: '2',
|
||||
name: '图片',
|
||||
createtime: '2025-03-24 18:13:17',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{
|
||||
id: '1-2',
|
||||
name: '南山风景照.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp',
|
||||
imgtype: '原片',
|
||||
taskname: '佛山大火救援项目',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 889,
|
||||
height: 500,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
canvasJson:
|
||||
'{"version":"4.6.0","objects":[{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":520.5,"top":634,"width":0,"height":0,"fill":null,"stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",520.999,634.5],["L",521.001,634.5]]},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":523,"top":352.5,"width":100,"height":100,"fill":"#ffffff00","stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.73,"scaleY":0.73,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"textbox","version":"4.6.0","originX":"left","originY":"top","left":523,"top":426.5,"width":200,"height":22.6,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"fontFamily":"Times New Roman","fontWeight":"normal","fontSize":20,"text":"太阳","underline":false,"overline":false,"linethrough":false,"textAlign":"left","fontStyle":"normal","lineHeight":1.16,"textBackgroundColor":"","charSpacing":0,"styles":{},"direction":"ltr","path":null,"pathStartOffset":0,"pathSide":"left","minWidth":20,"splitByGrapheme":false},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":784,"top":436.5,"width":190.01,"height":85.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",785.996,438.496],["Q",786,438.5,786.5,438.5],["Q",787,438.5,790.5,440],["Q",794,441.5,798.5,443.5],["Q",803,445.5,808,448],["Q",813,450.5,820,453.5],["Q",827,456.5,880,480.5],["Q",933,504.5,940,508],["Q",947,511.5,952.5,514],["Q",958,516.5,962.5,518],["Q",967,519.5,970,521],["Q",973,522.5,974.5,523],["L",976.004,523.504]]},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":808,"top":417.5,"width":123.01,"height":124.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",933.004,419.496],["Q",933,419.5,931.5,420.5],["Q",930,421.5,928,425],["Q",926,428.5,921.5,433],["Q",917,437.5,914,441.5],["Q",911,445.5,905.5,450.5],["Q",900,455.5,894,462],["Q",888,468.5,883,473.5],["Q",878,478.5,872,484.5],["Q",866,490.5,861.5,495],["Q",857,499.5,851,504.5],["Q",845,509.5,841.5,513],["Q",838,516.5,833.5,520],["Q",829,523.5,826,526.5],["Q",823,529.5,820,533],["Q",817,536.5,815,538],["Q",813,539.5,812.5,540.5],["Q",812,541.5,811,542.5],["L",809.996,543.504]]}],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":889,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1.46,"scaleY":1.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp","crossOrigin":null,"filters":[]}}',
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
name: '风景图.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imgtype: '原片2',
|
||||
taskname: '佛山大火救援项目2',
|
||||
airlineName: '火灾救援勘查航线2',
|
||||
width: 2000,
|
||||
height: 1334,
|
||||
size: '1.63M',
|
||||
photographFeiji: '救援机1008',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
canvasJson:
|
||||
'{"version":"4.6.0","objects":[],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":2000,"height":1334,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.65,"scaleY":0.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871","crossOrigin":null,"filters":[]}}',
|
||||
},
|
||||
{
|
||||
id: '1-4',
|
||||
name: '红外照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://pic.rmb.bdstatic.com/bjh/gallery/8c885a0e3cf0647b60548535e2e9ca39.jpeg',
|
||||
imgtype: '红外照片',
|
||||
taskname: '佛山大火救援项目-红外照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 640,
|
||||
height: 480,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
{
|
||||
id: '1-5',
|
||||
name: '广角照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://img2.baidu.com/it/u=2490853491,3226002419&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
|
||||
imgtype: '广角照片',
|
||||
taskname: '佛山大火救援项目-广角照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 749,
|
||||
height: 500,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
{
|
||||
id: '1-6',
|
||||
name: '变焦照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://img2.baidu.com/it/u=3778652155,475195343&fm=253&fmt=auto&app=138&f=PNG?w=500&h=518',
|
||||
imgtype: '变焦照片',
|
||||
taskname: '佛山大火救援项目-变焦照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 500,
|
||||
height: 518,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
name: '风景图.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imgtype: '原片2',
|
||||
taskname: '佛山大火救援项目2',
|
||||
airlineName: '火灾救援勘查航线2',
|
||||
width: 2000,
|
||||
height: 1334,
|
||||
size: '1.63M',
|
||||
photographFeiji: '救援机1008',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
canvasJson:
|
||||
'{"version":"4.6.0","objects":[],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":2000,"height":1334,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.65,"scaleY":0.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871","crossOrigin":null,"filters":[]}}',
|
||||
},
|
||||
{
|
||||
id: '1-4',
|
||||
name: '红外照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://pic.rmb.bdstatic.com/bjh/gallery/8c885a0e3cf0647b60548535e2e9ca39.jpeg',
|
||||
imgtype: '红外照片',
|
||||
taskname: '佛山大火救援项目-红外照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 640,
|
||||
height: 480,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
{
|
||||
id: '1-5',
|
||||
name: '广角照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://img2.baidu.com/it/u=2490853491,3226002419&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
|
||||
imgtype: '广角照片',
|
||||
taskname: '佛山大火救援项目-广角照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 749,
|
||||
height: 500,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
{
|
||||
id: '1-6',
|
||||
name: '变焦照片.jpg',
|
||||
createTime: '2020-10-22 17:33:22',
|
||||
type: 'img',
|
||||
url: 'https://img2.baidu.com/it/u=3778652155,475195343&fm=253&fmt=auto&app=138&f=PNG?w=500&h=518',
|
||||
imgtype: '变焦照片',
|
||||
taskname: '佛山大火救援项目-变焦照片',
|
||||
airlineName: '火灾救援勘查航线',
|
||||
width: 500,
|
||||
height: 518,
|
||||
size: '6.2M',
|
||||
photographFeiji: '救援机1007',
|
||||
photographNumber: 'GD610',
|
||||
photographMan: 'zachzhou',
|
||||
photographTime: '2020-10-22 00:00:00',
|
||||
label: ['人', '车'],
|
||||
lat: 35.362625,
|
||||
lng: 118.033886,
|
||||
},
|
||||
{
|
||||
id: '41',
|
||||
id: '3',
|
||||
name: '视频',
|
||||
createtime: '2025-03-24 18:13:17',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{
|
||||
id: '4-4',
|
||||
id: '3-4',
|
||||
name: 'XZD153狼窝沟西南',
|
||||
createTime: '',
|
||||
type: 'video',
|
||||
|
|
@ -260,7 +278,7 @@
|
|||
manufacturer: '海康',
|
||||
},
|
||||
{
|
||||
id: '4-5',
|
||||
id: '3-5',
|
||||
name: '费县马庄镇陈家鱼后村南斜坡后村',
|
||||
createTime: '',
|
||||
type: 'video',
|
||||
|
|
@ -268,7 +286,7 @@
|
|||
manufacturer: '腾讯',
|
||||
},
|
||||
{
|
||||
id: '4-6',
|
||||
id: '3-6',
|
||||
name: '可落',
|
||||
createTime: '',
|
||||
type: 'video',
|
||||
|
|
@ -276,7 +294,7 @@
|
|||
manufacturer: '乐橙',
|
||||
},
|
||||
{
|
||||
id: '4-7',
|
||||
id: '3-7',
|
||||
name: '费县薛庄镇东张林村村南可见光',
|
||||
createTime: '',
|
||||
type: 'video',
|
||||
|
|
@ -285,6 +303,44 @@
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '模型',
|
||||
createtime: '2025-03-24 18:13:17',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{
|
||||
id: '4-1',
|
||||
name: '天空之城 二维模型',
|
||||
createtime: '2025-03-24 18:13:17',
|
||||
type: 'model2D',
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
boundary: {
|
||||
end_lat: 22.57965964566081,
|
||||
end_lng: 113.93899440765381,
|
||||
max_level: 23,
|
||||
min_level: 12,
|
||||
start_lat: 22.578193485606185,
|
||||
start_lng: 113.93697738647461,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '4-2',
|
||||
name: '天空之城 三维模型',
|
||||
createtime: '2025-03-24 18:13:17',
|
||||
type: 'model3D',
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
boundary: {
|
||||
end_lat: 22.57965964566081,
|
||||
end_lng: 113.93899440765381,
|
||||
max_level: 23,
|
||||
min_level: 12,
|
||||
start_lat: 22.578193485606185,
|
||||
start_lng: 113.93697738647461,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const tableType = ref('table');
|
||||
|
|
@ -301,15 +357,6 @@
|
|||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
// onChange: (selectedRowKeys, selectedRows) => {
|
||||
// console.log(selectedRowKeys, selectedRows);
|
||||
// },
|
||||
// onSelect: (record, selected, selectedRows) => {
|
||||
// console.log(record, selected, selectedRows);
|
||||
// },
|
||||
// onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
// console.log(selected, selectedRows, changeRows);
|
||||
// },
|
||||
},
|
||||
striped: false,
|
||||
bordered: false,
|
||||
|
|
|
|||
|
|
@ -1,261 +1,97 @@
|
|||
<template>
|
||||
<div
|
||||
style="position: relative; height: 100%"
|
||||
ref="vChartRef"
|
||||
:id="'mars3d-container-' + name"
|
||||
></div>
|
||||
<div :id="mapId" class="map"> </div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { EventBus } from '@/utils/eventBus';
|
||||
import { defineProps, ref, onMounted, onUnmounted, defineEmits, computed } from 'vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import mapboxgl, { Map } from 'mapbox-gl';
|
||||
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
ExpandOutlined,
|
||||
CompressOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined,
|
||||
HeatMapOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const [editModal, { openModal: openEidtModal }] = useModal();
|
||||
|
||||
let map: mars3d.Map; // 地图对象
|
||||
|
||||
let mapIns: any = null;
|
||||
let markers: any = [];
|
||||
let AMapIns: any = null;
|
||||
|
||||
const vChartRef = ref<HTMLElement>();
|
||||
const props = defineProps(['nowPreviewRecord']);
|
||||
const emits = defineEmits(['getMap']);
|
||||
|
||||
const mapId = `modal-map-${uuidv4()}`;
|
||||
const networkType = ref('WAN');
|
||||
let map: Map;
|
||||
|
||||
const initMap = () => {
|
||||
let mapDataSources: any = {
|
||||
'raster-tiles': {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom: 1,
|
||||
maxzoom: 17,
|
||||
},
|
||||
'raster-tiles-font': {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
};
|
||||
let mapDataLayers: any = [
|
||||
{
|
||||
id: 'tdt-vec-tiles',
|
||||
type: 'raster',
|
||||
source: 'raster-tiles-font',
|
||||
},
|
||||
{
|
||||
id: 'tdt-img-tiles',
|
||||
type: 'raster',
|
||||
source: 'raster-tiles',
|
||||
},
|
||||
];
|
||||
|
||||
return new mapboxgl.Map({
|
||||
container: mapId,
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
style: {
|
||||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||
version: 8,
|
||||
sources: mapDataSources,
|
||||
layers: mapDataLayers,
|
||||
},
|
||||
maxZoom: 22,
|
||||
minZoom: 8,
|
||||
pitch: 0,
|
||||
zoom: 14,
|
||||
center: [117.984425, 35.270654],
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let options = {
|
||||
scene: {
|
||||
center: {
|
||||
lat: props.nowPreviewRecord.lat,
|
||||
lng: props.nowPreviewRecord.lng,
|
||||
alt: 8306.3,
|
||||
heading: 360,
|
||||
pitch: -45,
|
||||
},
|
||||
scene3DOnly: false,
|
||||
shadows: false,
|
||||
removeDblClick: true,
|
||||
sceneMode: 3,
|
||||
showSun: true,
|
||||
showMoon: true,
|
||||
showSkyBox: true,
|
||||
showSkyAtmosphere: true,
|
||||
fog: true,
|
||||
fxaa: true,
|
||||
requestRenderMode: true,
|
||||
contextOptions: {
|
||||
requestWebgl1: false,
|
||||
webgl: {
|
||||
preserveDrawingBuffer: true,
|
||||
alpha: false,
|
||||
stencil: true,
|
||||
powerPreference: 'high-performance',
|
||||
},
|
||||
},
|
||||
globe: {
|
||||
depthTestAgainstTerrain: false,
|
||||
baseColor: '#546a53',
|
||||
showGroundAtmosphere: true,
|
||||
enableLighting: false,
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 3,
|
||||
minimumZoomDistance: 1,
|
||||
maximumZoomDistance: 50000000,
|
||||
enableRotate: true,
|
||||
enableTranslate: true,
|
||||
enableTilt: true,
|
||||
enableZoom: true,
|
||||
enableCollisionDetection: true,
|
||||
minimumCollisionTerrainHeight: 15000,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
homeButton: false,
|
||||
baseLayerPicker: false,
|
||||
sceneModePicker: false,
|
||||
vrButton: false,
|
||||
fullscreenButton: false,
|
||||
navigationHelpButton: false,
|
||||
animation: false,
|
||||
timeline: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
selectionIndicator: false,
|
||||
showRenderLoopErrors: true,
|
||||
contextmenu: {
|
||||
hasDefault: true,
|
||||
},
|
||||
mouseDownView: true,
|
||||
zoom: {
|
||||
insertIndex: 1,
|
||||
},
|
||||
},
|
||||
method: {
|
||||
templateValues: {
|
||||
dataServer: '//data.mars3d.cn',
|
||||
gltfServerUrl: '//data.mars3d.cn/gltf',
|
||||
},
|
||||
},
|
||||
terrain: {
|
||||
url: '//data.mars3d.cn/terrain',
|
||||
show: true,
|
||||
clip: true,
|
||||
},
|
||||
basemaps: [
|
||||
{
|
||||
id: 10,
|
||||
name: '地图底图',
|
||||
type: 'group',
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-a57ecb7d-ba05-47a3-b1be-2e28411a5954',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 1,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-671f9d42-dda7-45ec-9d0f-4259c915b2cb',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 2,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
layers: [],
|
||||
};
|
||||
initMap(options);
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
// 获取网络环境后加载地图
|
||||
map = initMap();
|
||||
});
|
||||
|
||||
const isFirstLoad = ref(true);
|
||||
const initMap = (newData: any) => {
|
||||
// 第一次加载
|
||||
if (isFirstLoad.value) {
|
||||
map = new mars3d.Map(vChartRef.value, newData);
|
||||
} else {
|
||||
// 之后更新
|
||||
map.setSceneOptions(newData.scene);
|
||||
}
|
||||
isFirstLoad.value = false;
|
||||
};
|
||||
function flyToPoint(data) {
|
||||
map.flyToPoint(data, {
|
||||
radius: 5000, // 距离目标点的距离
|
||||
duration: 4,
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
flyToPoint,
|
||||
onUnmounted(() => {
|
||||
map && map.remove();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@
|
|||
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||
const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
|
||||
|
||||
console.log(props.nowPreviewRecord);
|
||||
|
||||
// 选择
|
||||
function chooseNowPreviewRecord(value) {
|
||||
emit('chooseNowPreviewRecord', value);
|
||||
|
|
@ -75,7 +77,7 @@
|
|||
<style lang="less">
|
||||
.modal {
|
||||
width: 100%;
|
||||
height: 920px;
|
||||
height: 1020px;
|
||||
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
|
|
@ -107,7 +109,7 @@
|
|||
}
|
||||
.mainBody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1020px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -115,7 +117,7 @@
|
|||
|
||||
.imgOrVideo {
|
||||
width: 80%;
|
||||
height: 920px;
|
||||
height: 1020px;
|
||||
background: #101010;
|
||||
|
||||
.image {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="image">
|
||||
<div class="canvas">
|
||||
<div class="canvas" @mouseleave="document.body.style.cursor = 'auto'">
|
||||
<div
|
||||
ref="mouseCanvasRef"
|
||||
@mousedown="onMouseDown"
|
||||
|
|
@ -757,7 +757,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 820px;
|
||||
height: 920px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@
|
|||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
height: 300px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,5 +41,6 @@
|
|||
import { MonitorQX } from './preview';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord']);
|
||||
console.log(props.nowPreviewRecord);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,428 @@
|
|||
<template>
|
||||
<div class="model2D">
|
||||
<div :id="mapId" class="map">
|
||||
<!-- 全屏 -->
|
||||
<div class="expandButton" @click="clickExpandButton">
|
||||
<ExpandOutlined v-if="!fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
|
||||
<CompressOutlined v-if="fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
|
||||
</div>
|
||||
<div class="angleViewButton">
|
||||
<div class="button_child" @click="lookTopView">
|
||||
<span style="color: #3c3c3c; font-size: 16px">顶视</span>
|
||||
</div>
|
||||
<div class="button_child" @click="lookDownView">
|
||||
<span style="color: #3c3c3c; font-size: 16px">俯视</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plusAndMinusButton">
|
||||
<div class="button_child" @click="clickPlusButton">
|
||||
<PlusOutlined style="color: #3c3c3c; font-size: 25px" />
|
||||
</div>
|
||||
<div class="button_child" @click="clickMinusButton">
|
||||
<MinusOutlined style="color: #3c3c3c; font-size: 25px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="left">键盘</div>
|
||||
<div class="right4">123</div>
|
||||
<div class="right3"> ASL: {{ asl }}m</div>
|
||||
<div class="right2"> HAE: {{ hae }}m</div>
|
||||
<div class="right1">
|
||||
<HeatMapOutlined style="margin-right: 15px; font-size: 20px" />
|
||||
WGS 84
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref, onMounted, onUnmounted, defineEmits, computed } from 'vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import mapboxgl, { Map } from 'mapbox-gl';
|
||||
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
ExpandOutlined,
|
||||
CompressOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined,
|
||||
HeatMapOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord']);
|
||||
const emits = defineEmits(['getMap']);
|
||||
|
||||
const mapId = `modal-map-${uuidv4()}`;
|
||||
const networkType = ref('WAN');
|
||||
let map: Map;
|
||||
|
||||
const initMap = () => {
|
||||
// let mapDataSources: any = {
|
||||
// 'raster-tiles': {
|
||||
// type: 'raster',
|
||||
// tiles: [
|
||||
// `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
// ],
|
||||
// tileSize: 256,
|
||||
// minzoom: 1,
|
||||
// maxzoom: 17,
|
||||
// },
|
||||
// 'raster-tiles-font': {
|
||||
// type: 'raster',
|
||||
// tiles: [
|
||||
// `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
// ],
|
||||
// tileSize: 256,
|
||||
// },
|
||||
// };
|
||||
// let mapDataLayers: any = [
|
||||
// {
|
||||
// id: 'tdt-vec-tiles',
|
||||
// type: 'raster',
|
||||
// source: 'raster-tiles-font',
|
||||
// },
|
||||
// {
|
||||
// id: 'tdt-img-tiles',
|
||||
// type: 'raster',
|
||||
// source: 'raster-tiles',
|
||||
// },
|
||||
// ];
|
||||
|
||||
return new mapboxgl.Map({
|
||||
container: mapId,
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
// style: {
|
||||
// glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||
// version: 8,
|
||||
// sources: mapDataSources,
|
||||
// layers: mapDataLayers,
|
||||
// },
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {},
|
||||
layers: [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: {
|
||||
'background-color': '#000', // 黑色背景
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
maxZoom: 22,
|
||||
minZoom: 8,
|
||||
pitch: 0,
|
||||
zoom: 18,
|
||||
center: props.nowPreviewRecord.boundary
|
||||
? [
|
||||
(props.nowPreviewRecord.boundary.start_lng + props.nowPreviewRecord.boundary.end_lng) /
|
||||
2,
|
||||
(props.nowPreviewRecord.boundary.start_lat + props.nowPreviewRecord.boundary.end_lat) /
|
||||
2,
|
||||
]
|
||||
: [117.984425, 35.270654],
|
||||
});
|
||||
};
|
||||
|
||||
// 示例函数：生成网格线的 GeoJSON 数据
|
||||
function createGridFeatures() {
|
||||
const features: any = [];
|
||||
const gridSize = 10; // 每隔 10 度画一条线
|
||||
for (let lat = -90; lat <= 90; lat += gridSize) {
|
||||
features.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[-180, lat],
|
||||
[180, lat],
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
for (let lng = -180; lng <= 180; lng += gridSize) {
|
||||
features.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[lng, -90],
|
||||
[lng, 90],
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
return { type: 'FeatureCollection', features: features };
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
// 获取网络环境后加载地图
|
||||
// loadMapInfo();
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
setImage(props.nowPreviewRecord.boundary);
|
||||
move();
|
||||
emits('getMap', map);
|
||||
});
|
||||
});
|
||||
|
||||
function setImage(boundary) {
|
||||
let fourpoint: any = [
|
||||
[parseFloat(boundary.start_lng), parseFloat(boundary.end_lat)],
|
||||
[parseFloat(boundary.end_lng), parseFloat(boundary.end_lat)],
|
||||
[parseFloat(boundary.end_lng), parseFloat(boundary.start_lat)],
|
||||
[parseFloat(boundary.start_lng), parseFloat(boundary.start_lat)],
|
||||
];
|
||||
// 图片预加载
|
||||
let image = new Image();
|
||||
image.crossOrigin = 'anonymous';
|
||||
image.src = props.nowPreviewRecord.url;
|
||||
image.onload = () => {
|
||||
// 创建Canvas元素
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
// 获取Canvas绘图上下文
|
||||
const ctx = canvas.getContext('2d');
|
||||
// 在Canvas上绘制图片
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height);
|
||||
// 将Canvas内容转换为图片的数据URL
|
||||
const dataURL = canvas.toDataURL('image/png');
|
||||
// 移除旧的图层和源
|
||||
if (map) {
|
||||
if (map.getLayer('radar-layer')) {
|
||||
map.removeLayer('radar-layer');
|
||||
}
|
||||
if (map.getSource('radar')) {
|
||||
map.removeSource('radar');
|
||||
}
|
||||
}
|
||||
// 添加新的源和图层
|
||||
map.addSource('radar', {
|
||||
type: 'image',
|
||||
url: dataURL,
|
||||
coordinates: fourpoint,
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'radar-layer',
|
||||
type: 'raster',
|
||||
source: 'radar',
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// 全屏
|
||||
const fullscreenFlag = ref(false);
|
||||
function clickExpandButton() {
|
||||
const mapContainer = document.getElementById(mapId);
|
||||
if (mapContainer) {
|
||||
if (!document.fullscreenElement) {
|
||||
mapContainer.requestFullscreen();
|
||||
fullscreenFlag.value = true;
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
fullscreenFlag.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 顶视角
|
||||
function lookTopView() {
|
||||
map.setPitch(0);
|
||||
map.setBearing(0);
|
||||
map.setZoom(18);
|
||||
map.setCenter([
|
||||
(parseFloat(props.nowPreviewRecord.boundary.start_lng) +
|
||||
parseFloat(props.nowPreviewRecord.boundary.end_lng)) /
|
||||
2,
|
||||
(parseFloat(props.nowPreviewRecord.boundary.start_lat) +
|
||||
parseFloat(props.nowPreviewRecord.boundary.end_lat)) /
|
||||
2,
|
||||
]);
|
||||
}
|
||||
// 俯视角
|
||||
function lookDownView() {
|
||||
map.setPitch(60);
|
||||
map.setBearing(0);
|
||||
map.setZoom(18);
|
||||
map.setCenter([
|
||||
(parseFloat(props.nowPreviewRecord.boundary.start_lng) +
|
||||
parseFloat(props.nowPreviewRecord.boundary.end_lng)) /
|
||||
2,
|
||||
(parseFloat(props.nowPreviewRecord.boundary.start_lat) +
|
||||
parseFloat(props.nowPreviewRecord.boundary.end_lat)) /
|
||||
2,
|
||||
]);
|
||||
}
|
||||
// 放大
|
||||
function clickPlusButton() {
|
||||
map.setZoom(map.getZoom() + 0.2);
|
||||
}
|
||||
// 缩小
|
||||
function clickMinusButton() {
|
||||
map.setZoom(map.getZoom() - 0.2);
|
||||
}
|
||||
|
||||
const asl = ref(0);
|
||||
const hae = ref(0);
|
||||
|
||||
function move() {
|
||||
map.on('mousemove', (e) => {
|
||||
const lngLat = e.lngLat;
|
||||
asl.value = map.queryTerrainElevation(lngLat, { exaggerated: false }) || 0;
|
||||
const geoidSeparation = 3.5;
|
||||
hae.value = asl.value ? asl.value + geoidSeparation : 0;
|
||||
});
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
map && map.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model2D {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// 全屏
|
||||
.expandButton {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 29%;
|
||||
z-index: 500;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
// 视角
|
||||
.angleViewButton {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 18%;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
// 放大、缩小
|
||||
.plusAndMinusButton {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 7%;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right4 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 360px;
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right3 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 240px;
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 120px;
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button_child {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<div id="mapContainer" class="map_container"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import * as Cesium from 'cesium';
|
||||
|
||||
// 设置资源路径
|
||||
window.CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium/';
|
||||
const props = defineProps(['nowPreviewRecord']);
|
||||
|
||||
// 保存原始模型矩阵
|
||||
let originalModelMatrix: any = null;
|
||||
// 声明Cesium Viewer实例
|
||||
let viewer,
|
||||
tileset: Cesium.Viewer | null = null;
|
||||
|
||||
const initMap = async () => {
|
||||
const container = document.getElementById('mapContainer');
|
||||
if (!container) {
|
||||
console.error('地图容器未找到');
|
||||
return;
|
||||
}
|
||||
viewer = new Cesium.Viewer(container, {
|
||||
// 基础配置
|
||||
animation: false, // 动画小部件
|
||||
baseLayerPicker: false, // 底图选择器
|
||||
fullscreenButton: false, // 全屏按钮
|
||||
vrButton: false, // VR按钮
|
||||
geocoder: false, // 地理编码搜索框
|
||||
homeButton: false, // 主页按钮
|
||||
infoBox: false, // 信息框 - 禁用点击弹窗
|
||||
sceneModePicker: false, // 场景模式选择器
|
||||
selectionIndicator: false, // 选择指示器
|
||||
timeline: false, // 时间轴
|
||||
navigationHelpButton: false, // 导航帮助按钮
|
||||
navigationInstructionsInitiallyVisible: false, // 导航说明初始可见性
|
||||
scene3DOnly: false, // 仅3D场景
|
||||
});
|
||||
// 隐藏logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
viewer.scene.globe.enableLighting = true;
|
||||
// 取消天空盒显示
|
||||
// viewer.scene.skyBox.show = false;
|
||||
// 禁用大气层和太阳
|
||||
viewer.scene.skyAtmosphere.show = false;
|
||||
// viewer.scene.sun.show = false;
|
||||
// viewer.scene.moon.show = false;
|
||||
// 设置背景为黑色
|
||||
// viewer.scene.backgroundColor = Cesium.Color.BLACK;
|
||||
//前提先把场景上的图层全部移除或者隐藏
|
||||
// viewer.scene.globe.baseColor = Cesium.Color.BLACK; //修改地图蓝色背景
|
||||
viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.1, 0.2, 1.0); //修改地图为暗蓝色背景
|
||||
// 设置抗锯齿
|
||||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||||
// 清除默认底图
|
||||
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
|
||||
// 设置默认视图位置 - 默认显示全球视图
|
||||
viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 1000.0), // 中国中部上空
|
||||
orientation: {
|
||||
heading: 0.0,
|
||||
pitch: -Cesium.Math.PI_OVER_TWO,
|
||||
roll: 0.0,
|
||||
},
|
||||
});
|
||||
// 启用地形深度测试，确保地形正确渲染
|
||||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||||
// // 清除默认地形
|
||||
const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(3956);
|
||||
viewer.terrainProvider = terrainProvider;
|
||||
// 开启帧率
|
||||
viewer.scene.debugShowFramesPerSecond = false;
|
||||
// 添加经纬网格图层
|
||||
viewer.imageryLayers.addImageryProvider(
|
||||
new Cesium.GridImageryProvider({
|
||||
color: Cesium.Color.WHITE,
|
||||
tileWidth: 1024,
|
||||
tileHeight: 1024,
|
||||
}),
|
||||
);
|
||||
|
||||
try {
|
||||
const token: any =
|
||||
'MTc0NzAzNTY0MXxqTllDaTdBbWZ3V2xfeDVpdG9zeXBkMHhTdzFwTW52NVRVN1d0SlUzc0NtNEtoWjhvWHZoemZHMTdMSjNzV21oR2N2eG1DWTB0cWRNT0pHalVwZU44dDR2THQ0ZUoxNmdUNTYzanJHY0xDc1pHU21VaTRHaVRqSmRfTXRNWWpoUFZhSWlmM1ZxSF9mbmxpS0hnX01oM1AwNURXSW42bEF4ejhJakJHY0JrMVU3SW9DeUJjdjVPRjFSM2RXVWJxUGhxSG1zdmdzNGJkRUlqazg5RHR2ZU1ReUJoR2s1QUlza1ZsOHU3X09uZ0JXZ0JlRllGcGhYTm5GYVJHQ2xsSHFkUlNtT0ZIS0o5WVhUNXd4a2lRU2l3bEFBZy1lN2xQV1B6NDREVEw4VXUzbGhyTURZemhwdzBTWkx4VE4teUticnZ3Z1I2NDNTa2RPOXdJN2otTkl1d3Z6NW1WZUhBV2EtTEtkVTlNNUgwZlo2VWhmVHhpTTM5ZHhuSUpVcVdrZ25EbFJwX3hObVJDdXNjZV9YblZTMlIzQmJqVGVxeXBLTTZ0VjNiLUxSZTZlTDJwRGY3c2tzWkhDNnFYbjY4alF6ZWhWTGl2NVcxQ2puMmdZZnNLaWRpeEFFM1Bwc29fSHpnSG1JZlZJN1lpNHpySUkxQzJzQlpJblBxZUl1SWo1QnNYdFQzZz09fF0gZYXPxsQ97VL9k-DRWUeNh3Prfq8ceE2jnmaNJjuq';
|
||||
const resource = new Cesium.Resource({
|
||||
url: '/public/Project1 2/B3DM/Model_0/tileset.json',
|
||||
// url: 'https://file-storage.djicdn.com/model/19ba187f-7675-49de-b576-b00ffffba78d/dafdb629-18bf-4eb5-b33f-55fa27f1483d/dd091ab4-d8c9-4e14-9c05-bce61e8a0338/%E5%A4%A7%E7%96%86%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E_%E4%B8%89%E7%BB%B4%E6%A8%A1%E5%9E%8B%20%281%29/Project1%202/B3DM/ktx2_b3dms/BlockA/tileset-with-auth-key.json?auth_key=1746638980-0-0-4a3cf9893bb2e579e00633c51677db98&response-content-disposition=attachment&filename=%22tileset.json%22&filename*=utf-8%27%27tileset.json',
|
||||
// headers: {
|
||||
// 'x-auth-token': token,
|
||||
// },
|
||||
});
|
||||
const tileset = await Cesium.Cesium3DTileset.fromUrl(resource);
|
||||
console.log(tileset);
|
||||
// 设置3DTiles的样式，确保每个要素都有一个唯一的ID
|
||||
tileset.style = new Cesium.Cesium3DTileStyle({
|
||||
// 使用默认样式，但确保每个要素都可以被单独选择
|
||||
color: "color('white')",
|
||||
});
|
||||
// 保存原始模型矩阵，用于重置
|
||||
originalModelMatrix = Cesium.Matrix4.clone(tileset.modelMatrix);
|
||||
// 设置模型贴地
|
||||
// 启用贴地属性
|
||||
tileset.clampToGround = true;
|
||||
viewer.scene.primitives.add(tileset);
|
||||
viewer.zoomTo(tileset);
|
||||
} catch (error) {
|
||||
console.error('加载3D Tiles数据集失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .cesium-widget-credits {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<div class="modelDiv">
|
||||
<div class="title">
|
||||
<div class="title-1">{{ props.nowPreviewRecord.name }}</div>
|
||||
<div class="title-2">
|
||||
{{ props.nowPreviewRecord.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="closeButton">
|
||||
<CloseOutlined @click="closeModal" style="font-size: 25px; color: white" />
|
||||
</div>
|
||||
|
||||
<div class="modelDiv_2D3D">
|
||||
<Model2D
|
||||
v-if="props.nowPreviewRecord.type.includes('2D')"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
/>
|
||||
<Model3D
|
||||
v-if="props.nowPreviewRecord.type.includes('3D')"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
/>
|
||||
</div>
|
||||
<div class="modelDiv_bottom">
|
||||
<div class="buttonList">
|
||||
<!-- 下载 -->
|
||||
<div class="button">
|
||||
<DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
|
||||
</div>
|
||||
<!-- 删除 -->
|
||||
<div class="button"> <DeleteOutlined @click="deleteCanvas" /> </div>
|
||||
</div>
|
||||
<div class="imageList">
|
||||
<div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
|
||||
<div
|
||||
v-if="li.type.includes('model')"
|
||||
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
|
||||
>
|
||||
<FileOutlined style="font-size: 60px; color: white" />
|
||||
<div
|
||||
v-if="li.type.includes('2D')"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 35px;
|
||||
font-size: 25px;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
2D
|
||||
</div>
|
||||
<div
|
||||
v-if="li.type.includes('3D')"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 35px;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
3D
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上一张、下一张图片 -->
|
||||
<div class="leftButton" @click="clickLeftOrRightButton('left')">
|
||||
<LeftOutlined style="color: #ffffff; font-size: 30px" />
|
||||
</div>
|
||||
<div class="rightButton" @click="clickLeftOrRightButton('right')">
|
||||
<RightOutlined style="color: #ffffff; font-size: 30px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue';
|
||||
import {
|
||||
CloseOutlined,
|
||||
RightOutlined,
|
||||
LeftOutlined,
|
||||
DownloadOutlined,
|
||||
DeleteOutlined,
|
||||
FileOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import Model2D from './model2D.vue';
|
||||
import Model3D from './model3D.vue';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||
const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
|
||||
|
||||
// 上一张、下一张图片
|
||||
function clickLeftOrRightButton(direction) {
|
||||
const list = props.previewRecordList.filter((item) => item.type.includes('model'));
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
if (list[index].id == props.nowPreviewRecord.id) {
|
||||
if (direction == 'left') {
|
||||
if (index == 0) {
|
||||
chooseNowPreviewRecord(list[list.length - 1]);
|
||||
} else {
|
||||
chooseNowPreviewRecord(list[index - 1]);
|
||||
}
|
||||
}
|
||||
if (direction == 'right') {
|
||||
if (index == list.length - 1) {
|
||||
chooseNowPreviewRecord(list[0]);
|
||||
} else {
|
||||
chooseNowPreviewRecord(list[index + 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择
|
||||
function chooseNowPreviewRecord(value) {
|
||||
emit('chooseNowPreviewRecord', value);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
emit('closeModal');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modelDiv {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1020px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
z-index: 100;
|
||||
|
||||
.title-1 {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.title-2 {
|
||||
font-size: 16px;
|
||||
color: #f0f3f3;
|
||||
}
|
||||
}
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.modelDiv_2D3D {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 890px;
|
||||
background: #000000;
|
||||
}
|
||||
.modelDiv_bottom {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
background: #1c1c1c;
|
||||
display: block;
|
||||
|
||||
.buttonList {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageList {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
.bottom_div {
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
.bottom_div_choose {
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
outline: 3px solid #1088f2;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
background: #282828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上一张、下一张
|
||||
.leftButton {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40%;
|
||||
z-index: 200;
|
||||
background: #9c9c9c;
|
||||
border-radius: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rightButton {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 40%;
|
||||
z-index: 200;
|
||||
background: #9c9c9c;
|
||||
border-radius: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// export { default as PreviewImage } from './previewImage.vue';
|
||||
// export { default as PreviewCanvas } from './previewCanvas.vue';
|
||||
// export { default as PreviewVideo } from './previewVideo.vue';
|
||||
// export { default as PreviewInformation } from './previewInformation.vue';
|
||||
// export { default as MonitorHK } from './video/monitorHK.vue';
|
||||
// export { default as MonitorLC } from './video/monitorLC.vue';
|
||||
// export { default as MonitorQX } from './video/monitorQX.vue';
|
||||
// export { default as MonitorTX } from './video/monitorTX.vue';
|
||||
// export { default as PanoViewer } from './PanoViewer.vue';
|
||||
// export { default as Map } from './Map.vue';
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div> </div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
<style lang="less"></style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary">导出飞行器信息</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:edit-outlined',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
color: 'error',
|
||||
icon: 'ant-design:delete-outlined',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h, } from "vue"
|
||||
import { EditOutlined } from '@ant-design/icons-vue'
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, dataSource, searchFormSchema } from './utils'
|
||||
const [registerTable, { reload, expandAll, getForm}] = useTable({
|
||||
title: '飞行器',
|
||||
// api: (params) => LoadCaseInfoLists(type,params),
|
||||
dataSource,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch(data) {
|
||||
let params = {...data}
|
||||
if(!params.nowStatus){
|
||||
params.nowStatus = '复提待审核'
|
||||
}
|
||||
return params
|
||||
},
|
||||
afterFetch(data) {
|
||||
console.log('afterFetch', data);
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
export const columns = [
|
||||
{
|
||||
title: '设备型号',
|
||||
dataIndex: 'model',
|
||||
},
|
||||
{
|
||||
title: '设备SN',
|
||||
dataIndex: 'sn',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '固件版本',
|
||||
dataIndex: 'version',
|
||||
},
|
||||
{
|
||||
title: '在线状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '所属项目',
|
||||
dataIndex: 'project',
|
||||
},
|
||||
{
|
||||
title: '加入组织时间',
|
||||
dataIndex: 'join_time',
|
||||
},
|
||||
{
|
||||
title: '在线时间',
|
||||
dataIndex: 'online_time',
|
||||
},
|
||||
];
|
||||
export const dataSource = [
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
]
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'project',
|
||||
label: '项目',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '在线', value: '在线' },
|
||||
{ label: '离线', value: '离线' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'model',
|
||||
label: '设备型号',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'sn',
|
||||
label: '设备SN',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="device-bind-content">
|
||||
<p class="item-value">
|
||||
请通过手机大疆行业 APP 或遥控器 DJI Pilot 2 的机场部署流程-云服务配置，以组织ID和设备绑定码来绑定机场
|
||||
</p>
|
||||
<div class="show-item">
|
||||
<div class="item-label">组织名称</div>
|
||||
<div class="item-value">TEST</div>
|
||||
</div>
|
||||
<div class="show-item">
|
||||
<div class="item-label">组织 ID</div>
|
||||
<div class="item-value">XDX9VU</div>
|
||||
</div>
|
||||
<div class="show-item">
|
||||
<div class="item-label">设备绑定码</div>
|
||||
<div class="item-value">6473D312</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {} from "vue"
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-bind-content{
|
||||
padding: 20px;
|
||||
.item-value{
|
||||
opacity: 0.7;
|
||||
}
|
||||
.show-item{
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
.item-label{
|
||||
width: 150px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:file-search-outlined',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'carbon:calendar-tools',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {} from "vue"
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, dataSource, searchFormSchema } from './utils'
|
||||
const [registerTable, { reload, expandAll, getForm}] = useTable({
|
||||
title: '设备定损',
|
||||
// api: (params) => LoadCaseInfoLists(type,params),
|
||||
dataSource,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 100,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch(data) {
|
||||
let params = {...data}
|
||||
if(!params.nowStatus){
|
||||
params.nowStatus = '复提待审核'
|
||||
}
|
||||
return params
|
||||
},
|
||||
afterFetch(data) {
|
||||
console.log('afterFetch', data);
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
export const columns = [
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'operate_time',
|
||||
},
|
||||
{
|
||||
title: '定损类型',
|
||||
dataIndex: 'problem_type',
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'user',
|
||||
},
|
||||
{
|
||||
title: '设备型号',
|
||||
dataIndex: 'model',
|
||||
},
|
||||
{
|
||||
title: '设备SN',
|
||||
dataIndex: 'sn',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
];
|
||||
export const dataSource = [
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
{ operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
|
||||
]
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'time',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
label: '定损类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '整机定损', value: '整机定损' },
|
||||
{ label: '空调制冷模块定损', value: '空调制冷模块定损' },
|
||||
{ label: '空调制热模块定损', value: '空调制热模块定损' },
|
||||
{ label: '快速定损', value: '快速定损' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'user',
|
||||
label: '操作员',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '待上传', value: '待上传' },
|
||||
{ label: '数据处理', value: '数据处理' },
|
||||
{ label: '上传中', value: '上传中' },
|
||||
{ label: '上传完成', value: '上传完成' },
|
||||
{ label: '上传失败', value: '上传失败' },
|
||||
{ label: '已暂停', value: '已暂停' },
|
||||
{ label: '已取消', value: '已取消' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'sn',
|
||||
label: '设备SN',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:file-search-outlined',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'carbon:calendar-tools',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {} from "vue"
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, dataSource, searchFormSchema } from './utils'
|
||||
const [registerTable, { reload, expandAll, getForm}] = useTable({
|
||||
title: '日志反馈',
|
||||
// api: (params) => LoadCaseInfoLists(type,params),
|
||||
dataSource,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 100,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch(data) {
|
||||
let params = {...data}
|
||||
if(!params.nowStatus){
|
||||
params.nowStatus = '复提待审核'
|
||||
}
|
||||
return params
|
||||
},
|
||||
afterFetch(data) {
|
||||
console.log('afterFetch', data);
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
export const columns = [
|
||||
{
|
||||
title: '反馈时间',
|
||||
dataIndex: 'feedback_time',
|
||||
},
|
||||
{
|
||||
title: '反馈人',
|
||||
dataIndex: 'feedback_user',
|
||||
},
|
||||
{
|
||||
title: '设备型号',
|
||||
dataIndex: 'model',
|
||||
},
|
||||
{
|
||||
title: '设备SN',
|
||||
dataIndex: 'sn',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '设备异常描述',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
{
|
||||
title: '上传状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
];
|
||||
export const dataSource = [
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
{ feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
|
||||
]
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'time',
|
||||
component: 'RangePicker',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '固件待升级', value: '固件待升级' },
|
||||
// { label: '固件一致性升级', value: '固件一致性升级' },
|
||||
// { label: '飞行安全数据库待升级', value: '飞行安全数据库待升级' },
|
||||
// ],
|
||||
// },
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'feedback_user',
|
||||
label: '反馈人',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '待上传', value: '待上传' },
|
||||
{ label: '数据处理', value: '数据处理' },
|
||||
{ label: '上传中', value: '上传中' },
|
||||
{ label: '上传完成', value: '上传完成' },
|
||||
{ label: '上传失败', value: '上传失败' },
|
||||
{ label: '已暂停', value: '已暂停' },
|
||||
{ label: '已取消', value: '已取消' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'sn',
|
||||
label: '设备SN',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey" class="device-tabs">
|
||||
<a-tab-pane key="log" tab="日志反馈">
|
||||
<LogFeedback />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="equipment" tab="设备定损">
|
||||
<Equipment />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import LogFeedback from './LogFeedback/index.vue'
|
||||
import Equipment from './Equipment/index.vue'
|
||||
|
||||
const activeKey = ref('log')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="openFeedbackDrawer">设备定损与反馈</a-button>
|
||||
<a-button type="primary" @click="openDeviceBindingModal">设备绑定码</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:file-search-outlined',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'carbon:calendar-tools',
|
||||
onClick: () => {
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="80%" :closable="false">
|
||||
<FeedbackDrawer />
|
||||
</a-drawer>
|
||||
<a-modal v-model:open="deviceBindingModal" title="设备绑定码" @ok="handleOk">
|
||||
<DeviceBindModal />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, dataSource, searchFormSchema } from './utils'
|
||||
import FeedbackDrawer from './FeedbackDrawer/index.vue'
|
||||
import DeviceBindModal from './DeviceBindModal/index.vue'
|
||||
|
||||
const feedbackDrawer = ref(false)
|
||||
const deviceBindingModal = ref(false)
|
||||
const [registerTable, { reload, expandAll, getForm}] = useTable({
|
||||
title: '机场',
|
||||
// api: (params) => LoadCaseInfoLists(type,params),
|
||||
dataSource,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 100,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch(data) {
|
||||
let params = {...data}
|
||||
if(!params.nowStatus){
|
||||
params.nowStatus = '复提待审核'
|
||||
}
|
||||
return params
|
||||
},
|
||||
afterFetch(data) {
|
||||
console.log('afterFetch', data);
|
||||
},
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
const openFeedbackDrawer = () => {
|
||||
feedbackDrawer.value = true
|
||||
}
|
||||
const openDeviceBindingModal = () => {
|
||||
deviceBindingModal.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .feedback-drawer{
|
||||
// :deep(.ant-drawer-body){
|
||||
// padding: 0px;
|
||||
// }
|
||||
// }
|
||||
// </style>
|
||||
// <style lang="scss">
|
||||
// .feedback-drawer{
|
||||
// .ant-drawer-body{
|
||||
// padding: 0px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
export const columns = [
|
||||
{
|
||||
title: '设备型号',
|
||||
dataIndex: 'model',
|
||||
},
|
||||
{
|
||||
title: '设备SN',
|
||||
dataIndex: 'sn',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '固件版本',
|
||||
dataIndex: 'version',
|
||||
},
|
||||
{
|
||||
title: '固件升级',
|
||||
dataIndex: 'upgrade',
|
||||
},
|
||||
{
|
||||
title: '飞行安全数据库',
|
||||
dataIndex: 'database',
|
||||
},
|
||||
{
|
||||
title: '工作状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '所属项目',
|
||||
dataIndex: 'project',
|
||||
},
|
||||
{
|
||||
title: '加入组织时间',
|
||||
dataIndex: 'join_time',
|
||||
},
|
||||
{
|
||||
title: '在线时间',
|
||||
dataIndex: 'online_time',
|
||||
},
|
||||
];
|
||||
export const dataSource = [
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
{ model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
|
||||
]
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'upgrade_status',
|
||||
label: '升级状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '固件待升级', value: '固件待升级' },
|
||||
{ label: '固件一致性升级', value: '固件一致性升级' },
|
||||
{ label: '飞行安全数据库待升级', value: '飞行安全数据库待升级' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'work_status',
|
||||
label: '工作状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '全部工作状态', value: '全部工作状态' },
|
||||
{ label: '设备空闲中', value: '设备空闲中' },
|
||||
{ label: '现场调试中', value: '现场调试中' },
|
||||
{ label: '远程调试中', value: '远程调试中' },
|
||||
{ label: '设备作业中', value: '设备作业中' },
|
||||
{ label: '设备升级中', value: '设备升级中' },
|
||||
{ label: '设备已离线', value: '设备已离线' },
|
||||
{ label: '未标定', value: '未标定' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'project',
|
||||
label: '项目',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'model',
|
||||
label: '设备型号',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'sn',
|
||||
label: '设备SN',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="device-page">
|
||||
<a-tabs v-model:activeKey="activeKey" class="device-tabs">
|
||||
<a-tab-pane key="airport" tab="机场">
|
||||
<Airport />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="aerocraft" tab="飞行器">
|
||||
<Aerocraft />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import Airport from './Airport/index.vue'
|
||||
import Aerocraft from './Aerocraft/index.vue'
|
||||
const activeKey = ref('airport')
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-page{
|
||||
.device-tabs{
|
||||
:deep(.ant-tabs-nav-wrap){
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue