Guoyan
/
ops-management-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图片预览下载

ops-management-platform-frontend-dev
wbc 1 week ago
parent
681286692c
commit
1bea27d6b4
8 changed files with 252 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/views/IO/workOrder/delayAudit/data.ts
  2. 49
      src/views/IO/workOrder/delayAudit/detailDrawer.vue
  3. 69
      src/views/IO/workOrder/orderAudit/detailDrawer.vue
  4. 58
      src/views/IO/workOrder/orderHandle/detailDrawer.vue
  5. 4
      src/views/IO/workOrder/orderSearch/data.ts
  6. 61
      src/views/IO/workOrder/orderSearch/detailDrawer.vue
  7. 22
      src/views/IO/workOrder/orderSearch/index.vue
  8. 65
      src/views/IO/workOrder/orderSend/detailDrawer.vue

8
src/views/IO/workOrder/delayAudit/data.ts
View File

@ -35,6 +35,14 @@ import { FormSchema } from '@/components/Form';
// },
// ];
export const formSchemas: FormSchema[] = [
{
label: '点位名称',
field: 'faultLocation',
component: 'Input',
componentProps: {
placeholder: '输入点位',
},
},
{
field: 'contractName',
label: '合同名称',

49
src/views/IO/workOrder/delayAudit/detailDrawer.vue
View File

@ -78,15 +78,17 @@
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div
><span class="titleLabel">故障图片：</span>
<a-upload v-model:file-list="fileLists" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists[0])"
v-if="fileLists.length > 0"
>下载</a-button
>
<div>
<span class="titleLabel">故障图片：</span>
<div class="file-item" v-for="file in fileLists" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -239,6 +241,32 @@
const handleDownload = async (record) => {
const data = await ossDownload(record.ossId);
downloadByData(data, record.name);
};
const preview = async (record) => {
const data = await ossDownload(record.ossId);
const objectURL = URL.createObjectURL(data);
const newWindow = window.open('', '_blank');
if (newWindow) {
// 创建 img 元素
const img = newWindow.document.createElement('img');
img.src = objectURL;
img.style.width = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// 创建一个简单的页面结构
newWindow.document.body.style.margin = '0';
newWindow.document.body.style.backgroundColor = '#000';
newWindow.document.body.style.display = 'flex';
newWindow.document.body.style.justifyContent = 'center';
newWindow.document.body.style.alignItems = 'center';
newWindow.document.body.appendChild(img);
// 图片加载完成后释放 Object URL
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
}
};
// 关闭抽屉的方法
const onClose = () => {
@ -284,7 +312,8 @@
statusText,
progress,
fileLists,
handleDownload
handleDownload,
preview
};
},
});

69
src/views/IO/workOrder/orderAudit/detailDrawer.vue
View File

@ -78,15 +78,17 @@
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div
><span class="titleLabel">故障图片：</span>
<a-upload v-model:file-list="fileLists" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists[0])"
v-if="fileLists.length > 0"
>下载</a-button
>
<div>
<span class="titleLabel">故障图片：</span>
<div class="file-item" v-for="file in fileLists" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -122,15 +124,17 @@
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div
><span class="titleLabel">处理图片：</span>
<a-upload v-model:file-list="fileLists1" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists1[0])"
v-if="fileLists1.length > 0"
>下载</a-button
>
<div>
<span class="titleLabel">处理图片：</span>
<div class="file-item" v-for="file in fileLists1" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -358,6 +362,32 @@
const handleDownload = async (record) => {
const data = await ossDownload(record.ossId);
downloadByData(data, record.name);
};
const preview = async (record) => {
const data = await ossDownload(record.ossId);
const objectURL = URL.createObjectURL(data);
const newWindow = window.open('', '_blank');
if (newWindow) {
// 创建 img 元素
const img = newWindow.document.createElement('img');
img.src = objectURL;
img.style.width = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// 创建一个简单的页面结构
newWindow.document.body.style.margin = '0';
newWindow.document.body.style.backgroundColor = '#000';
newWindow.document.body.style.display = 'flex';
newWindow.document.body.style.justifyContent = 'center';
newWindow.document.body.style.alignItems = 'center';
newWindow.document.body.appendChild(img);
// 图片加载完成后释放 Object URL
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
}
};
// 关闭抽屉的方法
const onClose = () => {
@ -410,7 +440,8 @@
progress,
fileLists,
fileLists1,
handleDownload
handleDownload,
preview
};
},
});

58
src/views/IO/workOrder/orderHandle/detailDrawer.vue
View File

@ -80,13 +80,22 @@
<a-col :span="24">
<div
><span class="titleLabel">故障图片：</span>
<a-upload v-model:file-list="fileLists" disabled> </a-upload>
<a-button
<!-- <a-upload v-model:file-list="fileLists" disabled> </a-upload> -->
<!-- <a-button
type="primary"
@click="handleDownload(fileLists[0])"
v-if="fileLists.length > 0"
>下载</a-button
>
> -->
<div class="file-item" v-for="file in fileLists" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -124,13 +133,15 @@
<a-col :span="24">
<div
><span class="titleLabel">处理图片：</span>
<a-upload v-model:file-list="fileLists1" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists1[0])"
v-if="fileLists1.length > 0"
>下载</a-button
>
<div class="file-item" v-for="file in fileLists1" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -359,6 +370,32 @@
const data = await ossDownload(record.ossId);
downloadByData(data, record.name);
};
const preview = async (record) => {
const data = await ossDownload(record.ossId);
const objectURL = URL.createObjectURL(data);
const newWindow = window.open('', '_blank');
if (newWindow) {
// 创建 img 元素
const img = newWindow.document.createElement('img');
img.src = objectURL;
img.style.width = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// 创建一个简单的页面结构
newWindow.document.body.style.margin = '0';
newWindow.document.body.style.backgroundColor = '#000';
newWindow.document.body.style.display = 'flex';
newWindow.document.body.style.justifyContent = 'center';
newWindow.document.body.style.alignItems = 'center';
newWindow.document.body.appendChild(img);
// 图片加载完成后释放 Object URL
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
}
};
// 关闭抽屉的方法
const onClose = () => {
visible.value = false;
@ -412,6 +449,7 @@
fileLists,
fileLists1,
handleDownload,
preview
};
},
});

4
src/views/IO/workOrder/orderSearch/data.ts
View File

@ -103,9 +103,9 @@ export const formSchemas: FormSchema[] = [
{
field: 'faultLocation',
label: '故障地点',
component: 'Select',
component: 'Input',
componentProps: {
options: [],
placeholder: '输入编号',
},
},
{

61
src/views/IO/workOrder/orderSearch/detailDrawer.vue
View File

@ -80,13 +80,15 @@
<a-col :span="24">
<div
><span class="titleLabel">故障图片：</span>
<a-upload v-model:file-list="fileLists" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists[0])"
v-if="fileLists.length > 0"
>下载</a-button
>
<div class="file-item" v-for="file in fileLists" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -124,13 +126,15 @@
<a-col :span="24">
<div
><span class="titleLabel">处理图片：</span>
<a-upload v-model:file-list="fileLists1" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists1[0])"
v-if="fileLists1.length > 0"
>下载</a-button
>
<div class="file-item" v-for="file in fileLists1" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -358,6 +362,32 @@
const handleDownload = async (record) => {
const data = await ossDownload(record.ossId);
downloadByData(data, record.name);
};
const preview = async (record) => {
const data = await ossDownload(record.ossId);
const objectURL = URL.createObjectURL(data);
const newWindow = window.open('', '_blank');
if (newWindow) {
// 创建 img 元素
const img = newWindow.document.createElement('img');
img.src = objectURL;
img.style.width = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// 创建一个简单的页面结构
newWindow.document.body.style.margin = '0';
newWindow.document.body.style.backgroundColor = '#000';
newWindow.document.body.style.display = 'flex';
newWindow.document.body.style.justifyContent = 'center';
newWindow.document.body.style.alignItems = 'center';
newWindow.document.body.appendChild(img);
// 图片加载完成后释放 Object URL
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
}
};
// 关闭抽屉的方法
const onClose = () => {
@ -411,7 +441,8 @@
progress,
fileLists,
fileLists1,
handleDownload
handleDownload,
preview
};
},
});

22
src/views/IO/workOrder/orderSearch/index.vue
View File

@ -83,20 +83,20 @@
});
formSchemas[4].componentProps.options = faultSubcategoryOptions.value;
};
const faultLocationOptions = ref([]);
const getFaultLocationOptions = async () => {
const res = await queryPointNames();
faultLocationOptions.value = res;
faultLocationOptions.value.forEach((i: any) => {
i.value = i.pointName;
i.label = i.pointName;
});
formSchemas[5].componentProps.options = faultLocationOptions.value;
};
// const faultLocationOptions = ref([]);
// const getFaultLocationOptions = async () => {
// const res = await queryPointNames();
// faultLocationOptions.value = res;
// faultLocationOptions.value.forEach((i: any) => {
// i.value = i.pointName;
// i.label = i.pointName;
// });
// formSchemas[5].componentProps.options = faultLocationOptions.value;
// };
const getOptions = () => {
getProjectOptions();
getFaultSubcategoryOptions();
getFaultLocationOptions();
// getFaultLocationOptions();
};
getOptions();
onActivated(() => {

65
src/views/IO/workOrder/orderSend/detailDrawer.vue
View File

@ -78,15 +78,17 @@
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div
><span class="titleLabel">故障图片：</span>
<a-upload v-model:file-list="fileLists" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists[0])"
v-if="fileLists.length > 0"
>下载</a-button
>
<div>
<span class="titleLabel">故障图片：</span>
<div class="file-item" v-for="file in fileLists" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -124,13 +126,15 @@
<a-col :span="24">
<div
><span class="titleLabel">处理图片：</span>
<a-upload v-model:file-list="fileLists1" disabled> </a-upload>
<a-button
type="primary"
@click="handleDownload(fileLists1[0])"
v-if="fileLists1.length > 0"
>下载</a-button
>
<div class="file-item" v-for="file in fileLists1" :key="file.url">
<span>{{ file.name }}</span>
<a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
下载
</a-button>
<a-button size="small" @click="preview(file)" style="margin-left: -8px">
预览
</a-button>
</div>
</div>
</a-col>
</a-row>
@ -358,6 +362,32 @@
const handleDownload = async (record) => {
const data = await ossDownload(record.ossId);
downloadByData(data, record.name);
};
const preview = async (record) => {
const data = await ossDownload(record.ossId);
const objectURL = URL.createObjectURL(data);
const newWindow = window.open('', '_blank');
if (newWindow) {
// 创建 img 元素
const img = newWindow.document.createElement('img');
img.src = objectURL;
img.style.width = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// 创建一个简单的页面结构
newWindow.document.body.style.margin = '0';
newWindow.document.body.style.backgroundColor = '#000';
newWindow.document.body.style.display = 'flex';
newWindow.document.body.style.justifyContent = 'center';
newWindow.document.body.style.alignItems = 'center';
newWindow.document.body.appendChild(img);
// 图片加载完成后释放 Object URL
img.onload = () => {
URL.revokeObjectURL(objectURL);
};
}
};
// 关闭抽屉的方法
const onClose = () => {
@ -411,7 +441,8 @@
progress,
fileLists,
fileLists1,
handleDownload
handleDownload,
preview
};
},
});

Write Preview
Loading…
Cancel
Save