Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
231be12de0
|
|
@ -132,6 +132,8 @@ enum Api {
|
|||
GeoStyleBindLayer = '/api/GeoStyle/BindLayer',
|
||||
// 非法采矿-统计列表
|
||||
CaseOffenceMinerals = '/api/DroneCaseInfoMinerals/CaseOffenceMinerals',
|
||||
// 非法采矿-统计列表New
|
||||
CaseOffenceMineralsNew = '/api/DroneCaseInfoMinerals/CaseOffenceMineralsNew',
|
||||
}
|
||||
export const getPositionsTree = (params?: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.PositionsTree, params });
|
||||
|
|
@ -495,4 +497,7 @@ export const GeoStylePage = (params) =>
|
|||
defHttp.get({ url: Api.GeoStylePage, params });
|
||||
// 非法采矿-统计列表
|
||||
export const CaseOffenceMinerals = (params: ReportParams) =>
|
||||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMinerals, params });
|
||||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMinerals, params });
|
||||
// 非法采矿-统计列表New
|
||||
export const CaseOffenceMineralsNew = (params: ReportParams) =>
|
||||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMineralsNew, params });
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="show-map-div">
|
||||
<div class="select-menu">
|
||||
<div class="add-on-map" v-if="selectType !== 2">
|
||||
<div class="add-on-map">
|
||||
<a-checkbox v-model:checked="addOnMap" @change="(e) => addOnMapChange(e.target.checked)">
|
||||
叠加到地图
|
||||
</a-checkbox>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<a-radio-group v-model:value="selectType" button-style="solid" size="small">
|
||||
<a-radio-button :value="0">专题图</a-radio-button>
|
||||
<!-- <a-radio-button :value="1">截图</a-radio-button> -->
|
||||
<a-radio-button :value="2">天地图</a-radio-button>
|
||||
<!-- <a-radio-button :value="2">天地图</a-radio-button> -->
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div class="slider-menu">
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
</a-tooltip> -->
|
||||
</div>
|
||||
<div class="expandShow-menu">
|
||||
<FullscreenOutlined
|
||||
v-if="(addOnMap || selectType == 2) && !expandShow"
|
||||
<FullscreenOutlined
|
||||
v-if="addOnMap && !expandShow"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
fontSize: '28px',
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
@click="expand(!expandShow)"
|
||||
/>
|
||||
<FullscreenExitOutlined
|
||||
v-if="(addOnMap || selectType == 2) && expandShow"
|
||||
v-if="addOnMap && expandShow"
|
||||
:style="{
|
||||
position: 'fixed',
|
||||
fontSize: '35px',
|
||||
|
|
@ -93,8 +93,9 @@
|
|||
@click="expand(!expandShow)"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="selectType === 0 && !addOnMap">
|
||||
<a-image
|
||||
<template v-if="selectType === 0">
|
||||
<a-image
|
||||
v-if="!addOnMap"
|
||||
:width="470"
|
||||
:height="470"
|
||||
:src="convertValidUrl(showData.url)"
|
||||
|
|
@ -105,24 +106,24 @@
|
|||
</template>
|
||||
<template v-if="selectType === 1 && !addOnMap">
|
||||
<a-image
|
||||
v-if="!addOnMap"
|
||||
:width="470"
|
||||
:height="470"
|
||||
:src="convertValidUrl(showData.urlxian)"
|
||||
:src="convertValidUrl(showData.urlxian)"
|
||||
:preview="{
|
||||
src: showData.previewUrlXian,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="selectType === 2 || addOnMap">
|
||||
<ModalMap
|
||||
:width="modalMapWidth"
|
||||
:height="modalMapHeight"
|
||||
:zIndex="modalMapZIndex"
|
||||
:position="modalMapPosition"
|
||||
:centerAndZoom="props.data"
|
||||
@getMap="getMap"
|
||||
/>
|
||||
</template>
|
||||
<ModalMap
|
||||
v-if="addOnMap"
|
||||
:width="modalMapWidth"
|
||||
:height="modalMapHeight"
|
||||
:zIndex="modalMapZIndex"
|
||||
:position="modalMapPosition"
|
||||
:centerAndZoom="props.data"
|
||||
@getMap="getMap"
|
||||
/>
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="土地分类">
|
||||
|
|
@ -134,7 +135,6 @@
|
|||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="耕地占用">
|
||||
<ShowTableList
|
||||
v-if="props.data.length > 1"
|
||||
:columns="landPlanningColumns"
|
||||
:data="plowLandOccupyTable"
|
||||
:title="'土地规划查询结果'"
|
||||
|
|
@ -145,66 +145,61 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, computed, watch, onMounted } from 'vue';
|
||||
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue';
|
||||
import {
|
||||
PlusCircleOutlined,
|
||||
MinusCircleOutlined,
|
||||
ExpandOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined
|
||||
PlusCircleOutlined,
|
||||
MinusCircleOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue';
|
||||
import ModalMap from './ModalMap/index.vue';
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
// 图片路径拼接
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import { result } from 'node_modules/@types/lodash-es';
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||||
|
||||
const props = defineProps(['data']);
|
||||
const basciQuery = ref([]);
|
||||
|
||||
let map;
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
activeKey.value = '1';
|
||||
}
|
||||
});
|
||||
|
||||
// 正则表达式验证URL，转换
|
||||
function convertValidUrl(url: string): boolean {
|
||||
const regex =
|
||||
/^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
|
||||
let result: any = regex.test(url) ? url : VITE_GLOB_API_URL_VAR.value + url;
|
||||
return result;
|
||||
}
|
||||
|
||||
// 土地分类和耕地占用
|
||||
const activeKey = ref('1');
|
||||
// 是否叠加到地图
|
||||
const addOnMap = ref(true);
|
||||
// 专题图、截图、天地图
|
||||
const selectType = ref(0);
|
||||
|
||||
watch(
|
||||
// 土地分类和耕地占用
|
||||
() => activeKey.value,
|
||||
() => {
|
||||
if (addOnMap.value) {
|
||||
// 移除旧的图层和源
|
||||
if(map) {
|
||||
if (map.getLayer('radar-layer')) {
|
||||
map.removeLayer('radar-layer');
|
||||
}
|
||||
if (map.getSource('radar')) {
|
||||
map.removeSource('radar');
|
||||
}
|
||||
}
|
||||
}
|
||||
// 查看结果进入就显示叠加的图
|
||||
addOnMapChange(true);
|
||||
selectType.value = 2;
|
||||
addOnMap.value = false;
|
||||
if (addOnMap.value) {
|
||||
addOnMapChange(true);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
// 专题图、截图、天地图
|
||||
() => selectType.value,
|
||||
() => {
|
||||
// 查看结果进入就显示叠加的图
|
||||
if (addOnMap.value) {
|
||||
addOnMapChange(true);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 表格数据
|
||||
const landClassifyTable = computed(() => {
|
||||
let data;
|
||||
props.data?.forEach((item, index) => {
|
||||
if (item.name == '土地分类') {
|
||||
data = { ...item };
|
||||
}
|
||||
// 第一次打开
|
||||
if (index == 0) {
|
||||
// 移动位置
|
||||
let fourpoint = JSON.parse(`[${item.fourpoint}]`);
|
||||
setTimeout(() => {
|
||||
moveLocation(fourpoint);
|
||||
|
|
@ -212,31 +207,31 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
// 查看结果进入就显示叠加的图
|
||||
addOnMapChange(true);
|
||||
}
|
||||
if (item.name == '土地分类') {
|
||||
data = { ...item };
|
||||
}
|
||||
if(item.url){
|
||||
changeTransparentColorToWhite(convertValidUrl(item.url)).then(resultImageUrl => {
|
||||
// 生成白色底色的预览图片
|
||||
if (item.url && !item.previewUrl) {
|
||||
changeTransparentColorToWhite(convertValidUrl(item.url)).then((resultImageUrl) => {
|
||||
item.previewUrl = resultImageUrl;
|
||||
});
|
||||
}
|
||||
if(item.urlxian){
|
||||
changeTransparentColorToWhite(convertValidUrl(item.urlxian)).then(resultImageUrl => {
|
||||
if (item.urlxian && !item.previewUrlXian) {
|
||||
changeTransparentColorToWhite(convertValidUrl(item.urlxian)).then((resultImageUrl) => {
|
||||
item.previewUrlXian = resultImageUrl;
|
||||
});
|
||||
}
|
||||
});
|
||||
return data && data.list;
|
||||
});
|
||||
|
||||
const plowLandOccupyTable = computed(() => {
|
||||
let data;
|
||||
props.data?.forEach((item) => {
|
||||
if (item.name == '耕地占用') {
|
||||
data = { ...item };
|
||||
data = { ...item };
|
||||
}
|
||||
});
|
||||
return data && data.list;
|
||||
});
|
||||
|
||||
const showData = computed(() => {
|
||||
let data;
|
||||
switch (activeKey.value) {
|
||||
|
|
@ -256,9 +251,7 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
const addOnMap = ref(false);
|
||||
const selectType = ref(2);
|
||||
// 表格结构
|
||||
const landClassificationColumns = [
|
||||
{
|
||||
title: '地类名称',
|
||||
|
|
@ -272,7 +265,7 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
title: '联合属性',
|
||||
dataIndex: 'stats',
|
||||
key: 'stats',
|
||||
width: 90,
|
||||
width: 100,
|
||||
sorter: (a, b) => a.stats.length - b.stats.length,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
|
|
@ -280,7 +273,7 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
title: '面积（亩）',
|
||||
dataIndex: 'area',
|
||||
key: 'area',
|
||||
width: 200,
|
||||
width: 150,
|
||||
sorter: (a, b) => a.area - b.area,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
|
|
@ -305,7 +298,7 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
map = value;
|
||||
};
|
||||
|
||||
// 定义预加载图片的方法
|
||||
// 定义预加载图片的方法------------------------------------------------------------------------------------------------
|
||||
const addOnMapChange = (value) => {
|
||||
setTimeout(async () => {
|
||||
let url: any = '';
|
||||
|
|
@ -333,6 +326,7 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
url = convertValidUrl(data.urlxian);
|
||||
fourpoint = JSON.parse(`[${data.fourpoint}]`);
|
||||
}
|
||||
// 图片预加载
|
||||
let image = new Image();
|
||||
image.crossOrigin = 'anonymous';
|
||||
image.src = url;
|
||||
|
|
@ -341,18 +335,14 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
const canvas = document.createElement('canvas');
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
|
||||
// 获取Canvas绘图上下文
|
||||
const ctx = canvas.getContext('2d');
|
||||
// 在Canvas上绘制图片
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height);
|
||||
|
||||
// 将Canvas内容转换为图片的数据URL
|
||||
const dataURL = canvas.toDataURL('image/png');
|
||||
|
||||
|
||||
// 移除旧的图层和源
|
||||
if(map) {
|
||||
if (map) {
|
||||
if (map.getLayer('radar-layer')) {
|
||||
map.removeLayer('radar-layer');
|
||||
}
|
||||
|
|
@ -360,11 +350,10 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
map.removeSource('radar');
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新的源和图层
|
||||
map.addSource('radar', {
|
||||
type: 'image',
|
||||
url: dataURL,
|
||||
url: url,
|
||||
coordinates: fourpoint,
|
||||
paint: {
|
||||
'raster-opacity': 1,
|
||||
|
|
@ -412,7 +401,6 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
const nw = points[0];
|
||||
const ne = points[1];
|
||||
const se = points[2];
|
||||
const sw = points[3];
|
||||
const latRange = Math.abs(nw[1] - se[1]);
|
||||
const lngRange = Math.abs(nw[0] - ne[0]);
|
||||
// 计算缩放级别
|
||||
|
|
@ -422,7 +410,82 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
return Math.min(zoomLat * 1.05, zoomLng * 1.05).toFixed(2);
|
||||
}
|
||||
|
||||
// 透明度------------------------------------------------
|
||||
// 全屏--------------------------------------------------------------------------------------------------------------
|
||||
const modalMapWidth = ref('470px');
|
||||
const modalMapHeight = ref('470px');
|
||||
const modalMapZIndex = ref(10);
|
||||
const modalMapPosition = ref('absolute');
|
||||
const expandShow = ref(false);
|
||||
// 全屏
|
||||
function expand(value) {
|
||||
if (value) {
|
||||
modalMapWidth.value = '100%';
|
||||
modalMapHeight.value = '100%';
|
||||
modalMapZIndex.value = 1011;
|
||||
modalMapPosition.value = 'fixed';
|
||||
} else {
|
||||
modalMapWidth.value = '470px';
|
||||
modalMapHeight.value = '470px';
|
||||
modalMapZIndex.value = 10;
|
||||
modalMapPosition.value = 'absolute';
|
||||
}
|
||||
setTimeout(() => {
|
||||
map.resize();
|
||||
}, 100);
|
||||
expandShow.value = value;
|
||||
}
|
||||
|
||||
// 图片------------------------------------------------------------------------------------------------------------
|
||||
// 正则表达式验证URL，转换
|
||||
function convertValidUrl(url: string): boolean {
|
||||
const regex =
|
||||
/^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
|
||||
let result: any = regex.test(url) ? url : VITE_GLOB_API_URL_VAR.value + url;
|
||||
return result;
|
||||
}
|
||||
// 预览变成白色的底色
|
||||
async function changeTransparentColorToWhite(imageUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 创建一个新的 Image 对象
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'Anonymous'; // 处理跨域问题
|
||||
img.src = imageUrl;
|
||||
img.onload = () => {
|
||||
// 创建一个 canvas 元素
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
// 设置 canvas 的尺寸与图片相同
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
// 将图片绘制到 canvas 上
|
||||
ctx.drawImage(img, 0, 0);
|
||||
// 获取 canvas 的图像数据
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
const data = imageData.data;
|
||||
// 遍历每个像素，将透明部分变成白色
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
if (data[i + 3] === 0) {
|
||||
// 如果 alpha 通道为 0（完全透明）
|
||||
data[i] = 255; // 红色通道
|
||||
data[i + 1] = 255; // 绿色通道
|
||||
data[i + 2] = 255; // 蓝色通道
|
||||
data[i + 3] = 255; // alpha 通道（不透明）
|
||||
}
|
||||
}
|
||||
// 将修改后的图像数据放回 canvas
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
// 将 canvas 内容转换为图片数据 URL
|
||||
const resultImageUrl = canvas.toDataURL('image/png');
|
||||
// 返回处理后的新图片的 URL
|
||||
resolve(resultImageUrl);
|
||||
};
|
||||
img.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 透明度-----------------------------------------------------------------------------------------------------------
|
||||
const nowSliderValue = ref<number>(10);
|
||||
// 标识
|
||||
const marks = ref<Record<number, any>>({
|
||||
|
|
@ -453,72 +516,6 @@ import { result } from 'node_modules/@types/lodash-es';
|
|||
function changeSliderShow() {
|
||||
sliderShow.value = !sliderShow.value;
|
||||
}
|
||||
|
||||
// 全屏-------------------------------------------------------
|
||||
const modalMapWidth = ref('470px');
|
||||
const modalMapHeight = ref('470px');
|
||||
const modalMapZIndex = ref(10);
|
||||
const modalMapPosition = ref('absolute');
|
||||
const expandShow = ref(false);
|
||||
function expand(value) {
|
||||
if (value) {
|
||||
modalMapWidth.value = '100%';
|
||||
modalMapHeight.value = '100%';
|
||||
modalMapZIndex.value = 1011;
|
||||
modalMapPosition.value = 'fixed';
|
||||
} else {
|
||||
modalMapWidth.value = '470px';
|
||||
modalMapHeight.value = '470px';
|
||||
modalMapZIndex.value = 10;
|
||||
modalMapPosition.value = 'absolute';
|
||||
}
|
||||
|
||||
setTimeout(()=>{
|
||||
map.resize();
|
||||
}, 100);
|
||||
expandShow.value = value;
|
||||
}
|
||||
|
||||
// 预览变成白色的底色
|
||||
async function changeTransparentColorToWhite(imageUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 创建一个新的 Image 对象
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'Anonymous'; // 处理跨域问题
|
||||
img.src = imageUrl;
|
||||
img.onload = () => {
|
||||
// 创建一个 canvas 元素
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
// 设置 canvas 的尺寸与图片相同
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
// 将图片绘制到 canvas 上
|
||||
ctx.drawImage(img, 0, 0);
|
||||
// 获取 canvas 的图像数据
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
const data = imageData.data;
|
||||
// 遍历每个像素，将透明部分变成白色
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
if (data[i + 3] === 0) { // 如果 alpha 通道为 0（完全透明）
|
||||
data[i] = 255; // 红色通道
|
||||
data[i + 1] = 255; // 绿色通道
|
||||
data[i + 2] = 255; // 蓝色通道
|
||||
data[i + 3] = 255; // alpha 通道（不透明）
|
||||
}
|
||||
}
|
||||
// 将修改后的图像数据放回 canvas
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
// 将 canvas 内容转换为图片数据 URL
|
||||
const resultImageUrl = canvas.toDataURL('image/png');
|
||||
// 返回处理后的新图片的 URL
|
||||
resolve(resultImageUrl);
|
||||
};
|
||||
img.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<!-- <div class="control-show">
|
||||
<div>
|
||||
<!-- <div class="control-show">
|
||||
<a-radio-group v-model:value="select" button-style="solid" size="small">
|
||||
<a-radio-button :value="0">专题图</a-radio-button>
|
||||
<a-radio-button :value="1">截图</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div> -->
|
||||
<a-image :width="470" :height="470" :src="get(url)" />
|
||||
<div class="footer" v-if="haveFooter">
|
||||
<slot name="footer" />
|
||||
<a-image :width="470" :height="470" :src="get(url)" />
|
||||
<div class="footer" v-if="haveFooter">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -52,6 +54,5 @@
|
|||
|
||||
::v-deep .ant-image-mask {
|
||||
display: none !important;
|
||||
// background: red !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,92 @@ export const columns: BasicColumn[] = [
|
|||
},
|
||||
];
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-table
|
||||
export const columnsNew: BasicColumn[] = [
|
||||
{
|
||||
title: 'countyid',
|
||||
dataIndex: '县区id',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '县区',
|
||||
dataIndex: 'countyname',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '下发线索总数（个）',
|
||||
dataIndex: 'xfwtzs',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '总数',
|
||||
children: [
|
||||
{
|
||||
title: '已完成（个）',
|
||||
dataIndex: 'ywc',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '未完成（个）',
|
||||
dataIndex: 'wwc',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '完成率（%）',
|
||||
dataIndex: 'wcl',
|
||||
width: 100,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '定性',
|
||||
children: [
|
||||
{
|
||||
title: '合法（个）',
|
||||
dataIndex: 'dxhf',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '违法（个）',
|
||||
dataIndex: 'dxwf',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '其他（个）',
|
||||
dataIndex: 'dxqt',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '未定性（个）',
|
||||
dataIndex: 'dxwdx',
|
||||
width: 100,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
children: [
|
||||
{
|
||||
title: '非法开采（个）',
|
||||
dataIndex: 'flffkc',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '非法加工（个）',
|
||||
dataIndex: 'flffjg',
|
||||
width: 100,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '超期未报（个）',
|
||||
dataIndex: 'cqwb',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-搜索
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,14 +4,6 @@
|
|||
<template #toolbar>
|
||||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 整改率 -->
|
||||
<template v-if="column.key === 'zgl'"> {{ record.zgl }}% </template>
|
||||
<!-- 驳回率 -->
|
||||
<template v-if="column.key === 'bhl'"> {{ record.bhl }}% </template>
|
||||
<!-- 上报率 -->
|
||||
<template v-if="column.key === 'sbl'"> {{ record.sbl }}% </template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,8 +15,8 @@
|
|||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { CaseOffenceMinerals } from '@/api/demo/system';
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { CaseOffenceMineralsNew } from '@/api/demo/system';
|
||||
import { columnsNew, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
|
|
@ -36,8 +28,8 @@
|
|||
// 页面表格
|
||||
const searchParams = ref();
|
||||
const [registerTable] = useTable({
|
||||
api: CaseOffenceMinerals,
|
||||
columns: columns,
|
||||
api: CaseOffenceMineralsNew,
|
||||
columns: columnsNew,
|
||||
// title: '无人机全域巡查图斑情况统计表',
|
||||
// titleHelpMessage: '合法、其他、非粮化、补办手续、拆除复耕均需市级审核通过才可判定为举证类型。',
|
||||
formConfig: {
|
||||
|
|
@ -53,8 +45,8 @@
|
|||
pagination: false,
|
||||
beforeFetch: (data) => {
|
||||
// 接口请求前 参数处理
|
||||
console.log(data);
|
||||
// 默认时间
|
||||
// console.log(data);
|
||||
// 第一次进入页面-默认时间
|
||||
if (Object.keys(data).length == 0) {
|
||||
var temp = {
|
||||
startTime: dayjs('2024-08-01').startOf('day').format('YYYY-MM-DD'),
|
||||
|
|
@ -63,7 +55,16 @@
|
|||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
// 起始时间和结束时间格式和精确值
|
||||
// 时间选择改变前-默认时间
|
||||
if (data.startTime === undefined && data.endTime === undefined) {
|
||||
var temp = {
|
||||
startTime: dayjs('2024-08-01').startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs().endOf('day').add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
// 时间选择改变后-起始时间和结束时间格式和精确值
|
||||
if (data.startTime && data.endTime) {
|
||||
var temp = {
|
||||
startTime: dayjs(data.startTime).startOf('day').format('YYYY-MM-DD'),
|
||||
|
|
@ -72,7 +73,8 @@
|
|||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
if (data.startTime === null || data.endTime === undefined) {
|
||||
// 时间选择点X后
|
||||
if (data.startTime === null && data.endTime === undefined) {
|
||||
searchParams.value = {};
|
||||
}
|
||||
},
|
||||
|
|
@ -86,7 +88,9 @@
|
|||
let params: any = {};
|
||||
let afterTitle = '';
|
||||
|
||||
if (
|
||||
if (searchParams.value?.startTime === undefined && searchParams.value?.endTime === undefined) {
|
||||
afterTitle = afterTitle;
|
||||
} else if (
|
||||
dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') ===
|
||||
dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD')
|
||||
) {
|
||||
|
|
@ -100,17 +104,21 @@
|
|||
|
||||
switch (exportType) {
|
||||
case '':
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/CaseOfMineralsToExcel';
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/CaseOfMineralsToExcelNew';
|
||||
fileName = '汇总表 ' + afterTitle + '.xls';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
params = {
|
||||
startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
if (
|
||||
!(searchParams.value?.startTime === undefined && searchParams.value?.endTime === undefined)
|
||||
) {
|
||||
params = {
|
||||
startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
}
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-table
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: 'countyid',
|
||||
dataIndex: '县区id',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '县区',
|
||||
dataIndex: 'countyname',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '下发问题总数',
|
||||
dataIndex: 'xfwtzs',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '合法',
|
||||
dataIndex: 'hf',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
dataIndex: 'qt',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '违法',
|
||||
dataIndex: 'wf',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '已完成归档',
|
||||
dataIndex: 'ywcgd',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '未完成归档',
|
||||
dataIndex: 'wwcgd',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '未完成归档',
|
||||
width: 200,
|
||||
children: [
|
||||
{
|
||||
title: '违法采矿',
|
||||
dataIndex: 'wfck',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '违法加工',
|
||||
dataIndex: 'wfjg',
|
||||
width: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '整改率',
|
||||
dataIndex: 'zgl',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '驳回率',
|
||||
dataIndex: 'bhl',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '上报率',
|
||||
dataIndex: 'sbl',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-搜索
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '日期范围',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
defaultValue: [dayjs('2024-08-01', 'YYYY-MM-DD'), dayjs(dayjs().add(-1, 'day'), 'YYYY-MM-DD')]
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 整改率 -->
|
||||
<template v-if="column.key === 'zgl'"> {{ record.zgl }}% </template>
|
||||
<!-- 驳回率 -->
|
||||
<template v-if="column.key === 'bhl'"> {{ record.bhl }}% </template>
|
||||
<!-- 上报率 -->
|
||||
<template v-if="column.key === 'sbl'"> {{ record.sbl }}% </template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { CaseOffenceMinerals } from '@/api/demo/system';
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
// 页面表格
|
||||
const searchParams = ref();
|
||||
const [registerTable] = useTable({
|
||||
api: CaseOffenceMinerals,
|
||||
columns: columns,
|
||||
// title: '无人机全域巡查图斑情况统计表',
|
||||
// titleHelpMessage: '合法、其他、非粮化、补办手续、拆除复耕均需市级审核通过才可判定为举证类型。',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
showIndexColumn: false,
|
||||
striped: false,
|
||||
bordered: true,
|
||||
canResize: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
pagination: false,
|
||||
beforeFetch: (data) => {
|
||||
// 接口请求前 参数处理
|
||||
// console.log(data);
|
||||
// 第一次进入页面-默认时间
|
||||
if (Object.keys(data).length == 0) {
|
||||
var temp = {
|
||||
startTime: dayjs('2024-08-01').startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs().endOf('day').add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
// 时间选择改变前-默认时间
|
||||
if (data.startTime === undefined && data.endTime === undefined) {
|
||||
var temp = {
|
||||
startTime: dayjs('2024-08-01').startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs().endOf('day').add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
// 时间选择改变后-起始时间和结束时间格式和精确值
|
||||
if (data.startTime && data.endTime) {
|
||||
var temp = {
|
||||
startTime: dayjs(data.startTime).startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(data.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
searchParams.value = temp;
|
||||
return temp;
|
||||
}
|
||||
// 时间选择点X后
|
||||
if (data.startTime === null && data.endTime === undefined) {
|
||||
searchParams.value = {};
|
||||
}
|
||||
},
|
||||
afterFetch: (res) => {},
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport(exportType) {
|
||||
let url = '';
|
||||
let fileName = '';
|
||||
let params: any = {};
|
||||
let afterTitle = '';
|
||||
|
||||
if (searchParams.value?.startTime === undefined && searchParams.value?.endTime === undefined) {
|
||||
afterTitle = afterTitle;
|
||||
} else if (
|
||||
dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') ===
|
||||
dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD')
|
||||
) {
|
||||
afterTitle = dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD');
|
||||
} else {
|
||||
afterTitle =
|
||||
dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') +
|
||||
'至' +
|
||||
dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
switch (exportType) {
|
||||
case '':
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/CaseOfMineralsToExcel';
|
||||
fileName = '汇总表 ' + afterTitle + '.xls';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (
|
||||
!(searchParams.value?.startTime === undefined && searchParams.value?.endTime === undefined)
|
||||
) {
|
||||
params = {
|
||||
startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
}
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
url: url,
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
// 按键分类
|
||||
const buttonClick = async (type) => {
|
||||
switch (type) {
|
||||
case 'btnExport':
|
||||
handleExport('');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#closeIconButton {
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float: right;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exportbutton {
|
||||
width: 510px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-container table {
|
||||
line-height: 1.1 !important;
|
||||
|
||||
.ant-table-row {
|
||||
td {
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue