媒体库-第一版
parent
4583fe0c4e
commit
e1c29bd6f7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||||
|
<BasicTree
|
||||||
|
ref="asyncExpandTreeRef"
|
||||||
|
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
||||||
|
:clickRowToExpand="false"
|
||||||
|
:treeData="treeData"
|
||||||
|
:fieldNames="{ key: 'id', title: 'name' }"
|
||||||
|
@select="handleSelect"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, nextTick, unref } from 'vue';
|
||||||
|
import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
|
||||||
|
import { getChildrenTree } from '@/api/demo/system';
|
||||||
|
import { isArray } from '@/utils/is';
|
||||||
|
|
||||||
|
const emit = defineEmits(['select']);
|
||||||
|
|
||||||
|
const treeData = ref([]);
|
||||||
|
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||||
|
|
||||||
|
async function fetch() {
|
||||||
|
// treeData.value = (await getChildrenTree({ parentId: 0 })) as unknown as TreeItem[];
|
||||||
|
// console.log(treeData.value);
|
||||||
|
treeData.value = [
|
||||||
|
{
|
||||||
|
id: 'meitiku',
|
||||||
|
name: '媒体库',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'allResource',
|
||||||
|
name: '全部资源',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'wideAngle',
|
||||||
|
name: '广角照片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'zoom',
|
||||||
|
name: '变焦照片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'infrared',
|
||||||
|
name: '红外照片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'video',
|
||||||
|
name: '视频资源',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'achievementModel',
|
||||||
|
name: '成果模型',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '2d',
|
||||||
|
name: '二维正摄',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3d',
|
||||||
|
name: '三维模型',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'gas',
|
||||||
|
name: '气体探测',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'vr',
|
||||||
|
name: 'VR全景',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 显示到一级
|
||||||
|
nextTick(() => {
|
||||||
|
unref(asyncExpandTreeRef)?.filterByLevel(1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelect(keys) {
|
||||||
|
emit('select', keys[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetch();
|
||||||
|
});
|
||||||
|
defineExpose({
|
||||||
|
fetch,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1,483 @@
|
|||||||
|
<template>
|
||||||
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||||
|
<LeftTree ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
|
||||||
|
<BasicTable class="w-4/5 xl:w-5/6" @register="registerTable" :searchInfo="searchInfo">
|
||||||
|
<template #toolbar>
|
||||||
|
<!-- <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn> -->
|
||||||
|
<a-button :icon="h(PlusOutlined)" type="primary" @click="addFolder">新建文件夹</a-button>
|
||||||
|
<a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
|
||||||
|
<a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
|
||||||
|
<a-button :icon="h(DownloadOutlined)" @click="compressFolderOrFile">压缩</a-button>
|
||||||
|
<a-radio-group v-model:value="tableType">
|
||||||
|
<a-radio-button value="table"><BarsOutlined /></a-radio-button>
|
||||||
|
<a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'name'">
|
||||||
|
<FolderOpenOutlined v-if="record.type == 'folder'" style="font-size: 20px" />
|
||||||
|
<img v-if="record.type == 'img'" :src="record.url" :width="30" :height="20" />
|
||||||
|
{{ record.name }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'size'">
|
||||||
|
{{ record.size ? record.size : '-' }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'label'">
|
||||||
|
<div v-if="record.label && record.label.length > 0">
|
||||||
|
<a-tag color="success" v-for="la in record.label" :key="la">{{ la }}</a-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-button type="text">
|
||||||
|
<EditOutlined @click="renameRecord(record)" />
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" v-if="record.type != 'folder'">
|
||||||
|
<EyeOutlined @click="lookRecord(record)" />
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
<!-- 新建文件夹 -->
|
||||||
|
<AddFolderModal @register="addFolderModal" @success="handleSuccess" />
|
||||||
|
<!-- 移动 -->
|
||||||
|
<MoveFileModal @register="moveFileModal" @success="handleSuccess" />
|
||||||
|
<!-- 压缩 -->
|
||||||
|
<CompressFileModal @register="compressFileModal" @success="handleSuccess" />
|
||||||
|
<!-- 重命名 -->
|
||||||
|
<RenameModal @register="renameModal" @success="handleSuccess" />
|
||||||
|
<!-- 预览弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:open="open"
|
||||||
|
width="100%"
|
||||||
|
wrap-class-name="full-modal"
|
||||||
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
:footer="null"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
:mask="false"
|
||||||
|
:maskClosable="false"
|
||||||
|
@ok="handleOk"
|
||||||
|
>
|
||||||
|
<Preview
|
||||||
|
:nowPreviewRecord="nowPreviewRecord"
|
||||||
|
:previewRecordList="previewRecordList"
|
||||||
|
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
||||||
|
@closeModal="closeModal"
|
||||||
|
@reloadTable="reload"
|
||||||
|
/>
|
||||||
|
</a-modal>
|
||||||
|
</PageWrapper>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref, h } from 'vue';
|
||||||
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||||
|
import { getOrgList, deleteDept } from '@/api/demo/system';
|
||||||
|
import { PageWrapper } from '@/components/Page';
|
||||||
|
import { useModal } from '@/components/Modal';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
import {
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
ColumnHeightOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
AppstoreOutlined,
|
||||||
|
BarsOutlined,
|
||||||
|
FolderOutlined,
|
||||||
|
FolderOpenOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import LeftTree from './LeftTree.vue';
|
||||||
|
import { AddFolderModal } from './modal/modal';
|
||||||
|
import { MoveFileModal } from './modal/modal';
|
||||||
|
import { CompressFileModal } from './modal/modal';
|
||||||
|
import { RenameModal } from './modal/modal';
|
||||||
|
import Preview from './preview/preview.vue';
|
||||||
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||||
|
import { columns, searchFormSchema } from './modal.data';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
const { createConfirm, createMessage } = useMessage();
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '普通飞行1',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'folder',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '21',
|
||||||
|
name: '普通飞行2-1',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'folder',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '31',
|
||||||
|
name: '普通飞行3-1',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'img',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '22',
|
||||||
|
name: '普通飞行2-2',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'folder',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '32',
|
||||||
|
name: '普通飞行3-2',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'img',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '33',
|
||||||
|
name: '普通飞行3-3',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'img',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: '41',
|
||||||
|
name: '视频',
|
||||||
|
createtime: '2025-03-24 18:13:17',
|
||||||
|
type: 'folder',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '4-4',
|
||||||
|
name: 'XZD153狼窝沟西南',
|
||||||
|
createTime: '',
|
||||||
|
type: 'video',
|
||||||
|
url: '74b95e6575d741489b9a9061bb646467',
|
||||||
|
manufacturer: '海康',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4-5',
|
||||||
|
name: '费县马庄镇陈家鱼后村南斜坡后村',
|
||||||
|
createTime: '',
|
||||||
|
type: 'video',
|
||||||
|
url: 'http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv',
|
||||||
|
manufacturer: '腾讯',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4-6',
|
||||||
|
name: '可落',
|
||||||
|
createTime: '',
|
||||||
|
type: 'video',
|
||||||
|
url: '8H03AA1PAG8D9BF',
|
||||||
|
manufacturer: '乐橙',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4-7',
|
||||||
|
name: '费县薛庄镇东张林村村南可见光',
|
||||||
|
createTime: '',
|
||||||
|
type: 'video',
|
||||||
|
url: '37130100181328000392',
|
||||||
|
manufacturer: '青犀',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const tableType = ref('table');
|
||||||
|
const searchInfo = reactive<Recordable>({});
|
||||||
|
const searchParams = ref();
|
||||||
|
const [registerTable, { reload, getSelectRows, getDataSource, clearSelectedRowKeys }] = useTable({
|
||||||
|
// api: getOrgList,
|
||||||
|
dataSource: data,
|
||||||
|
rowKey: 'id',
|
||||||
|
columns,
|
||||||
|
formConfig: {
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas: searchFormSchema,
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
inset: false,
|
||||||
|
tableSetting: {
|
||||||
|
redo: false,
|
||||||
|
size: false,
|
||||||
|
setting: false,
|
||||||
|
},
|
||||||
|
useSearchForm: true,
|
||||||
|
showIndexColumn: false,
|
||||||
|
showTableSetting: true,
|
||||||
|
handleSearchInfoFn(info) {
|
||||||
|
console.log(info);
|
||||||
|
console.log(searchInfo.value);
|
||||||
|
|
||||||
|
searchParams.value = info;
|
||||||
|
return info;
|
||||||
|
},
|
||||||
|
beforeFetch: (data) => {
|
||||||
|
// 接口请求前 参数处理
|
||||||
|
var temp = {
|
||||||
|
startTime: dayjs(data.startTime).startOf('month').format('YYYY-MM-DD'),
|
||||||
|
endTime: dayjs(data.endTime).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
};
|
||||||
|
return temp;
|
||||||
|
},
|
||||||
|
afterFetch: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleSelect(orgId = '') {
|
||||||
|
searchInfo.orgId = orgId;
|
||||||
|
reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
const childRef = ref<any>();
|
||||||
|
function handleSuccess() {
|
||||||
|
clearSelectedRowKeys();
|
||||||
|
childRef.value.fetch();
|
||||||
|
reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗----------------------------------------------------------------------
|
||||||
|
// 新建文件夹
|
||||||
|
const [addFolderModal, { openModal: openAddFolderModal }] = useModal();
|
||||||
|
// 移动
|
||||||
|
const [moveFileModal, { openModal: openMoveFileModal }] = useModal();
|
||||||
|
// 压缩
|
||||||
|
const [compressFileModal, { openModal: openCompressFileModal }] = useModal();
|
||||||
|
// 重命名
|
||||||
|
const [renameModal, { openModal: openRenameModal }] = useModal();
|
||||||
|
|
||||||
|
// 新建文件夹
|
||||||
|
function addFolder() {
|
||||||
|
let rows = getSelectRows();
|
||||||
|
let record: any = null;
|
||||||
|
if (rows.length == 1) {
|
||||||
|
if (rows[0].type == 'folder') {
|
||||||
|
record = rows[0];
|
||||||
|
} else {
|
||||||
|
record = findParentIdById(getDataSource(), rows[0].id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
openAddFolderModal(true, {
|
||||||
|
record,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取父元素
|
||||||
|
function findParentIdById(tree, targetId) {
|
||||||
|
function recurse(nodes) {
|
||||||
|
for (let node of nodes) {
|
||||||
|
if (node.children) {
|
||||||
|
for (let child of node.children) {
|
||||||
|
if (child.id === targetId) {
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
const found = recurse([child]);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return recurse(tree);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动文件
|
||||||
|
function moveFolderOrFile() {
|
||||||
|
let rows = getSelectRows();
|
||||||
|
if (rows.length > 0) {
|
||||||
|
const record = rows;
|
||||||
|
openMoveFileModal(true, {
|
||||||
|
tableData: getDataSource(),
|
||||||
|
record,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return createMessage.warn('请选择一个或者多个文件/文件夹进行移动');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
async function deleteFolderOrFile() {
|
||||||
|
let rows = getSelectRows();
|
||||||
|
if (rows.length == 0) {
|
||||||
|
return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
|
||||||
|
}
|
||||||
|
const query = rows.map((item) => item.id);
|
||||||
|
createConfirm({
|
||||||
|
iconType: 'info',
|
||||||
|
title: '删除',
|
||||||
|
content: '确定要删除当前部门吗',
|
||||||
|
onOk: async () => {
|
||||||
|
// const data = await deleteDept(query);
|
||||||
|
const data = null;
|
||||||
|
if (data) {
|
||||||
|
handleSuccess();
|
||||||
|
createMessage.success('删除成功');
|
||||||
|
} else {
|
||||||
|
createMessage.error('删除失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 压缩
|
||||||
|
function compressFolderOrFile() {
|
||||||
|
let rows = getSelectRows();
|
||||||
|
if (rows.length > 0) {
|
||||||
|
const record = rows;
|
||||||
|
openCompressFileModal(true, {
|
||||||
|
tableData: getDataSource(),
|
||||||
|
record,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return createMessage.warn('请选择一个或者多个文件/文件夹压缩');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重命名
|
||||||
|
function renameRecord(record) {
|
||||||
|
openRenameModal(true, {
|
||||||
|
record,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览----------------------------------------------------------------------
|
||||||
|
const open = ref(false);
|
||||||
|
// 预览
|
||||||
|
const nowPreviewRecord: any = ref();
|
||||||
|
const previewRecordList: any = ref([]);
|
||||||
|
function lookRecord(record) {
|
||||||
|
open.value = true;
|
||||||
|
nowPreviewRecord.value = record;
|
||||||
|
previewRecordList.value = findParentIdById(getDataSource(), record.id)?.children;
|
||||||
|
if (!previewRecordList.value) {
|
||||||
|
previewRecordList.value = getDataSource();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片选择
|
||||||
|
function chooseNowPreviewRecord(value) {
|
||||||
|
nowPreviewRecord.value = value;
|
||||||
|
}
|
||||||
|
// 关闭
|
||||||
|
function closeModal() {
|
||||||
|
open.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||||
|
import { h } from 'vue';
|
||||||
|
import { Tag } from 'ant-design-vue';
|
||||||
|
import { getPosGroupList } from '@/api/demo/system';
|
||||||
|
|
||||||
|
export const columns: BasicColumn[] = [
|
||||||
|
{
|
||||||
|
title: '文件名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
align: 'left',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createtime',
|
||||||
|
align: 'left',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '大小',
|
||||||
|
dataIndex: 'size',
|
||||||
|
align: 'left',
|
||||||
|
width: 75,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '标签',
|
||||||
|
dataIndex: 'label',
|
||||||
|
align: 'left',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'equipmentName',
|
||||||
|
align: 'left',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
align: 'left',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const searchFormSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'label',
|
||||||
|
label: '标签',
|
||||||
|
component: 'Select',
|
||||||
|
colProps: { span: 8 },
|
||||||
|
componentProps: {
|
||||||
|
mode: 'multiple',
|
||||||
|
options: [
|
||||||
|
{ label: '标签1', value: '标签1' },
|
||||||
|
{ label: '标签2', value: '标签2' },
|
||||||
|
{ label: '标签3', value: '标签3' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'equipmentName',
|
||||||
|
label: '设备名称',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 5 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: '[startTime, endTime]',
|
||||||
|
label: '时间选择',
|
||||||
|
component: 'RangePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
label: '文件名称',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 5 },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export const formGroupSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'posGroupId',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
label: '职级组',
|
||||||
|
required: true,
|
||||||
|
componentProps: ({ formActionType, formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getPosGroupList, // 接口
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const formSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'id',
|
||||||
|
label: '部门id',
|
||||||
|
component: 'Input',
|
||||||
|
ifShow: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
label: '部门名称',
|
||||||
|
component: 'Input',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'parentId',
|
||||||
|
label: '上级部门',
|
||||||
|
component: 'TreeSelect',
|
||||||
|
componentProps: {
|
||||||
|
fieldNames: {
|
||||||
|
label: 'name',
|
||||||
|
key: 'id',
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
onChange:(value)=>{
|
||||||
|
console.log(value)
|
||||||
|
},
|
||||||
|
getPopupContainer: () => document.body,
|
||||||
|
},
|
||||||
|
// required: true,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// field: 'orderNo',
|
||||||
|
// label: '排序',
|
||||||
|
// component: 'InputNumber',
|
||||||
|
// required: true,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
label: '状态',
|
||||||
|
component: 'RadioButtonGroup',
|
||||||
|
defaultValue: 0,
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{ label: '启用', value: 0 },
|
||||||
|
{ label: '停用', value: 1 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: '备注',
|
||||||
|
// field: 'remark',
|
||||||
|
// component: 'InputTextArea',
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 新建文件夹
|
||||||
|
export const addFolderSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'Input',
|
||||||
|
label: '上级目录',
|
||||||
|
required: false,
|
||||||
|
defaultValue: '/',
|
||||||
|
componentProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'newName',
|
||||||
|
component: 'Input',
|
||||||
|
label: '新文件夹名称',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 压缩
|
||||||
|
export const compressFileSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'compressName',
|
||||||
|
component: 'Input',
|
||||||
|
label: '压缩文件名称',
|
||||||
|
required: true,
|
||||||
|
defaultValue: '压缩文件',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 重命名
|
||||||
|
export const renameSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'Input',
|
||||||
|
label: '新名称',
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
];
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<BasicModal v-bind="$attrs" @register="registerModal" title="新建文件夹" @ok="handleSubmit">
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
</BasicModal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form';
|
||||||
|
import { addFolderSchema } from '../modal.data';
|
||||||
|
|
||||||
|
import { orgPosGroup } from '@/api/demo/system';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
|
||||||
|
const emit = defineEmits(['success']);
|
||||||
|
|
||||||
|
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||||
|
labelWidth: 100,
|
||||||
|
baseColProps: { span: 24 },
|
||||||
|
schemas: addFolderSchema,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 上级文件夹的id
|
||||||
|
let folderId = ref();
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||||
|
resetFields();
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
folderId.value = data.record?.id;
|
||||||
|
setFieldsValue({
|
||||||
|
...data.record,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
async function handleSubmit() {
|
||||||
|
try {
|
||||||
|
const values = await validate();
|
||||||
|
let query = {
|
||||||
|
folderId: folderId.value,
|
||||||
|
newName: values.newName,
|
||||||
|
};
|
||||||
|
// 调用接口
|
||||||
|
const data = await orgPosGroup(query);
|
||||||
|
if (data) {
|
||||||
|
setModalProps({ confirmLoading: true });
|
||||||
|
closeModal();
|
||||||
|
emit('success');
|
||||||
|
return createMessage.success('成功');
|
||||||
|
} else {
|
||||||
|
return createMessage.error('失败');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<BasicModal
|
||||||
|
v-bind="$attrs"
|
||||||
|
@register="registerModal"
|
||||||
|
title="重命名"
|
||||||
|
height="100"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
>
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
</BasicModal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form';
|
||||||
|
import { renameSchema } from '../modal.data';
|
||||||
|
|
||||||
|
import { orgPosGroup } from '@/api/demo/system';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
|
||||||
|
const emit = defineEmits(['success']);
|
||||||
|
|
||||||
|
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||||
|
labelWidth: 100,
|
||||||
|
baseColProps: { span: 24 },
|
||||||
|
schemas: renameSchema,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 上级文件夹的id
|
||||||
|
let id = ref();
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||||
|
resetFields();
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
id.value = data.record?.id;
|
||||||
|
setFieldsValue({
|
||||||
|
...data.record,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
async function handleSubmit() {
|
||||||
|
try {
|
||||||
|
const values = await validate();
|
||||||
|
let query = {
|
||||||
|
id: id.value,
|
||||||
|
name: values.name,
|
||||||
|
};
|
||||||
|
// 调用接口
|
||||||
|
const data = await orgPosGroup(query);
|
||||||
|
if (data) {
|
||||||
|
setModalProps({ confirmLoading: true });
|
||||||
|
closeModal();
|
||||||
|
emit('success');
|
||||||
|
return createMessage.success('重命名成功');
|
||||||
|
} else {
|
||||||
|
return createMessage.error('重命名失败');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setModalProps({ confirmLoading: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export { default as AddFolderModal } from './AddFolderModal.vue';
|
||||||
|
export { default as MoveFileModal } from './MoveFileModal.vue';
|
||||||
|
export { default as CompressFileModal } from './CompressFileModal.vue';
|
||||||
|
export { default as RenameModal } from './RenameModal.vue';
|
||||||
@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
style="position: relative; height: 100%"
|
||||||
|
ref="vChartRef"
|
||||||
|
:id="'mars3d-container-' + name"
|
||||||
|
></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 axios from 'axios';
|
||||||
|
|
||||||
|
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']);
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
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';
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<div class="modal">
|
||||||
|
<div class="title">
|
||||||
|
<div class="title-1">{{ props.nowPreviewRecord.name }}</div>
|
||||||
|
<div class="title-2">
|
||||||
|
{{
|
||||||
|
props.nowPreviewRecord.createTime +
|
||||||
|
' ' +
|
||||||
|
props.nowPreviewRecord.size +
|
||||||
|
' ' +
|
||||||
|
props.nowPreviewRecord.id
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="closeButton">
|
||||||
|
<CloseOutlined @click="closeModal" style="font-size: 25px; color: white" />
|
||||||
|
</div>
|
||||||
|
<div class="mainBody">
|
||||||
|
<div class="imgOrVideo">
|
||||||
|
<!-- 图片 -->
|
||||||
|
<div class="image" v-if="props.nowPreviewRecord.type == 'img'">
|
||||||
|
<!-- <PreviewCanvas
|
||||||
|
:nowPreviewRecord="props.nowPreviewRecord"
|
||||||
|
:previewRecordList="props.previewRecordList"
|
||||||
|
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
||||||
|
@reloadTable="reloadTable"
|
||||||
|
/> -->
|
||||||
|
<PreviewImage
|
||||||
|
:nowPreviewRecord="props.nowPreviewRecord"
|
||||||
|
:previewRecordList="props.previewRecordList"
|
||||||
|
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
||||||
|
@reloadTable="reloadTable"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- VR全景 -->
|
||||||
|
<!-- <div v-if="props.nowPreviewRecord.type == 'vr'">
|
||||||
|
<PanoViewer />
|
||||||
|
</div> -->
|
||||||
|
<!-- 视频 -->
|
||||||
|
<div class="video" v-if="props.nowPreviewRecord.type == 'video'">
|
||||||
|
<PreviewVideo :nowPreviewRecord="props.nowPreviewRecord" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="information">
|
||||||
|
<PreviewInformation :nowPreviewRecord="props.nowPreviewRecord" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { PreviewImage } from './preview';
|
||||||
|
import { PreviewCanvas } from './preview';
|
||||||
|
import { PreviewVideo } from './preview';
|
||||||
|
import { PreviewInformation } from './preview';
|
||||||
|
import { PanoViewer } from './preview';
|
||||||
|
|
||||||
|
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||||
|
const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
|
||||||
|
|
||||||
|
// 选择
|
||||||
|
function chooseNowPreviewRecord(value) {
|
||||||
|
emit('chooseNowPreviewRecord', value);
|
||||||
|
}
|
||||||
|
// 刷新表格
|
||||||
|
function reloadTable() {
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
// 关闭弹窗
|
||||||
|
function closeModal() {
|
||||||
|
emit('closeModal');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.modal {
|
||||||
|
width: 100%;
|
||||||
|
height: 920px;
|
||||||
|
|
||||||
|
// 页面不能被选中
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE/Edge */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.mainBody {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
.imgOrVideo {
|
||||||
|
width: 80%;
|
||||||
|
height: 920px;
|
||||||
|
background: #101010;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.information {
|
||||||
|
position: relative;
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
background: #1c1c1c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,583 @@
|
|||||||
|
<template>
|
||||||
|
<div class="image">
|
||||||
|
<div class="canvas">
|
||||||
|
<canvas
|
||||||
|
width="1300"
|
||||||
|
height="800"
|
||||||
|
id="canvas"
|
||||||
|
:style="{
|
||||||
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
}"
|
||||||
|
></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="buttonList">
|
||||||
|
<!-- 放大 -->
|
||||||
|
<div class="button"> <ZoomInOutlined @click="zoomIn" /> </div>
|
||||||
|
<!-- 缩小 -->
|
||||||
|
<div class="button"> <ZoomOutOutlined @click="zoomOut" /> </div>
|
||||||
|
<!-- 顺时针旋转 -->
|
||||||
|
<div class="button"> <RotateRightOutlined @click="rotateClockwise" /> </div>
|
||||||
|
<!-- 逆时针旋转 -->
|
||||||
|
<div class="button"> <RotateLeftOutlined @click="rotateCounterClockwise" /> </div>
|
||||||
|
|
|
||||||
|
<!-- 刷新 -->
|
||||||
|
<div class="button"> <RedoOutlined @click="refreshCanvas" /> </div>
|
||||||
|
<!-- 涂鸦 -->
|
||||||
|
<div class="tipChoose" v-if="graffitiFlag">
|
||||||
|
<n-color-picker size="small" :modes="['rgb']" v-model:value="graffitiColor" />
|
||||||
|
<a-slider v-model:value="graffitiWidth" :min="1" :max="10" />
|
||||||
|
</div>
|
||||||
|
<div class="button" :style="{ background: graffitiFlag ? 'blue' : '' }">
|
||||||
|
<HighlightOutlined
|
||||||
|
:style="{
|
||||||
|
color: graffitiColor,
|
||||||
|
}"
|
||||||
|
@click="
|
||||||
|
graffitiFlag = !graffitiFlag;
|
||||||
|
rectFlag = false;
|
||||||
|
textboxFlag = false;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 标注 -->
|
||||||
|
<div class="tipChoose" v-if="rectFlag">
|
||||||
|
<n-color-picker size="small" :modes="['rgb']" v-model:value="rectColor" />
|
||||||
|
</div>
|
||||||
|
<div class="button" :style="{ background: rectFlag ? 'blue' : '' }">
|
||||||
|
<BorderOutlined
|
||||||
|
@click="
|
||||||
|
graffitiFlag = false;
|
||||||
|
rectFlag = !rectFlag;
|
||||||
|
textboxFlag = false;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 文字 -->
|
||||||
|
<div class="tipChoose" v-if="textboxFlag">
|
||||||
|
<n-color-picker size="small" :modes="['rgb']" v-model:value="textboxColor" />
|
||||||
|
<a-slider v-model:value="textboxFontSize" :min="10" :max="50" />
|
||||||
|
</div>
|
||||||
|
<div class="button" :style="{ background: textboxFlag ? 'blue' : '' }">
|
||||||
|
<FontSizeOutlined
|
||||||
|
@click="
|
||||||
|
graffitiFlag = false;
|
||||||
|
rectFlag = false;
|
||||||
|
textboxFlag = !textboxFlag;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 保存 -->
|
||||||
|
<div class="button"> <CheckOutlined @click="checkCanvas" /> </div>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<div class="button"> <CloseOutlined @click="deleteCanvas" /> </div>
|
||||||
|
<!-- 隐藏or显示涂鸦和标签 -->
|
||||||
|
<div class="button">
|
||||||
|
<EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
|
||||||
|
<EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
|
||||||
|
<div style="position: absolute; bottom: 0px; right: 0px; font-size: 10px">涂鸦</div>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
|
||||||
|
<EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
|
||||||
|
<div style="position: absolute; bottom: 0px; right: 0px; font-size: 10px">标签</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
<!-- 复制到剪贴板 -->
|
||||||
|
<div class="button">
|
||||||
|
<ExportOutlined @click="copyToClipboard(props.nowPreviewRecord.url)" />
|
||||||
|
</div>
|
||||||
|
<!-- 下载 -->
|
||||||
|
<div class="button">
|
||||||
|
<DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="imageList">
|
||||||
|
<div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
|
||||||
|
<div
|
||||||
|
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
|
||||||
|
v-if="li.type == 'img'"
|
||||||
|
>
|
||||||
|
<img :src="li.url" :width="60" :height="40" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leftButton" @click="clickLeftOrRightButton('left')">
|
||||||
|
<LeftOutlined style="color: #ffffff; font-size: 20px" />
|
||||||
|
</div>
|
||||||
|
<div class="rightButton" @click="clickLeftOrRightButton('right')">
|
||||||
|
<RightOutlined style="color: #ffffff; font-size: 20px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, watch, computed } from 'vue';
|
||||||
|
import { fabric } from 'fabric';
|
||||||
|
import {
|
||||||
|
CloseOutlined,
|
||||||
|
RightOutlined,
|
||||||
|
LeftOutlined,
|
||||||
|
ZoomOutOutlined,
|
||||||
|
ZoomInOutlined,
|
||||||
|
RotateLeftOutlined,
|
||||||
|
RotateRightOutlined,
|
||||||
|
RedoOutlined,
|
||||||
|
FileImageOutlined,
|
||||||
|
ExportOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
HighlightOutlined,
|
||||||
|
CheckOutlined,
|
||||||
|
FontSizeOutlined,
|
||||||
|
BorderOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
EyeInvisibleOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
import { json } from 'stream/consumers';
|
||||||
|
|
||||||
|
const { createConfirm, createMessage } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||||
|
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
|
||||||
|
|
||||||
|
// 上一张、下一张图片
|
||||||
|
function clickLeftOrRightButton(direction) {
|
||||||
|
const list = props.previewRecordList.filter((item) => item.type == 'img');
|
||||||
|
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);
|
||||||
|
// 初始化
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
setBackgroudUrl(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新表格
|
||||||
|
function reloadTable() {
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 画布
|
||||||
|
const nowCanvasJson = ref(props.nowPreviewRecord.canvasJson);
|
||||||
|
let canvas: any = null;
|
||||||
|
|
||||||
|
// 设置背景图
|
||||||
|
function setBackgroudUrl(value) {
|
||||||
|
nowCanvasJson.value = value.canvasJson;
|
||||||
|
canvas.loadFromJSON(value.canvasJson);
|
||||||
|
fabric.Image.fromURL(value.url, (img) => {
|
||||||
|
// 设置背景图
|
||||||
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
|
||||||
|
scaleX: canvas.width / img.width,
|
||||||
|
scaleY: canvas.height / img.height,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置画笔---------------------------------------------------------------
|
||||||
|
const graffitiFlag = ref(false);
|
||||||
|
const graffitiColor = ref('#ffffff');
|
||||||
|
const graffitiWidth = ref(1);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => (graffitiFlag.value, graffitiColor.value, graffitiWidth.value),
|
||||||
|
() => {
|
||||||
|
setGraffiti();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
// 设置画笔
|
||||||
|
function setGraffiti() {
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
// 设置画笔开启
|
||||||
|
canvas.isDrawingMode = graffitiFlag.value;
|
||||||
|
// 设置画笔颜色
|
||||||
|
canvas.freeDrawingBrush.color = graffitiColor.value;
|
||||||
|
// 设置画笔粗细
|
||||||
|
canvas.freeDrawingBrush.width = graffitiWidth.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置文本---------------------------------------------------------------
|
||||||
|
const textboxFlag = ref(false);
|
||||||
|
const textboxColor = ref('#ffffff');
|
||||||
|
const textboxFontSize = ref(20);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => textboxFlag.value,
|
||||||
|
() => {
|
||||||
|
if (textboxFlag.value) {
|
||||||
|
setTextbox();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => (textboxColor.value, textboxFontSize.value),
|
||||||
|
() => {
|
||||||
|
setTextboxStyle();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 新增文本
|
||||||
|
function setTextbox() {
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
addClickEvent();
|
||||||
|
}
|
||||||
|
// 设置文本样式
|
||||||
|
function setTextboxStyle() {
|
||||||
|
const activeObj = canvas.getActiveObject();
|
||||||
|
if (activeObj) {
|
||||||
|
console.log(activeObj);
|
||||||
|
activeObj.fill = textboxColor.value;
|
||||||
|
activeObj.fontSize = textboxFontSize.value;
|
||||||
|
canvas.setActiveObject(activeObj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置矩形---------------------------------------------------------------
|
||||||
|
const rectFlag = ref(false);
|
||||||
|
const rectColor = ref('#ffffff');
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => rectFlag.value,
|
||||||
|
() => {
|
||||||
|
if (rectFlag.value) {
|
||||||
|
setRect();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => rectColor.value,
|
||||||
|
() => {
|
||||||
|
setRectStyle();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 新增矩形
|
||||||
|
function setRect() {
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
addClickEvent();
|
||||||
|
}
|
||||||
|
// 设置矩形样式
|
||||||
|
function setRectStyle() {
|
||||||
|
const activeObj = canvas.getActiveObject();
|
||||||
|
if (activeObj) {
|
||||||
|
activeObj.stroke = rectColor.value;
|
||||||
|
canvas.setActiveObject(activeObj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加画布点击事件
|
||||||
|
function addClickEvent() {
|
||||||
|
canvas.on('mouse:down', (options) => {
|
||||||
|
if (textboxFlag.value) {
|
||||||
|
// 将文本框添加到画布中
|
||||||
|
const textbox = new fabric.Textbox('标注', {
|
||||||
|
width: 200,
|
||||||
|
fill: textboxColor.value,
|
||||||
|
fontSize: textboxFontSize.value,
|
||||||
|
top: options.absolutePointer.y,
|
||||||
|
left: options.absolutePointer.x,
|
||||||
|
});
|
||||||
|
canvas.add(textbox);
|
||||||
|
removeClickEvent();
|
||||||
|
}
|
||||||
|
if (rectFlag.value) {
|
||||||
|
// 将矩形添加到画布中
|
||||||
|
const rect = new fabric.Rect({
|
||||||
|
top: options.absolutePointer.y,
|
||||||
|
left: options.absolutePointer.x,
|
||||||
|
fill: '#ffffff00',
|
||||||
|
stroke: rectColor.value,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
});
|
||||||
|
canvas.add(rect);
|
||||||
|
removeClickEvent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 移除画布点击事件
|
||||||
|
function removeClickEvent() {
|
||||||
|
canvas.off('mouse:down');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 缩放比例-----------------------------------
|
||||||
|
const scale = ref(1);
|
||||||
|
// 放大函数
|
||||||
|
function zoomIn() {
|
||||||
|
if (scale.value < 3) {
|
||||||
|
// 设置最大缩放倍数为3倍
|
||||||
|
scale.value += 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 缩小函数
|
||||||
|
function zoomOut() {
|
||||||
|
if (scale.value > 0.5) {
|
||||||
|
// 设置最小缩放倍数为0.5倍
|
||||||
|
scale.value -= 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 旋转-----------------------------------
|
||||||
|
const rotationAngle = ref(0);
|
||||||
|
// 顺时针旋转函数
|
||||||
|
function rotateClockwise() {
|
||||||
|
rotationAngle.value += 90; // 每次旋转90度
|
||||||
|
}
|
||||||
|
// 逆时针旋转
|
||||||
|
function rotateCounterClockwise() {
|
||||||
|
rotationAngle.value -= 90; // 每次旋转-90度
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存-----------------------------------
|
||||||
|
function checkCanvas() {
|
||||||
|
nowCanvasJson.value = JSON.stringify(canvas);
|
||||||
|
props.nowPreviewRecord.canvasJson = JSON.stringify(canvas);
|
||||||
|
textboxFlag.value = false;
|
||||||
|
graffitiFlag.value = false;
|
||||||
|
rectFlag.value = false;
|
||||||
|
console.log(JSON.stringify(canvas));
|
||||||
|
createMessage.success('保存成功！');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
function deleteCanvas() {
|
||||||
|
const activeObj = canvas.getActiveObject();
|
||||||
|
canvas.remove(activeObj);
|
||||||
|
textboxFlag.value = false;
|
||||||
|
graffitiFlag.value = false;
|
||||||
|
rectFlag.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
function refreshCanvas() {
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
setBackgroudUrl(props.nowPreviewRecord);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 复制到剪贴板-----------------------------------
|
||||||
|
const copyToClipboard = async (url) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(url);
|
||||||
|
createMessage.success('图片链接已复制到剪贴板');
|
||||||
|
} catch (err) {
|
||||||
|
createMessage.error('无法复制图片链接');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载
|
||||||
|
async function fetchAndDownloadImage(url) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
mode: 'cors',
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const blob = await response.blob();
|
||||||
|
const urlObject = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = urlObject;
|
||||||
|
link.download = props.nowPreviewRecord.name;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(urlObject);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error downloading image:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏涂鸦
|
||||||
|
const hideOrShowGraffitiFlag = ref(true);
|
||||||
|
function hideOrShowGraffiti(value) {
|
||||||
|
hideOrShowGraffitiFlag.value = value;
|
||||||
|
let json = JSON.parse(nowCanvasJson.value);
|
||||||
|
json.objects.forEach((item) => {
|
||||||
|
if (item.type === 'path') {
|
||||||
|
item.visible = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
nowCanvasJson.value = JSON.stringify(json);
|
||||||
|
canvas.loadFromJSON(nowCanvasJson.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏标签
|
||||||
|
const hideOrShowTextboxFlag = ref(true);
|
||||||
|
function hideOrShowTextbox(value) {
|
||||||
|
hideOrShowTextboxFlag.value = value;
|
||||||
|
let json = JSON.parse(nowCanvasJson.value);
|
||||||
|
json.objects.forEach((item) => {
|
||||||
|
if (item.type === 'textbox' || item.type === 'rect') {
|
||||||
|
item.visible = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
nowCanvasJson.value = JSON.stringify(json);
|
||||||
|
canvas.loadFromJSON(nowCanvasJson.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
canvas = new fabric.Canvas('canvas');
|
||||||
|
// 背景图片
|
||||||
|
setBackgroudUrl(props.nowPreviewRecord);
|
||||||
|
// json
|
||||||
|
if (!nowCanvasJson.value) {
|
||||||
|
nowCanvasJson.value = JSON.stringify(canvas);
|
||||||
|
}
|
||||||
|
// 涂鸦
|
||||||
|
setGraffiti();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.image {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 900px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: #1c1c1c;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.buttonList {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_div_choose {
|
||||||
|
padding: 4px;
|
||||||
|
border: 1px solid yellow;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftButton {
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 1000;
|
||||||
|
background: #9c9c9c;
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.rightButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 1000;
|
||||||
|
background: #9c9c9c;
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.eyeButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 45px;
|
||||||
|
background: #ffffff;
|
||||||
|
width: 50px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.tipChoose {
|
||||||
|
position: absolute;
|
||||||
|
background: #1c1c1c;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
top: 35px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,893 @@
|
|||||||
|
<template>
|
||||||
|
<div class="image">
|
||||||
|
<div class="canvas">
|
||||||
|
<div
|
||||||
|
ref="mouseCanvasRef"
|
||||||
|
@mousedown="onMouseDown"
|
||||||
|
:style="{
|
||||||
|
position: 'relative',
|
||||||
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
width: `${getImageWidthAndHeight[0]}px`,
|
||||||
|
height: `${getImageWidthAndHeight[1]}px`,
|
||||||
|
background: `url(${props.nowPreviewRecord.url}) no-repeat`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 创建的矩形 -->
|
||||||
|
<div
|
||||||
|
v-if="hideOrShowGraffitiFlag"
|
||||||
|
v-for="(rect, index) in graffitis"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: rect.x + 'px',
|
||||||
|
top: rect.y + 'px',
|
||||||
|
width: rect.width + 'px',
|
||||||
|
height: rect.height + 'px',
|
||||||
|
zIndex: rect.status == 'edit' ? 1000 : 201,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 文字标签 -->
|
||||||
|
<div
|
||||||
|
v-if="nowGraffiti == index || rect.text"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '0px',
|
||||||
|
top: rect.height + 'px',
|
||||||
|
width: '220px',
|
||||||
|
height: 30 + 'px',
|
||||||
|
background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div style="display: block" v-if="nowGraffiti == index">
|
||||||
|
<a-input
|
||||||
|
v-model:value="rect.text"
|
||||||
|
style="width: 110px; height: 30px; margin-right: 10px"
|
||||||
|
/>
|
||||||
|
<CheckOutlined
|
||||||
|
style="margin-right: 10px; color: green"
|
||||||
|
@click="
|
||||||
|
nowGraffiti = -1;
|
||||||
|
rect.status = 'success';
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<CloseOutlined
|
||||||
|
style="margin-right: 10px; color: red"
|
||||||
|
@click="
|
||||||
|
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
|
||||||
|
nowGraffiti = -1;
|
||||||
|
rect.status = 'success';
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<DeleteOutlined
|
||||||
|
style="margin-right: 10px"
|
||||||
|
@click="
|
||||||
|
graffitis.splice(index, 1);
|
||||||
|
nowGraffiti = -1;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<a-popover placement="top">
|
||||||
|
<template #content>
|
||||||
|
<div style="display: flex; gap: 5px">
|
||||||
|
<div
|
||||||
|
class="popoverClass"
|
||||||
|
v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
|
||||||
|
:key="color"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@click="rect.color = color"
|
||||||
|
>
|
||||||
|
<CheckOutlined v-if="rect.color == color" style="color: white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<FontColorsOutlined style="" />
|
||||||
|
</a-popover>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="nowGraffiti != index"
|
||||||
|
style="
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
-webkit-text-stroke: 1px white;
|
||||||
|
width: fit-content;
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
textDecoration: rect.status == 'mouse' ? 'underline' : '',
|
||||||
|
}"
|
||||||
|
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
|
||||||
|
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
|
||||||
|
@click="
|
||||||
|
rect.status = 'edit';
|
||||||
|
graffitisClone = cloneDeep(graffitis);
|
||||||
|
nowGraffiti = index;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ rect.text }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上 -->
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: rect.status == 'edit' ? '6px' : '0px',
|
||||||
|
top: '0px',
|
||||||
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||||
|
height: '4px',
|
||||||
|
background: `${rect.color}`,
|
||||||
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'top')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@click="
|
||||||
|
rect.status = 'edit';
|
||||||
|
nowGraffiti = index;
|
||||||
|
"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'top')"
|
||||||
|
/>
|
||||||
|
<!-- 下 -->
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: rect.status == 'edit' ? '6px' : '0px',
|
||||||
|
bottom: `0px`,
|
||||||
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||||
|
height: '4px',
|
||||||
|
background: `${rect.color}`,
|
||||||
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'bottom')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@click="
|
||||||
|
rect.status = 'edit';
|
||||||
|
nowGraffiti = index;
|
||||||
|
"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
||||||
|
/>
|
||||||
|
<!-- 右 -->
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
right: '0px',
|
||||||
|
top: rect.status == 'edit' ? '6px' : '0px',
|
||||||
|
width: '4px',
|
||||||
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||||
|
background: `${rect.color}`,
|
||||||
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'right')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@click="
|
||||||
|
rect.status = 'edit';
|
||||||
|
nowGraffiti = index;
|
||||||
|
"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'right')"
|
||||||
|
/>
|
||||||
|
<!-- 左 -->
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '0px',
|
||||||
|
top: rect.status == 'edit' ? '6px' : '0px',
|
||||||
|
width: '4px',
|
||||||
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||||
|
background: `${rect.color}`,
|
||||||
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'left')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@click="
|
||||||
|
rect.status = 'edit';
|
||||||
|
nowGraffiti = index;
|
||||||
|
"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'left')"
|
||||||
|
/>
|
||||||
|
<!-- 左上 -->
|
||||||
|
<div
|
||||||
|
v-if="rect.status == 'edit'"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '-4px',
|
||||||
|
top: '-4px',
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
background: `#ffffff`,
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'leftTop')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'leftTop')"
|
||||||
|
/>
|
||||||
|
<!-- 右下 -->
|
||||||
|
<div
|
||||||
|
v-if="rect.status == 'edit'"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
right: '-4px',
|
||||||
|
bottom: '-4px',
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
background: `#ffffff`,
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'rightBottom')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom')"
|
||||||
|
/>
|
||||||
|
<!-- 右上 -->
|
||||||
|
<div
|
||||||
|
v-if="rect.status == 'edit'"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
right: '-4px',
|
||||||
|
top: '-4px',
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
background: `#ffffff`,
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'rightTop')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'rightTop')"
|
||||||
|
/>
|
||||||
|
<!-- 左下 -->
|
||||||
|
<div
|
||||||
|
v-if="rect.status == 'edit'"
|
||||||
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '-4px',
|
||||||
|
bottom: '-4px',
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
background: `#ffffff`,
|
||||||
|
}"
|
||||||
|
@mouseenter="mouseenter(rect, 'leftBottom')"
|
||||||
|
@mouseleave="mouseleave(rect)"
|
||||||
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="buttonList">
|
||||||
|
<!-- 放大 -->
|
||||||
|
<div class="button"> <ZoomInOutlined @click="zoomIn" /> </div>
|
||||||
|
<!-- 缩小 -->
|
||||||
|
<div class="button"> <ZoomOutOutlined @click="zoomOut" /> </div>
|
||||||
|
<!-- 顺时针旋转 -->
|
||||||
|
<div class="button"> <RotateRightOutlined @click="rotateClockwise" /> </div>
|
||||||
|
<!-- 逆时针旋转 -->
|
||||||
|
<div class="button"> <RotateLeftOutlined @click="rotateCounterClockwise" /> </div>
|
||||||
|
<!-- 刷新 -->
|
||||||
|
<div class="button"> <RedoOutlined @click="refresh" /> </div>
|
||||||
|
|
|
||||||
|
<!-- 全屏 -->
|
||||||
|
<!-- <div class="button"> <RedoOutlined @click="refresh" /> </div> -->
|
||||||
|
|
|
||||||
|
<!-- 复制到剪贴板 -->
|
||||||
|
<div class="button">
|
||||||
|
<ExportOutlined @click="copyToClipboard(props.nowPreviewRecord.url)" />
|
||||||
|
</div>
|
||||||
|
<!-- 下载 -->
|
||||||
|
<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
|
||||||
|
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
|
||||||
|
v-if="li.type == 'img'"
|
||||||
|
>
|
||||||
|
<img :src="li.url" :width="60" :height="40" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上一张、下一张图片 -->
|
||||||
|
<div class="leftButton" @click="clickLeftOrRightButton('left')">
|
||||||
|
<LeftOutlined style="color: #ffffff; font-size: 20px" />
|
||||||
|
</div>
|
||||||
|
<div class="rightButton" @click="clickLeftOrRightButton('right')">
|
||||||
|
<RightOutlined style="color: #ffffff; font-size: 20px" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 涂鸦颜色选择-提示 -->
|
||||||
|
<div
|
||||||
|
class="graffitiButton"
|
||||||
|
@click="setGraffiti"
|
||||||
|
:style="graffitiFlag ? 'outline: 2px solid #2B85E4' : ''"
|
||||||
|
>
|
||||||
|
<a-popover placement="left">
|
||||||
|
<template #content>
|
||||||
|
<div style="display: flex; gap: 5px">
|
||||||
|
<div
|
||||||
|
class="popoverClass"
|
||||||
|
v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
|
||||||
|
:key="color"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@click="graffitiColor = color"
|
||||||
|
>
|
||||||
|
<CheckOutlined v-if="graffitiColor == color" style="color: white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<EditOutlined
|
||||||
|
:style="{
|
||||||
|
color: graffitiColor,
|
||||||
|
fontSize: '20px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</a-popover>
|
||||||
|
</div>
|
||||||
|
<!-- 隐藏or显示涂鸦和标签 -->
|
||||||
|
<div class="showTextboxClass">
|
||||||
|
<div class="button">
|
||||||
|
<EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
|
||||||
|
<EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #000000;
|
||||||
|
pointer-events: none;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
涂鸦
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
|
||||||
|
<EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #000000;
|
||||||
|
pointer-events: none;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
标注
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, watch, computed } from 'vue';
|
||||||
|
import {
|
||||||
|
CloseOutlined,
|
||||||
|
RightOutlined,
|
||||||
|
LeftOutlined,
|
||||||
|
ZoomOutOutlined,
|
||||||
|
ZoomInOutlined,
|
||||||
|
RotateLeftOutlined,
|
||||||
|
RotateRightOutlined,
|
||||||
|
ExportOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
CheckOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
EyeInvisibleOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
FontColorsOutlined,
|
||||||
|
RedoOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
const { createConfirm, createMessage } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||||
|
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
|
||||||
|
|
||||||
|
// 宽高
|
||||||
|
const getImageWidthAndHeight = computed(() => {
|
||||||
|
let width = 1300;
|
||||||
|
let height = 800;
|
||||||
|
if (props.nowPreviewRecord.width > 1300 || props.nowPreviewRecord.height > 800) {
|
||||||
|
if (props.nowPreviewRecord.width / 1300 > props.nowPreviewRecord.height / 800) {
|
||||||
|
width = 1300;
|
||||||
|
height = (props.nowPreviewRecord.height / props.nowPreviewRecord.width) * 1300;
|
||||||
|
} else {
|
||||||
|
height = 800;
|
||||||
|
width = (props.nowPreviewRecord.width / props.nowPreviewRecord.height) * 800;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
width = props.nowPreviewRecord.width;
|
||||||
|
height = props.nowPreviewRecord.height;
|
||||||
|
}
|
||||||
|
return [width, height];
|
||||||
|
});
|
||||||
|
|
||||||
|
// 上一张、下一张图片
|
||||||
|
function clickLeftOrRightButton(direction) {
|
||||||
|
const list = props.previewRecordList.filter((item) => item.type == 'img');
|
||||||
|
graffitiFlag.value = false;
|
||||||
|
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);
|
||||||
|
// 初始化
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新表格
|
||||||
|
function reloadTable() {
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 缩放比例-----------------------------------
|
||||||
|
const scale = ref(1);
|
||||||
|
// 放大函数
|
||||||
|
function zoomIn() {
|
||||||
|
if (scale.value < 3) {
|
||||||
|
// 设置最大缩放倍数为3倍
|
||||||
|
scale.value += 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 缩小函数
|
||||||
|
function zoomOut() {
|
||||||
|
if (scale.value > 0.5) {
|
||||||
|
// 设置最小缩放倍数为0.5倍
|
||||||
|
scale.value -= 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 旋转-----------------------------------
|
||||||
|
const rotationAngle = ref(0);
|
||||||
|
// 顺时针旋转函数
|
||||||
|
function rotateClockwise() {
|
||||||
|
rotationAngle.value += 90; // 每次旋转90度
|
||||||
|
}
|
||||||
|
// 逆时针旋转
|
||||||
|
function rotateCounterClockwise() {
|
||||||
|
rotationAngle.value -= 90; // 每次旋转-90度
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
function refresh() {
|
||||||
|
scale.value = 1;
|
||||||
|
rotationAngle.value = 0;
|
||||||
|
graffitiFlag.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
function deleteCanvas() {}
|
||||||
|
|
||||||
|
// 复制到剪贴板-----------------------------------
|
||||||
|
const copyToClipboard = async (url) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(url);
|
||||||
|
createMessage.success('图片链接已复制到剪贴板');
|
||||||
|
} catch (err) {
|
||||||
|
createMessage.error('无法复制图片链接');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载
|
||||||
|
async function fetchAndDownloadImage(url) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
mode: 'cors',
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const blob = await response.blob();
|
||||||
|
const urlObject = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = urlObject;
|
||||||
|
link.download = props.nowPreviewRecord.name;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(urlObject);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error downloading image:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏涂鸦
|
||||||
|
const hideOrShowGraffitiFlag = ref(true);
|
||||||
|
function hideOrShowGraffiti(value) {
|
||||||
|
hideOrShowGraffitiFlag.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏标签
|
||||||
|
const hideOrShowTextboxFlag = ref(true);
|
||||||
|
function hideOrShowTextbox(value) {
|
||||||
|
hideOrShowTextboxFlag.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置画笔---------------------------------------------------------------
|
||||||
|
const graffitiFlag = ref(false);
|
||||||
|
const graffitiColor = ref('#E23C39');
|
||||||
|
const nowGraffiti = ref(-1);
|
||||||
|
const nowMouseGraffiti = ref(0);
|
||||||
|
|
||||||
|
function setGraffiti() {
|
||||||
|
graffitiFlag.value = !graffitiFlag.value;
|
||||||
|
if (graffitiFlag.value) {
|
||||||
|
document.body.style.cursor = 'crosshair';
|
||||||
|
} else {
|
||||||
|
document.body.style.cursor = 'pointer';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 临时选框状态
|
||||||
|
const isDrawing = ref(false);
|
||||||
|
let startX = 0;
|
||||||
|
let startY = 0;
|
||||||
|
let endX = 0;
|
||||||
|
let endY = 0;
|
||||||
|
|
||||||
|
// 所有已创建的矩形
|
||||||
|
const graffitis: any = ref([]);
|
||||||
|
const graffitisClone: any = ref([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.nowPreviewRecord.id,
|
||||||
|
() => {
|
||||||
|
graffitis.value = props.nowPreviewRecord.graffitiJson
|
||||||
|
? JSON.parse(props.nowPreviewRecord.graffitiJson)
|
||||||
|
: [];
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => graffitis.value,
|
||||||
|
() => {
|
||||||
|
props.nowPreviewRecord.graffitiJson = JSON.stringify(graffitis.value);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const mouseCanvasRef = ref();
|
||||||
|
// 鼠标按下
|
||||||
|
function onMouseDown(e) {
|
||||||
|
if (!graffitiFlag.value) return;
|
||||||
|
if (nowGraffiti.value != -1) return;
|
||||||
|
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
|
||||||
|
// 获取相对于容器的坐标
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
startX = e.x - rect.x;
|
||||||
|
startY = e.y - rect.y;
|
||||||
|
isDrawing.value = true;
|
||||||
|
|
||||||
|
// 添加矩形到数组中
|
||||||
|
graffitis.value.push({
|
||||||
|
x: startX,
|
||||||
|
y: startY,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
color: graffitiColor.value,
|
||||||
|
text: '',
|
||||||
|
status: 'edit',
|
||||||
|
});
|
||||||
|
graffitisClone.value = cloneDeep(graffitis.value);
|
||||||
|
window.addEventListener('mousemove', onMouseMove);
|
||||||
|
window.addEventListener('mouseup', onMouseUp);
|
||||||
|
}
|
||||||
|
// 鼠标移动
|
||||||
|
function onMouseMove(e) {
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
if (!isDrawing.value) return;
|
||||||
|
endX = e.x - rect.x;
|
||||||
|
endY = e.y - rect.y;
|
||||||
|
if (endX < 0 && endY < 0) {
|
||||||
|
endX = startX;
|
||||||
|
endY = startY;
|
||||||
|
}
|
||||||
|
setMouseData();
|
||||||
|
}
|
||||||
|
// 鼠标松开
|
||||||
|
function onMouseUp(e) {
|
||||||
|
if (!isDrawing.value) return;
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
|
||||||
|
endX = e.x - rect.x;
|
||||||
|
endY = e.y - rect.y;
|
||||||
|
if (endX < 0 && endY < 0) {
|
||||||
|
endX = startX;
|
||||||
|
endY = startY;
|
||||||
|
}
|
||||||
|
isDrawing.value = false;
|
||||||
|
if (e.x > rect.right || e.y > rect.bottom) {
|
||||||
|
graffitis.value.splice(graffitis.value.length - 1, 1);
|
||||||
|
nowGraffiti.value = -1;
|
||||||
|
} else {
|
||||||
|
setMouseData();
|
||||||
|
nowGraffiti.value = graffitis.value.length - 1;
|
||||||
|
}
|
||||||
|
window.removeEventListener('mousemove', onMouseMove);
|
||||||
|
window.removeEventListener('mouseup', onMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置鼠标涂鸦绘画出的数据
|
||||||
|
function setMouseData() {
|
||||||
|
graffitis.value[graffitis.value.length - 1].x = Math.min(startX, endX);
|
||||||
|
graffitis.value[graffitis.value.length - 1].width = Math.abs(endX - startX);
|
||||||
|
graffitis.value[graffitis.value.length - 1].y = Math.min(startY, endY);
|
||||||
|
graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY);
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------
|
||||||
|
// 鼠标聚焦
|
||||||
|
function mouseenter(rect, type) {
|
||||||
|
if (rect.status != 'edit') {
|
||||||
|
rect.status = 'mouse';
|
||||||
|
document.body.style.cursor = 'pointer';
|
||||||
|
}
|
||||||
|
if (rect.status == 'edit') {
|
||||||
|
if (type == 'top' || type == 'bottom') {
|
||||||
|
document.body.style.cursor = 'ns-resize';
|
||||||
|
}
|
||||||
|
if (type == 'left' || type == 'right') {
|
||||||
|
document.body.style.cursor = 'ew-resize';
|
||||||
|
}
|
||||||
|
if (type == 'leftTop' || type == 'rightBottom') {
|
||||||
|
document.body.style.cursor = 'nwse-resize';
|
||||||
|
}
|
||||||
|
if (type == 'leftBottom' || type == 'rightTop') {
|
||||||
|
document.body.style.cursor = 'nesw-resize';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 鼠标离开
|
||||||
|
function mouseleave(rect) {
|
||||||
|
if (rect.status == 'mouse' || rect.status == 'edit') {
|
||||||
|
if (rect.status == 'mouse') {
|
||||||
|
rect.status = 'success';
|
||||||
|
}
|
||||||
|
if (graffitiFlag.value) {
|
||||||
|
document.body.style.cursor = 'crosshair';
|
||||||
|
} else {
|
||||||
|
document.body.style.cursor = 'pointer';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 编辑状态下的鼠标按下
|
||||||
|
const mouseEditType = ref('');
|
||||||
|
function funMouseDownEdit(e, index, type) {
|
||||||
|
// 获取相对于容器的坐标
|
||||||
|
graffitisClone.value = cloneDeep(graffitis.value);
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
startX = e.x - rect.x;
|
||||||
|
startY = e.y - rect.y;
|
||||||
|
isDrawing.value = true;
|
||||||
|
nowGraffiti.value = index;
|
||||||
|
mouseEditType.value = type;
|
||||||
|
window.addEventListener('mousemove', funMouseMoveEdit);
|
||||||
|
window.addEventListener('mouseup', funMouseUpEdit);
|
||||||
|
}
|
||||||
|
// 编辑状态下的鼠标移动
|
||||||
|
function funMouseMoveEdit(e) {
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
if (!isDrawing.value) return;
|
||||||
|
endX = e.x - rect.x;
|
||||||
|
endY = e.y - rect.y;
|
||||||
|
if (endX < 0 && endY < 0) {
|
||||||
|
endX = startX;
|
||||||
|
endY = startY;
|
||||||
|
}
|
||||||
|
funSetMouseDataEdit();
|
||||||
|
}
|
||||||
|
// 编辑状态下的鼠标松开
|
||||||
|
function funMouseUpEdit(e) {
|
||||||
|
if (!isDrawing.value) return;
|
||||||
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
||||||
|
endX = e.x - rect.x;
|
||||||
|
endY = e.y - rect.y;
|
||||||
|
if (endX < 0 && endY < 0) {
|
||||||
|
endX = startX;
|
||||||
|
endY = startY;
|
||||||
|
}
|
||||||
|
isDrawing.value = false;
|
||||||
|
if (e.x > rect.right || e.y > rect.bottom) {
|
||||||
|
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
|
||||||
|
} else {
|
||||||
|
funSetMouseDataEdit();
|
||||||
|
}
|
||||||
|
window.removeEventListener('mousemove', funMouseMoveEdit);
|
||||||
|
window.removeEventListener('mouseup', funMouseUpEdit);
|
||||||
|
}
|
||||||
|
// 编辑状态下的数据
|
||||||
|
function funSetMouseDataEdit() {
|
||||||
|
if (['top', 'leftTop', 'rightTop'].includes(mouseEditType.value)) {
|
||||||
|
graffitis.value[nowGraffiti.value].height =
|
||||||
|
graffitis.value[nowGraffiti.value].height + graffitis.value[nowGraffiti.value].y - endY;
|
||||||
|
graffitis.value[nowGraffiti.value].y = endY;
|
||||||
|
}
|
||||||
|
if (['bottom', 'leftBottom', 'rightBottom'].includes(mouseEditType.value)) {
|
||||||
|
graffitis.value[nowGraffiti.value].height = endY - graffitis.value[nowGraffiti.value].y;
|
||||||
|
}
|
||||||
|
if (['left', 'leftTop', 'leftBottom'].includes(mouseEditType.value)) {
|
||||||
|
graffitis.value[nowGraffiti.value].width =
|
||||||
|
graffitis.value[nowGraffiti.value].width + graffitis.value[nowGraffiti.value].x - endX;
|
||||||
|
graffitis.value[nowGraffiti.value].x = endX;
|
||||||
|
}
|
||||||
|
if (['right', 'rightTop', 'rightBottom'].includes(mouseEditType.value)) {
|
||||||
|
graffitis.value[nowGraffiti.value].width = endX - graffitis.value[nowGraffiti.value].x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.image {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 900px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 820px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: #1c1c1c;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.buttonList {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_div_choose {
|
||||||
|
padding: 4px;
|
||||||
|
border: 1px solid yellow;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上一张、下一张
|
||||||
|
.leftButton {
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 200;
|
||||||
|
background: #9c9c9c;
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.rightButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 200;
|
||||||
|
background: #9c9c9c;
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 涂鸦颜色选择-提示
|
||||||
|
.graffitiButton {
|
||||||
|
background: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 5%;
|
||||||
|
z-index: 200;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popoverClass {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签颜色选择
|
||||||
|
.showTextboxClass {
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 25%;
|
||||||
|
width: 30px;
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
color: #2d8cf0;
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 22px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,271 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title"> 详细信息 </div>
|
||||||
|
<div class="info">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">图片名称</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue" v-if="editNameFlag">
|
||||||
|
{{ props.nowPreviewRecord.name }}
|
||||||
|
<EditOutlined style="font-size: 20px; color: #07aaed" @click="editNameChange" />
|
||||||
|
</span>
|
||||||
|
<span class="infovalue" v-if="!editNameFlag">
|
||||||
|
<a-input
|
||||||
|
v-model:value="editName"
|
||||||
|
size="small"
|
||||||
|
@keypress.enter="pressEnterNameFunction"
|
||||||
|
@blur="editNameBlur"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">照片类型</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.imgtype }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">任务名称</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.taskname }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">航线名称</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.airlineName }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">照片分辨率</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">
|
||||||
|
{{ props.nowPreviewRecord.width + '*' + props.nowPreviewRecord.height }}
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">照片大小</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.size }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">拍摄飞机</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.photographFeiji }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">拍摄负载</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.photographNumber }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">拍摄人员</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.photographMan }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">拍摄时间</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.photographTime }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">标签</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue" v-if="addLabelFlag">
|
||||||
|
<a-tag color="success" v-for="la in props.nowPreviewRecord.label" :key="la">
|
||||||
|
{{ la }}
|
||||||
|
</a-tag>
|
||||||
|
<PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" />
|
||||||
|
</span>
|
||||||
|
<span class="infovalue" v-if="!addLabelFlag">
|
||||||
|
<a-tag
|
||||||
|
color="success"
|
||||||
|
v-for="la in props.nowPreviewRecord.label"
|
||||||
|
:key="la"
|
||||||
|
closable
|
||||||
|
@close="deleteLabel(la)"
|
||||||
|
>
|
||||||
|
{{ la }}
|
||||||
|
</a-tag>
|
||||||
|
<a-input
|
||||||
|
v-model:value="newLabelName"
|
||||||
|
size="small"
|
||||||
|
placeholder=""
|
||||||
|
@keypress.enter="pressEnterLabelFunction"
|
||||||
|
@blur="addLabelBlur"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">涂鸦总数</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infovalue">{{ props.nowPreviewRecord.label }} </span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7">
|
||||||
|
<span class="infotitle">照片位置</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="17">
|
||||||
|
<span class="infobutton">
|
||||||
|
<EnvironmentOutlined style="font-size: 20px; color: #07aaed" @click="flyPoint" />
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="map">
|
||||||
|
<Map ref="mapRef" :nowPreviewRecord="props.nowPreviewRecord" />
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { EditOutlined, PlusSquareOutlined, EnvironmentOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { orgPosGroup } from '@/api/demo/system';
|
||||||
|
import { Map } from './preview';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps(['nowPreviewRecord']);
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
|
||||||
|
// 修改名称--------------------------------
|
||||||
|
const editNameFlag = ref(true);
|
||||||
|
const editName = ref(props.nowPreviewRecord.name.split('.').slice(0, -1).join('.'));
|
||||||
|
function editNameChange() {
|
||||||
|
editNameFlag.value = false;
|
||||||
|
}
|
||||||
|
// 修改名称方法
|
||||||
|
async function pressEnterNameFunction() {
|
||||||
|
let query = {
|
||||||
|
id: props.nowPreviewRecord.id,
|
||||||
|
newName: editName.value + '.' + props.nowPreviewRecord.name.split('.').pop(),
|
||||||
|
};
|
||||||
|
props.nowPreviewRecord.name =
|
||||||
|
editName.value + '.' + props.nowPreviewRecord.name.split('.').pop();
|
||||||
|
editNameFlag.value = true;
|
||||||
|
emit('reloadTable');
|
||||||
|
return;
|
||||||
|
// 调用接口
|
||||||
|
const data = await orgPosGroup(query);
|
||||||
|
if (data) {
|
||||||
|
editNameFlag.value = true;
|
||||||
|
emit('reloadTable');
|
||||||
|
return createMessage.success('修改名称成功');
|
||||||
|
} else {
|
||||||
|
return createMessage.error('修改名称失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function editNameBlur() {
|
||||||
|
editNameFlag.value = true;
|
||||||
|
editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签--------------------------------
|
||||||
|
const addLabelFlag = ref(true);
|
||||||
|
const newLabelName = ref('');
|
||||||
|
function addLabelChange() {
|
||||||
|
addLabelFlag.value = false;
|
||||||
|
}
|
||||||
|
// 添加标签方法
|
||||||
|
async function pressEnterLabelFunction() {
|
||||||
|
if (!newLabelName.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!props.nowPreviewRecord.label.includes(newLabelName.value)) {
|
||||||
|
props.nowPreviewRecord.label.push(newLabelName.value);
|
||||||
|
let query = {
|
||||||
|
id: props.nowPreviewRecord.id,
|
||||||
|
newLabel: props.nowPreviewRecord.label,
|
||||||
|
};
|
||||||
|
addLabelFlag.value = true;
|
||||||
|
emit('reloadTable');
|
||||||
|
newLabelName.value = '';
|
||||||
|
return;
|
||||||
|
// 调用接口
|
||||||
|
const data = await orgPosGroup(query);
|
||||||
|
if (data) {
|
||||||
|
addLabelFlag.value = true;
|
||||||
|
emit('reloadTable');
|
||||||
|
return createMessage.success('修改名称成功');
|
||||||
|
} else {
|
||||||
|
return createMessage.error('修改名称失败');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return createMessage.error('此标签已存在！');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteLabel(value) {
|
||||||
|
props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((item) => item !== value);
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
function addLabelBlur() {
|
||||||
|
addLabelFlag.value = true;
|
||||||
|
newLabelName.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地图--------------------------------
|
||||||
|
const mapRef = ref();
|
||||||
|
function flyPoint() {
|
||||||
|
mapRef.value?.flyToPoint([props.nowPreviewRecord.lng, props.nowPreviewRecord.lat]);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
height: 480px;
|
||||||
|
|
||||||
|
.infotitle {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infovalue {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infobutton {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: right;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<MonitorHK
|
||||||
|
v-if="props.nowPreviewRecord.manufacturer == '海康'"
|
||||||
|
:serialNumberValue="props.nowPreviewRecord.url"
|
||||||
|
:width="1380"
|
||||||
|
:height="900"
|
||||||
|
/>
|
||||||
|
<MonitorLC
|
||||||
|
v-if="props.nowPreviewRecord.manufacturer == '乐橙'"
|
||||||
|
:deviceId="props.nowPreviewRecord.url"
|
||||||
|
:channelId="0"
|
||||||
|
:width="1396"
|
||||||
|
:height="900"
|
||||||
|
:videoMuted="true"
|
||||||
|
/>
|
||||||
|
<MonitorTX
|
||||||
|
v-if="props.nowPreviewRecord.manufacturer == '腾讯'"
|
||||||
|
:serialNumberValue="props.nowPreviewRecord.url"
|
||||||
|
:width="1396"
|
||||||
|
:height="900"
|
||||||
|
:videoLoop="false"
|
||||||
|
:videoMuted="true"
|
||||||
|
:videoFit="'contain'"
|
||||||
|
/>
|
||||||
|
<MonitorQX
|
||||||
|
v-if="props.nowPreviewRecord.manufacturer == '青犀'"
|
||||||
|
:serialNumberValue="props.nowPreviewRecord.url"
|
||||||
|
:width="1396"
|
||||||
|
:height="900"
|
||||||
|
:videoLoop="false"
|
||||||
|
:videoMuted="true"
|
||||||
|
:videoFit="'contain'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { MonitorHK } from './preview';
|
||||||
|
import { MonitorLC } from './preview';
|
||||||
|
import { MonitorTX } from './preview';
|
||||||
|
import { MonitorQX } from './preview';
|
||||||
|
|
||||||
|
const props = defineProps(['nowPreviewRecord']);
|
||||||
|
</script>
|
||||||
|
<style lang="less"></style>
|
||||||
@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box-container">
|
||||||
|
<div :id="'root' + props.timestamp"></div>
|
||||||
|
</div>
|
||||||
|
<div class="box-controls">
|
||||||
|
<div class="left-controls">
|
||||||
|
<div>
|
||||||
|
<n-button quaternary @click="playOrPauseClick">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<Pause
|
||||||
|
v-if="control_playOrPause"
|
||||||
|
:style="{
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#ffffff',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<CaretForward
|
||||||
|
v-if="!control_playOrPause"
|
||||||
|
:style="{
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#ffffff',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<n-button quaternary @click="volumeClick">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<VolumeHigh
|
||||||
|
v-if="!control_volume"
|
||||||
|
:style="{
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#ffffff',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<VolumeMute
|
||||||
|
v-if="control_volume"
|
||||||
|
:style="{
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#ffffff',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-controls">
|
||||||
|
<n-button quaternary @click="fullScreenClick">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<ExpandOutlined
|
||||||
|
:style="{
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#ffffff',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, watch, ref } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { ExpandOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Pause, CaretForward, VolumeHigh, VolumeMute } from '@vicons/ionicons5';
|
||||||
|
|
||||||
|
let BASE_URL = 'http://111.17.207.220:9001/api';
|
||||||
|
|
||||||
|
const props = defineProps([
|
||||||
|
'deviceId',
|
||||||
|
'channelId',
|
||||||
|
'width',
|
||||||
|
'height',
|
||||||
|
'timestamp',
|
||||||
|
'videoMuted',
|
||||||
|
]);
|
||||||
|
let clPlayer: any = null;
|
||||||
|
|
||||||
|
// 开始播放/暂停播放
|
||||||
|
const control_playOrPause = ref(true);
|
||||||
|
// 音量:true为静音
|
||||||
|
const control_volume = ref(true);
|
||||||
|
// 全屏
|
||||||
|
const control_fullScreen = ref(false);
|
||||||
|
|
||||||
|
// 开始播放/暂停播放方法
|
||||||
|
function playOrPauseClick() {
|
||||||
|
control_playOrPause.value = !control_playOrPause.value;
|
||||||
|
if (control_playOrPause.value) {
|
||||||
|
clPlayer.play();
|
||||||
|
} else {
|
||||||
|
clPlayer.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 音量
|
||||||
|
function volumeClick() {
|
||||||
|
control_volume.value = !control_volume.value;
|
||||||
|
if (control_volume.value) {
|
||||||
|
clPlayer.volume(0);
|
||||||
|
} else {
|
||||||
|
clPlayer.volume(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全屏
|
||||||
|
function fullScreenClick() {
|
||||||
|
clPlayer.fullScreen();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取kitToken
|
||||||
|
function getKitToken(deviceId, channelId) {
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
url: BASE_URL + '/Camera/getKitToken?deviceId=' + deviceId + '&channelId=0' + '&type=0',
|
||||||
|
}).then((res) => {
|
||||||
|
let kitToken = res.data.result.data.kitToken;
|
||||||
|
loadMonitorVideo(deviceId, kitToken, channelId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始
|
||||||
|
function loadMonitorVideo(deviceId, kitToken, channelId) {
|
||||||
|
// 结束上一个
|
||||||
|
closeMonitorVideo();
|
||||||
|
|
||||||
|
clPlayer = new imouPlayer({
|
||||||
|
id: 'root' + props.timestamp,
|
||||||
|
width: props.width,
|
||||||
|
height: props.height - 35,
|
||||||
|
deviceId: deviceId,
|
||||||
|
token: kitToken,
|
||||||
|
channelId: channelId,
|
||||||
|
type: 1,
|
||||||
|
streamId: 0,
|
||||||
|
recordType: 'cloud',
|
||||||
|
code: '',
|
||||||
|
controls: true,
|
||||||
|
});
|
||||||
|
clPlayer.volume(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 结束
|
||||||
|
function closeMonitorVideo() {
|
||||||
|
if (clPlayer != null) {
|
||||||
|
clPlayer.destroy();
|
||||||
|
clPlayer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.deviceId,
|
||||||
|
() => {
|
||||||
|
getKitToken(props.deviceId, props.channelId);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getKitToken(props.deviceId, props.channelId);
|
||||||
|
control_volume.value = props.videoMuted;
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeMonitorVideo();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box {
|
||||||
|
width: v-bind('`${props.width}px`');
|
||||||
|
height: v-bind('`${props.height}px`');
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.box-container {
|
||||||
|
width: v-bind('`${props.width}px`');
|
||||||
|
height: v-bind('`${props.height-35}px`');
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
align-items: center;
|
||||||
|
background: #000000;
|
||||||
|
height: 35px;
|
||||||
|
width: 100%;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-controls {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<easy-player
|
||||||
|
:video-url="getUrl(props.serialNumberValue)"
|
||||||
|
live
|
||||||
|
autoplay
|
||||||
|
fluent="true"
|
||||||
|
:style="{ width: props.width + 'px', height: props.height + 'px' }"
|
||||||
|
:stretch="props.videoFit"
|
||||||
|
:muted="props.videoMuted"
|
||||||
|
:loop="props.videoLoop"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps([
|
||||||
|
'serialNumberValue',
|
||||||
|
'width',
|
||||||
|
'height',
|
||||||
|
'videoMuted',
|
||||||
|
'videoLoop',
|
||||||
|
'videoFit',
|
||||||
|
]);
|
||||||
|
|
||||||
|
function getUrl(value) {
|
||||||
|
return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
width: v-bind('`${props.width}px`');
|
||||||
|
height: v-bind('`${props.height}px`');
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
::v-deep .vjs-bitrate-control {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<video
|
||||||
|
:id="'ZhiGan_ModalVideo' + props.timestamp"
|
||||||
|
class="TCPlayer-video-container"
|
||||||
|
preload="auto"
|
||||||
|
crossOrigin="anonymous"
|
||||||
|
playsinline
|
||||||
|
autoplay
|
||||||
|
:loop="props.videoLoop"
|
||||||
|
:muted="props.videoMuted"
|
||||||
|
:style="{
|
||||||
|
width: props.width + 'px',
|
||||||
|
height: props.height + 'px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps([
|
||||||
|
'serialNumberValue',
|
||||||
|
'width',
|
||||||
|
'height',
|
||||||
|
'timestamp',
|
||||||
|
'videoLoop',
|
||||||
|
'videoMuted',
|
||||||
|
'videoFit',
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 视频控件初始化
|
||||||
|
let player: any = null;
|
||||||
|
|
||||||
|
function handlerPlayVideo() {
|
||||||
|
nextTick(() => {
|
||||||
|
if (player) {
|
||||||
|
player.src(props.serialNumberValue);
|
||||||
|
} else {
|
||||||
|
player = TCPlayer('ZhiGan_ModalVideo' + props.timestamp, {});
|
||||||
|
player.src(props.serialNumberValue);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closePlayerVideo() {
|
||||||
|
if (player) {
|
||||||
|
player.dispose();
|
||||||
|
player = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.serialNumberValue,
|
||||||
|
() => {
|
||||||
|
handlerPlayVideo();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
handlerPlayVideo();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closePlayerVideo();
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
handlerPlayVideo,
|
||||||
|
closePlayerVideo,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
object-fit: v-bind('props.videoFit');
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .vjs-live-control .vjs-live-display {
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// 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';
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div> </div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup></script>
|
||||||
|
<style lang="less"></style>
|
||||||
Loading…
Reference in New Issue