HC_YFZX
/
ShiJiTianKongDiPingTai
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

两个查询-地图版，版本管理

xjl^2
滕嵩 2024-04-26 16:55:56 +08:00
parent 4c635ebc0f
commit 6476e95c42
11 changed files with 654 additions and 1333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/demo/model/queryModal.ts
View File

@ -5,7 +5,7 @@ export interface responses {
code: number;
columnHeaders: [];
count: number;
result: boolean;
result: [];
msg: string;
}
export type responsesmodel = BasicFetchResult<responses>;

6
src/api/demo/query.ts
View File

@ -6,8 +6,8 @@ enum Api {
Get_LoadCaseInfoList = '/api/DroneCaseinfo/LoadCaseInfoList',
// complete-
Get_LoadList = '/api/Categorys/LoadList',
// complete-
Get_load = '/api/categorys/load',
// 获取数据字典明显根据分类编号
Get_load = '/api/SysDataItemDetail/Load',
// complete-
Get_OrgList = '/api/Orgs/OrgList',
// complete-导出
@ -51,7 +51,7 @@ export function fun_LoadList(params) {
});
}
// complete-分页获取列表数据
// 获取数据字典明显根据分类编号
export function fun_load(params) {
return defHttp.get<responsesmodel>({
url: Api.Get_load,

29
src/api/demo/version.ts Normal file
View File

@ -0,0 +1,29 @@
import { responsesmodel } from './model/queryModal';
import { defHttp } from '@/utils/http/axios';
enum Api {
Get_GetUpdateFiles = '/api/SysAppFiles/GetUpdateFiles',
Post_Upload = '/api/Files/Upload',
Post_AddAppFiles = '/api/SysAppFiles/AddAppFiles',
}
export function fun_GetUpdateFiles(params) {
return defHttp.get<responsesmodel>({
url: Api.Get_GetUpdateFiles,
params,
});
}
export function fun_Upload(params) {
return defHttp.post<responsesmodel>({
url: Api.Post_Upload,
params,
});
}
export function fun_AddAppFiles(params) {
return defHttp.post<responsesmodel>({
url: Api.Post_AddAppFiles,
params,
});
}

1050
src/views/demo/query/complete/detailModal.vue
View File

File diff suppressed because it is too large Load Diff

30
src/views/demo/query/complete/index.vue
View File

@ -19,13 +19,13 @@
/>
</div>
<!-- 案件类型 -->
<div style="display: inline; margin-right: 10px; width: 100px">
<div style="display: inline; margin-right: 10px; width: 200px">
<a-select
:options="caseTypeOptions"
v-model:value="listQuery.typeid"
:options="caseTypeOptions"
placeholder="案件类型"
style="width: 100px"
:field-names="{ label: 'name', value: 'id' }"
style="width: 200px"
:field-names="{ label: 'itemName', value: 'itemDetailId' }"
@change="getCaseList"
/>
</div>
@ -144,7 +144,7 @@
import { useModal } from '@/components/Modal';
import dayjs, { Dayjs } from 'dayjs';
// 子组件
import DetailModal from './detailModal.vue';
import DetailModal from '@/views/demo/query/detailModal.vue';
// api
import {
fun_LoadDataBaseInfo,
@ -197,7 +197,7 @@
{ id: 2, name: '伪变化' },
];
// 案件类型
const caseTypeOptions = ref<[]>([]);
const caseTypeOptions: any = ref([]);
// 查询地区
const OrgList = ref<TreeItem[]>([]);
@ -301,8 +301,8 @@
async function exportExcelList() {
await fun_ExportCaseInfoList(listQuery.value).then((res) => {
console.log('导出', res);
if (res.code === 200) {
window.location.href = BASE_API + '/' + res.result;
if (res) {
window.location.href = BASE_API + '/' + res;
}
});
}
@ -317,17 +317,15 @@
// 初始化
async function fetch() {
getCaseList();
let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
console.log(data0);
// let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
// console.log(data0);
// 案件类型
let data1 = await fun_load({ page: 1, limit: 99, typeid: 'DRONE_CASE_TYPE' });
// caseTypeOptions.value =
console.log(data1);
caseTypeOptions.value = await fun_load({ code: 'DRONE_CASE_TYPE' });
// 查询地区
let data2 = await fun_OrgList({ name: '费县' });
// OrgList.value =
console.log(data2);
// let data2 = await fun_OrgList({ name: '费县' });
// // OrgList.value =
// console.log(data2);
}
onMounted(() => {

85
src/views/demo/query/return/detailModal.vue → src/views/demo/query/detailModal.vue
View File

@ -2,8 +2,8 @@
<BasicModal
v-bind="$attrs"
@register="registerModal"
:canFullscreen="false"
:useWrapper="false"
:canFullscreen="false"
:defaultFullscreen="false"
:showCancelBtn="false"
:showOkBtn="false"
@ -12,6 +12,7 @@
title="案件详情"
height="690"
minHeight="690"
@cancel="closeModalClick"
>
<div class="form-box">
<div>
@ -25,7 +26,7 @@
/>
<a-row>
<!-- 左侧信息 -->
<a-col :span="props.isShowMap ? 14 : 24" style="height: 100%; overflow: auto">
<a-col :span="props.isShowMap ? 14 : 24" style="height: 100%; overflow-y: auto">
<!-- 下发：【案件下发信息】 -->
<a-divider orientation="left" v-if="speed == 1 || speed == 5">
【案件下发信息】
@ -668,11 +669,11 @@
</a-col>
<!-- 右侧地图 -->
<a-col :span="props.isShowMap ? 10 : 0">
<div style="position: fixed">
<div style="width: 40%; position: fixed">
<!--【地图位置】 -->
<a-divider orientation="left" v-if="isShowMap"> 【地图位置】 </a-divider>
<div style="width: 100%" v-if="isShowMap">
<!-- <MapDetail :ruleForm="caseDetail" :currentImage="currentImage" :isOnce="true" /> -->
<div style="width: 100%; height: calc(100% - 50px); margin: 20px" v-if="isShowMap">
<MapDetail :ruleForm="caseDetail" :currentImage="currentImage" :isOnce="true" />
</div>
</div>
</a-col>
@ -687,15 +688,18 @@
import { ref, defineEmits, watch } from 'vue';
// vben
import { BasicModal, useModalInner } from '@/components/Modal';
import { ImagePreview } from '@/components/Preview';
// import { ImagePreview } from '@/components/Preview';
import MapDetail from './mapDetail.vue';
// 文件拼地址
import { useGlobSetting } from '@/hooks/setting';
// api
import { fun_getCaseInfo, fun_GetCaseFlowLog, fun_GetDroneCaseDeal } from '@/api/demo/query';
// 图片拼地址
const { uploadUrl } = useGlobSetting();
// emit
const emit = defineEmits(['close-modal', 'currentImage']);
// 导出
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
// 定义props
const props = defineProps({
isShowMap: {
@ -717,9 +721,9 @@
// 参数
let imagePreviewShow = false;
let currentImage = null;
let caseHandleInfo = {
let caseHandleInfo = ref({
info: {},
};
});
let imageList = [];
let imageList_a = [];
let videoList = [];
@ -782,8 +786,8 @@
caseDetail.value = res.info;
imageList = res.pic_list;
for (let i = 0; i < imageList.length; i++) {
imageList_a[i] = BASE_IMAGE_URL + '/' + imageList[i];
imageList[i] = BASE_IMAGE_URL + '/S_' + imageList[i];
imageList_a[i] = uploadUrl + '/' + imageList[i];
imageList[i] = uploadUrl + '/S_' + imageList[i];
}
}
console.log(imageList_a);
@ -794,16 +798,13 @@
function loadCaseHandleInfo(caseDetailId) {
fun_GetDroneCaseDeal({ caseid: caseDetailId }).then((res) => {
if (res) {
caseHandleInfo = res;
// res.is_illegal = 1;
// res.info.measure_name = '拟完善手续';
if (caseHandleInfo.is_illegal == 0) {
caseHandleInfo.is_illegal = '合法';
} else if (caseHandleInfo.is_illegal == 1) {
caseHandleInfo.is_illegal = '违法';
} else if (caseHandleInfo.is_illegal == 2) {
caseHandleInfo.is_illegal = '伪变化';
caseHandleInfo.value = res;
if (caseHandleInfo.value.is_illegal == 0) {
caseHandleInfo.value.is_illegal = '合法';
} else if (caseHandleInfo.value.is_illegal == 1) {
caseHandleInfo.value.is_illegal = '违法';
} else if (caseHandleInfo.value.is_illegal == 2) {
caseHandleInfo.value.is_illegal = '伪变化';
}
if (res.video_list.length > 0) {
@ -824,7 +825,7 @@
sources: [
{
type: '',
src: BASE_IMAGE_URL + '/' + item, //url地址
src: uploadUrl + '/' + item, //url地址
},
],
poster: '', //你的封面地址
@ -849,8 +850,8 @@
});
for (let i = 0; i < threadImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + threadImageList[i],
s_filePath: BASE_IMAGE_URL + '/S_' + threadImageList[i],
filePath: uploadUrl + '/' + threadImageList[i],
s_filePath: uploadUrl + '/S_' + threadImageList[i],
};
threadImageList[i] = obj;
}
@ -863,8 +864,8 @@
});
}
for (let i = 0; i < threadAfterImageList.length; i++) {
threadAfterImageList_a[i] = BASE_IMAGE_URL + '/' + threadAfterImageList[i];
threadAfterImageList[i] = BASE_IMAGE_URL + '/S_' + threadAfterImageList[i];
threadAfterImageList_a[i] = uploadUrl + '/' + threadAfterImageList[i];
threadAfterImageList[i] = uploadUrl + '/S_' + threadAfterImageList[i];
}
// 处理后视频
videoOptions = [];
@ -882,7 +883,7 @@
sources: [
{
type: '',
src: BASE_IMAGE_URL + '/' + item, //url地址
src: uploadUrl + '/' + item, //url地址
},
],
poster: '', //你的封面地址
@ -907,8 +908,8 @@
});
for (let i = 0; i < evidenceFileList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + evidenceFileList[i],
s_filePath: BASE_IMAGE_URL + '/' + evidenceFileList[i],
filePath: uploadUrl + '/' + evidenceFileList[i],
s_filePath: uploadUrl + '/' + evidenceFileList[i],
};
evidenceFileList[i] = obj;
}
@ -920,8 +921,8 @@
});
for (let i = 0; i < boundaryImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + boundaryImageList[i],
s_filePath: BASE_IMAGE_URL + '/' + boundaryImageList[i],
filePath: uploadUrl + '/' + boundaryImageList[i],
s_filePath: uploadUrl + '/' + boundaryImageList[i],
};
console.log('boundary', obj);
boundaryImageList[i] = obj;
@ -936,8 +937,8 @@
});
for (let i = 0; i < punishImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + punishImageList[i],
s_filePath: BASE_IMAGE_URL + '/S_' + punishImageList[i],
filePath: uploadUrl + '/' + punishImageList[i],
s_filePath: uploadUrl + '/S_' + punishImageList[i],
};
punishImageList[i] = obj;
}
@ -950,8 +951,8 @@
});
for (let i = 0; i < paymentImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + paymentImageList[i],
s_filePath: BASE_IMAGE_URL + '/S_' + paymentImageList[i],
filePath: uploadUrl + '/' + paymentImageList[i],
s_filePath: uploadUrl + '/S_' + paymentImageList[i],
};
paymentImageList[i] = obj;
}
@ -964,8 +965,8 @@
});
for (let i = 0; i < agreeImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + agreeImageList[i],
s_filePath: BASE_IMAGE_URL + '/S_' + agreeImageList[i],
filePath: uploadUrl + '/' + agreeImageList[i],
s_filePath: uploadUrl + '/S_' + agreeImageList[i],
};
agreeImageList[i] = obj;
}
@ -978,12 +979,12 @@
});
for (let i = 0; i < checkoutImageList.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + checkoutImageList[i],
s_filePath: BASE_IMAGE_URL + '/S_' + checkoutImageList[i],
filePath: uploadUrl + '/' + checkoutImageList[i],
s_filePath: uploadUrl + '/S_' + checkoutImageList[i],
};
checkoutImageList[i] = obj;
// checkoutImageList_a[i] =BASE_IMAGE_URL+"/"+checkoutImageList[i];
// checkoutImageList[i] =BASE_IMAGE_URL+"/S_"+checkoutImageList[i];
// checkoutImageList_a[i] =uploadUrl+"/"+checkoutImageList[i];
// checkoutImageList[i] =uploadUrl+"/S_"+checkoutImageList[i];
}
}
}

4
src/views/demo/query/complete/mapDetail.vue → src/views/demo/query/mapDetail.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w-full">
<MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
<MapboxMaps :mapOptions="mapOptions" :control="[]" @map-on-load="mapOnLoad" />
</div>
</template>
<script lang="ts" setup>
@ -8,6 +8,7 @@
import { ref, watch } from 'vue';
import MapboxMaps from '@/components/MapboxMaps/index.vue';
import { getDroneGeoJson } from '@/api/monitor/index';
const detailMap = ref();
const props = defineProps({
ruleForm: {
@ -199,7 +200,6 @@
</script>
<style scoped lang="less">
.w-full {
width: 100%;
height: 50vh;
}
</style>

24
src/views/demo/query/return/index.vue
View File

@ -19,13 +19,13 @@
/>
</div>
<!-- 案件类型 -->
<div style="display: inline; margin-right: 10px; width: 100px">
<div style="display: inline; margin-right: 10px; width: 200px">
<a-select
:options="caseTypeOptions"
v-model:value="listQuery.typeid"
placeholder="案件类型"
style="width: 100px"
:field-names="{ label: 'name', value: 'id' }"
style="width: 200px"
:field-names="{ label: 'itemName', value: 'itemDetailId' }"
@change="getCaseList"
/>
</div>
@ -136,7 +136,7 @@
import { useModal } from '@/components/Modal';
import dayjs, { Dayjs } from 'dayjs';
// 子组件
import DetailModal from './detailModal.vue';
import DetailModal from '@/views/demo/query/detailModal.vue';
// api
import {
fun_LoadDataBaseInfo,
@ -189,7 +189,7 @@
{ id: 2, name: '伪变化' },
];
// 案件类型
const caseTypeOptions = ref<[]>([]);
const caseTypeOptions: any = ref([]);
// 查询地区
const OrgList = ref<TreeItem[]>([]);
@ -309,17 +309,15 @@
// 初始化
async function fetch() {
getCaseList();
let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
console.log(data0);
// let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
// 案件类型
let data1 = await fun_load({ page: 1, limit: 99, typeid: 'DRONE_CASE_TYPE' });
// caseTypeOptions.value =
console.log(data1);
caseTypeOptions.value = await fun_load({ code: 'DRONE_CASE_TYPE' });
// 查询地区
let data2 = await fun_OrgList({ name: '费县' });
// OrgList.value =
console.log(data2);
// let data2 = await fun_OrgList({ name: '费县' });
// // OrgList.value =
// console.log(data2);
}
onMounted(() => {

205
src/views/demo/query/return/mapDetail.vue
View File

@ -1,205 +0,0 @@
<template>
<div class="w-full">
<MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
</div>
</template>
<script lang="ts" setup>
import rodeImg from '@/assets/images/icon_fly2.png';
import { ref, watch } from 'vue';
import MapboxMaps from '@/components/MapboxMaps/index.vue';
import { getDroneGeoJson } from '@/api/monitor/index';
const detailMap = ref();
const props = defineProps({
ruleForm: {
type: Object,
default: () => {
return {};
},
},
});
const geojson = ref();
const droneMarker = ref();
const mapBox = ref();
const mapOptions = {
center: [117.84714891969796, 35.22152309532066],
zoom: 10,
};
watch(
() => props.ruleForm,
(newVal, oldVal) => {
console.log(newVal);
loadCaseGeoJson();
detailMap.value.flyTo({
center: [newVal.lng, newVal.lat], // 中心点
zoom: 18, // 缩放比例
pitch: 0, // 倾斜度
});
loadDroneMarker(newVal.lng, newVal.lat);
},
);
const mapOnLoad = (map) => {
mapBox.value = map;
// 测试地址
const testSource =
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
map.U.addVector('name', testSource);
map.U.addLineLayer('ffff', {
source: 'name',
'source-layer': 'lindi',
});
detailMap.value = map;
loadImageLayer();
loadStreetBorderLayer();
loadCaseGeoJson();
};
// 费县图斑
function loadImageLayer() {
detailMap.value.addLayer({
id: 'wms-test-layer',
type: 'raster',
source: {
type: 'raster',
tiles: [
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
],
tileSize: 256,
},
paint: {},
});
}
// 费县镇界
function loadStreetBorderLayer() {
detailMap.value.addLayer({
id: 'street-border',
type: 'raster',
source: {
type: 'raster',
tiles: [
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
],
tileSize: 256,
},
paint: {},
layout: {
visibility: 'visible',
},
});
detailMap.value.resize();
}
// 获取GeoJSON图层
async function loadCaseGeoJson() {
const data = await getDroneGeoJson({ id: props.ruleForm.info.id });
console.log(data);
geojson.value = data;
if (geojson.value.features.length == 0) {
detailMap.value.addLayer({
id: 'points',
type: 'symbol',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [props.ruleForm.info.lng, props.ruleForm.info.lng],
},
properties: {
title: 'Mapbox DC',
icon: 'monument',
},
},
],
},
},
layout: {},
});
}
// 报错的修改方法There is already a source with ID "geojsonfill"
if (detailMap.value.getLayer('geojsonfill')) {
detailMap.value.removeLayer('geojsonfill');
detailMap.value.removeSource('geojsonfill');
}
if (detailMap.value.getLayer('geojsonline')) {
detailMap.value.removeLayer('geojsonline');
detailMap.value.removeSource('geojsonline');
}
detailMap.value.addLayer({
id: 'geojsonfill',
type: 'fill',
source: {
type: 'geojson',
data: geojson.value,
},
paint: {
'fill-color': '#FE9003',
'fill-opacity': 0.2,
'fill-outline-color': '#FE9003',
},
});
detailMap.value.addLayer({
id: 'geojsonline',
type: 'line',
source: {
type: 'geojson',
data: geojson.value,
},
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#FE9003',
'line-width': 4,
},
});
}
// 案件位置显示无人机图标
function loadDroneMarker(lng, lat) {
if (detailMap.value.getLayer('cat-on-building')) {
detailMap.value.removeLayer('cat-on-building');
detailMap.value.removeSource('cat-on-building');
detailMap.value.removeImage('cat');
}
detailMap.value.loadImage(rodeImg, (error, image) => {
detailMap.value.addImage('cat', image);
detailMap.value.addLayer({
id: 'cat-on-building',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat],
},
},
],
},
},
slot: 'top',
type: 'symbol',
layout: {
'icon-image': 'cat',
'icon-size': 0.05,
'symbol-placement': 'point',
'symbol-z-elevate': true,
},
});
});
}
</script>
<style scoped lang="less">
.w-full {
width: 100%;
height: 50vh;
}
</style>

272
src/views/demo/system/version/index.vue Normal file
View File

@ -0,0 +1,272 @@
<template>
<div style="padding: 24px; overflow-y: hidden">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="zhifa" tab="执法端APP">
<div class="flex-column">
<a-row style="overflow-y: hidden">
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
<a-form
ref="form"
:model="form"
labelAlign="right"
label-width="80px"
:label-col="labelCol"
:wrapper-col="wrapperCol"
size="mini"
>
<a-form-item label="当前版本">
<span style="font-size: 15px; font-weight: bold; color: #000">
<a-input v-model:value="currentAppInfo.edition" disabled="true" />
</span>
</a-form-item>
<a-form-item label="版本号">
<a-input v-model:value="form.edition" />
</a-form-item>
<a-form-item label="项目名称">
<a-input v-model:value="form.project_name" />
</a-form-item>
<a-form-item label="上传">
<a-upload-dragger
v-model:fileList="fileList"
action="#"
name="file"
:maxCount="limit"
:multiple="false"
:previewFile="handlePreview"
:beforeUpload="beforeUpload"
:remove="handleRemove"
@change="handleChange"
@drop="handleDrop"
>
<Icon icon="ant-design:cloud-download-outlined" :size="16" color="blue" />
<p class="ant-upload-text">点击或拖拽文件至此处以上传</p>
</a-upload-dragger>
</a-form-item>
<a-form-item label="描述信息">
<a-input type="textarea" v-model:value="form.description" />
</a-form-item>
<a-form-item label="是否必须更新" label-width="120px">
<a-radio-group v-model:value="form.must_update" size="medium">
<a-radio border :value="1">是</a-radio>
<a-radio border :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="onSubmit">立即创建</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</div>
</a-tab-pane>
<a-tab-pane key="feikong" tab="飞控端APP">
<div class="flex-column">
<a-row style="overflow-y: hidden">
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
<a-form
ref="form"
:model="flyControlForm"
labelAlign="right"
label-width="80px"
:label-col="labelCol"
:wrapper-col="wrapperCol"
size="mini"
>
<a-form-item label="当前版本">
<span style="font-size: 15px; font-weight: bold; color: #000">
<a-input disabled="true" />
</span>
</a-form-item>
<a-form-item label="版本号">
<a-input v-model:value="flyControlForm.edition" />
</a-form-item>
<a-form-item label="项目名称">
<a-input v-model:value="flyControlForm.project_name" />
</a-form-item>
<a-form-item label="描述信息">
<a-input type="textarea" v-model:value="flyControlForm.description" />
</a-form-item>
<a-form-item label="是否必须更新" label-width="120px">
<a-radio-group v-model:value="flyControlForm.must_update" size="medium">
<a-radio border :value="1">是</a-radio>
<a-radio border :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</div>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
// api
import { fun_GetUpdateFiles, fun_Upload, fun_AddAppFiles } from '@/api/demo/version';
//上传文件
import { uploadApi } from '@/api/sys/upload';
const { createMessage } = useMessage();
// 表单栅格
const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
let currentAppInfo = {};
let activeKey = ref('zhifa');
let limit = 1;
let fileList = ref([]);
let form = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
let flyControlForm = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
async function getAppInfo() {
fun_GetUpdateFiles({ project: 'drone_enforcement' }).then((res) => {
if (res) {
currentAppInfo = res;
form.project_name = res.project_name;
}
});
}
//文件上传时的钩子
function handlePreview() {}
// 删除文件
function handleRemove(file, filelist) {
fileList.value = filelist;
}
// 文件上传成功
function handleSuccess(res, file, filelist) {
createMessage.success('文件上传成功');
}
// 文件上传失败
function handleError() {
createMessage.error('文件上传失败');
}
// 文件超出个数限制
function handleExceed() {
createMessage.warn(`只能选择 ${limit} 个文件进行上传!!`);
}
// 文件状态改变
function handleChange(file, filelist) {
form.name = file.name.split('.')[0];
if (file) {
fileList.value = filelist;
}
}
// 上传之前
function beforeUpload(file) {
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
let size = file.size / 1024 / 1024;
if (extension !== 'apk') {
createMessage.warn('只能上传后缀是.apk的文件');
return false;
}
if (size > 100) {
createMessage.warn('文件大小不得超过100M');
return false;
}
return true;
}
function onSubmit() {
let formData = new FormData();
fileList.value.forEach((item) => {
formData.append('files', item.raw);
});
if (fileList.value.length === 0) {
createMessage.warn(`请选择上传文件!!`);
return;
}
fun_Upload(formData).then((res) => {
if (res) {
form.filepath = res[0].filePath;
fun_AddAppFiles(form).then((res2) => {
if (res2) {
createMessage.warn(`上传成功`);
form = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
fileList.value = [];
} else {
createMessage.warn(`接口错误!!`);
}
});
} else {
createMessage.warning(`接口错误!!`);
}
});
}
function onFlyControlSubmit() {
let formData = new FormData();
fileList.value.forEach((item) => {
formData.append('files', item.raw);
});
if (fileList.value.length === 0) {
createMessage.warn(`请选择上传文件!!`);
return;
}
fun_Upload(formData).then((res) => {
if (res) {
flyControlForm.filepath = res[0].filePath;
fun_AddAppFiles(flyControlForm).then((res2) => {
if (res2) {
createMessage.warn(`上传成功`);
flyControlForm = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
fileList.value = [];
} else {
createMessage.warn(`接口错误!!`);
}
});
} else {
createMessage.warn(`接口错误!!`);
}
});
}
async function fetch() {
getAppInfo();
}
onMounted(() => {
fetch();
});
</script>
<style scoped>
/deep/.el-upload-dragger {
height: 100px;
line-height: 20px;
}
/deep/ .el-icon-upload {
}
/deep/.el-upload__text {
}
</style>

278
src/views/demo/system/version/version copy.vue Normal file
View File

@ -0,0 +1,278 @@
<template>
<div style="padding: 24px; overflow-y: hidden">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="执法端APP" name="zhifa">
<div class="flex-column">
<el-row style="overflow-y: hidden">
<el-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
<el-form ref="form" :model="form" label-width="80px" size="mini">
<el-form-item label="当前版本">
<span style="font-size: 15px; font-weight: bold; color: #000">{{
currentAppInfo.edition
}}</span>
</el-form-item>
<el-form-item label="版本号">
<el-input v-model="form.edition"></el-input>
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="form.project_name"></el-input>
</el-form-item>
<el-form-item size="mini">
<el-upload
size="mini"
class="upload-demo"
action="#"
drag
:limit="limit"
:on-preview="handlePreview"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
>
<i class="el-icon-upload" style="font-size: 60px; line-height: 0px"></i>
<div class="el-upload__text">将APP文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
<el-form-item label="描述信息">
<el-input type="textarea" v-model="form.description"></el-input>
</el-form-item>
<el-form-item label="是否必须更新" label-width="120px">
<el-radio-group v-model="form.must_update" size="medium">
<el-radio border :label="1">是</el-radio>
<el-radio border :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="飞控端APP" name="feikong">
<div class="flex-column">
<el-row style="overflow-y: hidden; padding-bottom: 50px">
<el-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
<el-form ref="form" :model="flyControlForm" label-width="80px" size="mini">
<el-form-item label="当前版本">
<span style="font-size: 15px; font-weight: bold; color: #000"></span>
</el-form-item>
<el-form-item label="版本号">
<el-input v-model="flyControlForm.edition"></el-input>
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="flyControlForm.project_name"></el-input>
</el-form-item>
<el-form-item>
<el-upload
class="upload-demo"
action="#"
drag
:limit="limit"
:on-preview="handlePreview"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
>
<i class="el-icon-upload" style="font-size: 60px; line-height: 0px"></i>
<div class="el-upload__text">将APP文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
<el-form-item label="描述信息">
<el-input type="textarea" v-model="flyControlForm.description"></el-input>
</el-form-item>
<el-form-item label="是否必须更新" label-width="120px">
<el-radio-group v-model="flyControlForm.must_update" size="medium">
<el-radio border :label="1">是</el-radio>
<el-radio border :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onFlyControlSubmit">立即创建</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { postMethodCommon, getMethodCommon } from '../../api/common';
export default {
name: 'version',
data() {
return {
currentAppInfo: {},
activeName: 'zhifa',
limit: 1,
fileList: [],
form: {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
},
flyControlForm: {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
},
};
},
mounted() {
this.getAppInfo();
},
methods: {
getAppInfo() {
getMethodCommon('/TaxProductEquipment/GetUpdateFiles', {
project: 'drone_enforcement',
}).then((res) => {
if (res.code == 200) {
this.currentAppInfo = res.result;
this.form.project_name = res.result.project_name;
}
});
},
//文件上传时的钩子
handlePreview(file) {},
// 删除文件
handleRemove(file, fileList) {
this.fileList = fileList;
},
// 文件上传成功
handleSuccess(res, file, fileList) {
this.$message.success('文件上传成功');
},
// 文件超出个数限制
handleExceed(files, fileList) {
this.$message.warning(`只能选择 ${this.limit} 个文件进行上传!!`);
},
// 文件状态改变
handleChange(file, fileList) {
this.form.name = file.name.split('.')[0];
if (file) {
this.fileList = fileList;
}
},
// 文件上传失败
handleError(err, file, fileList) {
this.$message.error('文件上传失败');
},
beforeUpload(file) {
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
let size = file.size / 1024 / 1024;
if (extension !== 'apk') {
this.$message.warning('只能上传后缀是.apk的文件');
return false;
}
if (size > 100) {
this.$message.warning('文件大小不得超过100M');
return false;
}
return true;
},
onSubmit() {
let _this = this;
let formData = new FormData();
this.fileList.forEach((item) => {
formData.append('files', item.raw);
});
if (this.fileList.length === 0) {
this.$message.warning(`请选择上传文件!!`);
return;
}
let url = `/Files/Upload`;
postMethodCommon(url, formData).then((res) => {
if (res.code === 200) {
_this.form.filepath = res.result[0].filePath;
postMethodCommon('/TaxProductEquipment/AddAppFiles', _this.form).then((res2) => {
if (res2.code === 200) {
_this.$message.warning(`上传成功`);
_this.form = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
_this.fileList = [];
} else {
_this.$message.warning(`接口错误!!`);
}
});
} else {
_this.$message.warning(`接口错误!!`);
}
});
},
onFlyControlSubmit() {
let _this = this;
let formData = new FormData();
this.fileList.forEach((item) => {
formData.append('files', item.raw);
});
if (this.fileList.length === 0) {
this.$message.warning(`请选择上传文件!!`);
return;
}
let url = `/Files/Upload`;
postMethodCommon(url, formData).then((res) => {
if (res.code === 200) {
_this.flyControlForm.filepath = res.result[0].filePath;
postMethodCommon('/TaxProductEquipment/AddAppFiles', _this.flyControlForm).then(
(res2) => {
if (res2.code === 200) {
_this.$message.warning(`上传成功`);
_this.flyControlForm = {
edition: '',
description: '',
filepath: '',
must_update: '',
project_name: '',
};
_this.fileList = [];
} else {
_this.$message.warning(`接口错误!!`);
}
},
);
} else {
_this.$message.warning(`接口错误!!`);
}
});
},
},
};
</script>
<style scoped>
/deep/.el-upload-dragger {
height: 100px;
line-height: 20px;
}
/deep/ .el-icon-upload {
}
/deep/.el-upload__text {
}
</style>