bugfix
This commit is contained in:
@ -2,27 +2,25 @@ import request from "@/utils/request";
|
||||
|
||||
// 专家成果
|
||||
export const achievementList = (params) => {
|
||||
return request({
|
||||
url: `/app/laboratory/achievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/achievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
// 实验室成果
|
||||
export const laboratoryAchievementList = (params) => {
|
||||
return request({
|
||||
url: `/app/laboratory/laboratoryAchievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export const deleteAchievements = (ids) => {
|
||||
return request({
|
||||
url: `/app/laboratory/deleteAchievements/${ids}`,
|
||||
method: "DELETE",
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/laboratoryAchievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const deleteAchievements = (ids) => {
|
||||
return request({
|
||||
url: `/app/laboratory/deleteAchievements/${ids}`,
|
||||
method: "DELETE",
|
||||
});
|
||||
};
|
||||
|
@ -2,23 +2,28 @@ import request from "@/utils/request";
|
||||
|
||||
// 实验室专家列表
|
||||
export const expertList = (params) => {
|
||||
return request({
|
||||
url: `/app/laboratory/expertList`, method: "GET", params,
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/expertList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
// 实验室取消专家绑定
|
||||
export const deleteBindExpert = (expertId) => {
|
||||
return request({
|
||||
url: `/app/laboratory/deleteBindExpert/${expertId}`, method: "PUT",
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/deleteBindExpert/${expertId}`,
|
||||
method: "PUT",
|
||||
});
|
||||
};
|
||||
|
||||
// 实验室新增专利
|
||||
export const insertLabPatent = (data) => {
|
||||
return request({
|
||||
url: `/app/laboratory/patent`, method: "POST", data,
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/patent`,
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
@ -27,28 +32,32 @@ export const insertLabPatent = (data) => {
|
||||
* @return {*}
|
||||
*/
|
||||
export const updateLabPatent = (data) => {
|
||||
return request({
|
||||
url: `/app/laboratory/patent`, method: "PUT", data,
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/patent`,
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteLabPatentByIds = (ids) => {
|
||||
return request({
|
||||
url: `/app/laboratory/deletePatents/${ids}`, method: "DELETE",
|
||||
});
|
||||
return request({
|
||||
url: `/app/laboratory/deletePatents/${ids}`,
|
||||
method: "DELETE",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 实验室未绑定专家列表
|
||||
* @param params
|
||||
* @return {*}
|
||||
*/
|
||||
export const selectNotBindLaboratory = (params) => {
|
||||
return request({
|
||||
url: `/app/laboratory/selectNotBindLaboratory`, method: "GET", params,
|
||||
});
|
||||
}
|
||||
return request({
|
||||
url: `/app/laboratory/selectNotBindLaboratory`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 实验室专家绑定
|
||||
@ -56,8 +65,8 @@ export const selectNotBindLaboratory = (params) => {
|
||||
* @return {*}
|
||||
*/
|
||||
export const bindExpert = (expertId) => {
|
||||
return request({
|
||||
url: `/app/laboratory/bindExpert/${expertId}`, method: "GET",
|
||||
|
||||
});
|
||||
}
|
||||
return request({
|
||||
url: `/app/laboratory/bindExpert/${expertId}`,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
@ -2,25 +2,25 @@ import request from "@/utils/request";
|
||||
|
||||
// 实验室专利成果
|
||||
export const achievementList = (params) => {
|
||||
return request({
|
||||
url: `/app/research/achievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
return request({
|
||||
url: `/app/research/achievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
// 科研成果
|
||||
export const researchAchievementList = (params) => {
|
||||
return request({
|
||||
url: `/app/research/researchAchievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
return request({
|
||||
url: `/app/research/researchAchievementList`,
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteAchievements = (ids) => {
|
||||
return request({
|
||||
url: `/app/research/deleteAchievements/${ids}`,
|
||||
method: "DELETE",
|
||||
});
|
||||
return request({
|
||||
url: `/app/research/deleteAchievements/${ids}`,
|
||||
method: "DELETE",
|
||||
});
|
||||
};
|
||||
|
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
:action="uploadImgUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:class="{ hide: fileList.length >= limit }"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
multiple
|
||||
name="file"
|
||||
:action="uploadImgUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:class="{ hide: fileList.length >= limit }"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
multiple
|
||||
name="file"
|
||||
>
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<plus/>
|
||||
<plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
@ -34,21 +34,21 @@
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
append-to-body
|
||||
title="预览"
|
||||
width="800px"
|
||||
v-model="dialogVisible"
|
||||
append-to-body
|
||||
title="预览"
|
||||
width="800px"
|
||||
>
|
||||
<img
|
||||
:src="dialogImageUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
:src="dialogImageUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getToken} from "@/utils/auth";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
@ -74,7 +74,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const {proxy} = getCurrentInstance();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits();
|
||||
const number = ref(0);
|
||||
const uploadList = ref([]);
|
||||
@ -82,36 +82,36 @@ const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
|
||||
const headers = ref({"client-token": "Bearer " + getToken()});
|
||||
const headers = ref({ "client-token": "Bearer " + getToken() });
|
||||
const fileList = ref([]);
|
||||
const showTip = computed(
|
||||
() => props.isShowTip && (props.fileType || props.fileSize)
|
||||
() => props.isShowTip && (props.fileType || props.fileSize)
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.modelValue.split(",");
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
if (typeof item === "string") {
|
||||
if (item.indexOf(baseUrl) === -1) {
|
||||
// item = {name: baseUrl + item, url: baseUrl + item};
|
||||
item = {name: item, url: `${baseUrl}/file${item}`};
|
||||
} else {
|
||||
item = {name: item, url: item};
|
||||
}
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.modelValue.split(",");
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
if (typeof item === "string") {
|
||||
if (item.indexOf(baseUrl) === -1) {
|
||||
// item = {name: baseUrl + item, url: baseUrl + item};
|
||||
item = { name: item, url: `${baseUrl}/file${item}` };
|
||||
} else {
|
||||
item = { name: item, url: item };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
{deep: true, immediate: true}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 删除图片
|
||||
@ -121,11 +121,14 @@ function handleRemove(file, files) {
|
||||
|
||||
// 上传成功回调
|
||||
function handleUploadSuccess(res) {
|
||||
uploadList.value.push({name: res.fileName, url: `${baseUrl}/file${res.fileName}`});
|
||||
uploadList.value.push({
|
||||
name: res.fileName,
|
||||
url: `${baseUrl}/file${res.fileName}`,
|
||||
});
|
||||
if (uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value
|
||||
.filter((f) => f.url !== undefined)
|
||||
.concat(uploadList.value);
|
||||
.filter((f) => f.url !== undefined)
|
||||
.concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
@ -151,7 +154,7 @@ function handleBeforeUpload(file) {
|
||||
}
|
||||
if (!isImg) {
|
||||
proxy.$modal.msgError(
|
||||
`文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
|
||||
`文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
2005
src/router/index.js
2005
src/router/index.js
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card shadow="always" style="width: 55%; margin: 0 auto"
|
||||
>
|
||||
<el-card shadow="always" style="width: 55%; margin: 0 auto">
|
||||
<p><b>实验室资料</b></p>
|
||||
<!-- <laboratory-form ref="labFormRef" v-model="form" :is-add="false"/>-->
|
||||
<agent-form ref="agentFormRef" v-model="form" :is-add="false" />
|
||||
|
@ -24,8 +24,8 @@
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -44,21 +44,21 @@
|
||||
prop="createTime"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.joinDeadline) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动开始时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动开始时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.beginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动结束时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动结束时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.finishTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="活动报名时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动报名时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
</template>
|
||||
|
@ -33,11 +33,11 @@
|
||||
type="primary"
|
||||
icon="Search"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button size="small" icon="Refresh" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -55,21 +55,21 @@
|
||||
prop="createTime"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.joinDeadline) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动开始时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动开始时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.beginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动结束时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动结束时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
<span>{{ parseTime(row.finishTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="活动报名时间" align="center" prop="createTime">
|
||||
<el-table-column label="活动报名时间" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ parseTime(row.createTime) }}</span>
|
||||
</template>
|
||||
|
@ -1,59 +1,69 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="成果名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入成果名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入成果名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" size="small" @click="resetQuery"
|
||||
>重置
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col v-if="route.name==='LabAchievement'" :span="1.5">
|
||||
<el-button icon="UploadFilled" size="small" type="primary" @click="handleImport">导入成果</el-button>
|
||||
<el-col v-if="route.name === 'LabAchievement'" :span="1.5">
|
||||
<el-button
|
||||
icon="UploadFilled"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleImport"
|
||||
>导入成果</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="dataList">
|
||||
<el-table-column label="数据编号" prop="id"/>
|
||||
<el-table-column label="数据编号" prop="id" />
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果名称"
|
||||
prop="title"
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果名称"
|
||||
prop="title"
|
||||
/>
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果领域"
|
||||
prop="industryStr"
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果领域"
|
||||
prop="industryStr"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="route.name === 'ExpertAchievement'"
|
||||
label="所属专家"
|
||||
prop="expertName"
|
||||
/>
|
||||
<el-table-column v-if="route.name ==='ExpertAchievement'" label="所属专家" prop="expertName"/>
|
||||
<!-- <el-table-column label="浏览量" prop="visitCount"/>-->
|
||||
<el-table-column align="center" label="发布时间" prop="createTime">
|
||||
<template #default="{ row }">
|
||||
@ -61,9 +71,9 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button-->
|
||||
@ -75,70 +85,67 @@
|
||||
<!-- </el-button-->
|
||||
<!-- >-->
|
||||
<el-button
|
||||
icon="delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDelete(row.id)"
|
||||
>删除
|
||||
icon="delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDelete(row.id)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog
|
||||
v-model="upload.dialogVisible"
|
||||
append-to-body
|
||||
title="导入成果"
|
||||
width="400px"
|
||||
v-model="upload.dialogVisible"
|
||||
append-to-body
|
||||
title="导入成果"
|
||||
width="400px"
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:auto-upload="false"
|
||||
:disabled="upload.isUploading"
|
||||
:headers="upload.headers"
|
||||
:limit="1"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
accept=".xlsx, .xls"
|
||||
drag
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:auto-upload="false"
|
||||
:disabled="upload.isUploading"
|
||||
:headers="upload.headers"
|
||||
:limit="1"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
accept=".xlsx, .xls"
|
||||
drag
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(xlsl, '成果导入模板.xlsx')"
|
||||
>下载模板
|
||||
</el-link
|
||||
>
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(xlsl, '成果导入模板.xlsx')"
|
||||
>下载模板
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="el-upload__tip text-center">
|
||||
<span style="color: red">成果导入说明(必读)。</span>
|
||||
<el-link
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(importTip, '成果导入说明(必读).txt')"
|
||||
>下载
|
||||
</el-link
|
||||
>
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(importTip, '成果导入说明(必读).txt')"
|
||||
>下载
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
@ -154,20 +161,24 @@
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
|
||||
import {achievementList, deleteAchievements, laboratoryAchievementList} from "@/api/admin/laboratory/achievement";
|
||||
import {getToken} from "@/utils/auth";
|
||||
import xlsl from '@/assets/achievement_import_template.xlsx?url'
|
||||
import importTip from '@/assets/achievement_import_description.txt?url'
|
||||
import {saveAs} from 'file-saver'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
|
||||
import {
|
||||
achievementList,
|
||||
deleteAchievements,
|
||||
laboratoryAchievementList,
|
||||
} from "@/api/admin/laboratory/achievement";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import xlsl from "@/assets/achievement_import_template.xlsx?url";
|
||||
import importTip from "@/assets/achievement_import_description.txt?url";
|
||||
import { saveAs } from "file-saver";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const route = useRoute();
|
||||
|
||||
const {proxy} = getCurrentInstance();
|
||||
console.log(route.name)
|
||||
const { proxy } = getCurrentInstance();
|
||||
console.log(route.name);
|
||||
const dataList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
@ -175,9 +186,9 @@ const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const fetchMethods = {
|
||||
"LabAchievement": laboratoryAchievementList,
|
||||
"ExpertAchievement": achievementList,
|
||||
}
|
||||
LabAchievement: laboratoryAchievementList,
|
||||
ExpertAchievement: achievementList,
|
||||
};
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -186,7 +197,7 @@ const data = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
const {queryParams} = toRefs(data);
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
const queryRef = ref();
|
||||
|
||||
@ -194,14 +205,14 @@ const queryRef = ref();
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
fetchMethods[route.name](queryParams.value)
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
@ -222,19 +233,19 @@ function resetQuery() {
|
||||
*/
|
||||
function handleDelete(id) {
|
||||
ElMessageBox.confirm('是否确认删除数据编号为"' + id + '"的成果项?')
|
||||
.then(function () {
|
||||
return deleteAchievements(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
.then(function () {
|
||||
return deleteAchievements(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
const uploadRef = ref(null)
|
||||
const uploadRef = ref(null);
|
||||
const upload = reactive({
|
||||
dialogVisible: false,
|
||||
// 是否显示弹出层(用户导入)
|
||||
@ -246,16 +257,16 @@ const upload = reactive({
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: {'client-token': "Bearer " + getToken()},
|
||||
headers: { "client-token": "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/app/laboratory/importData",
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* 导入成果
|
||||
*/
|
||||
const handleImport = () => {
|
||||
upload.dialogVisible = true
|
||||
upload.dialogVisible = true;
|
||||
};
|
||||
|
||||
/**文件上传中处理 */
|
||||
@ -268,19 +279,19 @@ const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.isUploading = false;
|
||||
uploadRef.value.handleRemove(file);
|
||||
proxy.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{dangerouslyUseHTMLString: true}
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 下载模板操作 */
|
||||
const importTemplate = () => {
|
||||
saveAs(xlsl, '成果导入模板.xlsx')
|
||||
}
|
||||
saveAs(xlsl, "成果导入模板.xlsx");
|
||||
};
|
||||
|
||||
/** 提交上传文件 */
|
||||
function submitFileForm() {
|
||||
|
@ -1,85 +1,94 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="成果名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入专利名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入专利名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" size="small" @click="resetQuery"
|
||||
>重置
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button icon="plus" size="small" type="primary" @click="handleAddBind">关联专家</el-button>
|
||||
<el-button
|
||||
icon="plus"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleAddBind"
|
||||
>关联专家</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 关联未被关联的专家 -->
|
||||
<el-dialog v-model="showExpertDialog" title="关联专家">
|
||||
<el-form
|
||||
ref="notBindExpertQueryRef"
|
||||
:inline="true"
|
||||
:model="notBindExpertQueryParams"
|
||||
@submit.prevent
|
||||
ref="notBindExpertQueryRef"
|
||||
:inline="true"
|
||||
:model="notBindExpertQueryParams"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="专家名称" prop="name">
|
||||
<el-input
|
||||
v-model="notBindExpertQueryParams.name"
|
||||
clearable
|
||||
placeholder="请输入专家名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="getNotBindExpertList"
|
||||
v-model="notBindExpertQueryParams.name"
|
||||
clearable
|
||||
placeholder="请输入专家名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="getNotBindExpertList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="getNotBindExpertList"
|
||||
>搜索
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="getNotBindExpertList"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" size="small" @click="resetNotBindExpertQuery"
|
||||
>重置
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
size="small"
|
||||
@click="resetNotBindExpertQuery"
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="notBindExpertList">
|
||||
<el-table-column label="数据编号" prop="id"/>
|
||||
<el-table-column label="数据编号" prop="id" />
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="专家名称"
|
||||
prop="name"
|
||||
:show-overflow-tooltip="true"
|
||||
label="专家名称"
|
||||
prop="name"
|
||||
/>
|
||||
<el-table-column label="联系电话" prop="mobile"/>
|
||||
<el-table-column label="研究领域" prop="industryStr"/>
|
||||
<el-table-column label="联系电话" prop="mobile" />
|
||||
<el-table-column label="研究领域" prop="industryStr" />
|
||||
<!-- <el-table-column label="申请(专利权)人" prop="applyName"/>-->
|
||||
<el-table-column align="center" label="入驻时间" prop="workTime">
|
||||
<template #default="{ row }">
|
||||
@ -90,30 +99,34 @@
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
icon="plus"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="submitBind(row.id)"
|
||||
>关联
|
||||
icon="plus"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="submitBind(row.id)"
|
||||
>关联
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="notBindExpertTotal>0" v-model:limit="notBindExpertQueryParams.pageSize"
|
||||
v-model:page="notBindExpertQueryParams.pageNum"
|
||||
:total="notBindExpertTotal" @pagination="getNotBindExpertList"/>
|
||||
<pagination
|
||||
v-show="notBindExpertTotal > 0"
|
||||
v-model:limit="notBindExpertQueryParams.pageSize"
|
||||
v-model:page="notBindExpertQueryParams.pageNum"
|
||||
:total="notBindExpertTotal"
|
||||
@pagination="getNotBindExpertList"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="dataList">
|
||||
<el-table-column label="数据编号" prop="id"/>
|
||||
<el-table-column label="数据编号" prop="id" />
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="专家名称"
|
||||
prop="name"
|
||||
:show-overflow-tooltip="true"
|
||||
label="专家名称"
|
||||
prop="name"
|
||||
/>
|
||||
<el-table-column label="联系电话" prop="mobile"/>
|
||||
<el-table-column label="研究领域" prop="industryStr"/>
|
||||
<el-table-column label="联系电话" prop="mobile" />
|
||||
<el-table-column label="研究领域" prop="industryStr" />
|
||||
<!-- <el-table-column label="申请(专利权)人" prop="applyName"/>-->
|
||||
<el-table-column align="center" label="入驻时间" prop="workTime">
|
||||
<template #default="{ row }">
|
||||
@ -121,9 +134,9 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button-->
|
||||
@ -135,11 +148,11 @@
|
||||
<!-- </el-button-->
|
||||
<!-- >-->
|
||||
<el-button
|
||||
icon="Delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDeleteBind(row.id)"
|
||||
>取消关联
|
||||
icon="Delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDeleteBind(row.id)"
|
||||
>取消关联
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -152,32 +165,32 @@
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 添加或修改数据配置对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="800px">
|
||||
<el-form ref="expertRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="专家姓名" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入专家姓名"/>
|
||||
<el-input v-model="form.title" placeholder="请输入专家姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-input v-model="form.gender" placeholder="请输入性别"/>
|
||||
<el-input v-model="form.gender" placeholder="请输入性别" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="单位"/>
|
||||
<el-input v-model="form.unit" placeholder="单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="研究方向" prop="researchDirection">
|
||||
<InputBoxAdd
|
||||
ref="researchDirectionFormRef"
|
||||
v-model="form"
|
||||
:labelWidth="100"
|
||||
fieldKey="researchs"
|
||||
placeholder="研究方向"
|
||||
title="研究方向"
|
||||
ref="researchDirectionFormRef"
|
||||
v-model="form"
|
||||
:labelWidth="100"
|
||||
fieldKey="researchs"
|
||||
placeholder="研究方向"
|
||||
title="研究方向"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -193,11 +206,16 @@
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
import {reactive, ref, toRefs} from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { reactive, ref, toRefs } from "vue";
|
||||
import InputBoxAdd from "@/views/components/InputBoxAdd/index.vue";
|
||||
import {bindExpert, deleteBindExpert, expertList, selectNotBindLaboratory} from "@/api/admin/laboratory/expert";
|
||||
import {
|
||||
bindExpert,
|
||||
deleteBindExpert,
|
||||
expertList,
|
||||
selectNotBindLaboratory,
|
||||
} from "@/api/admin/laboratory/expert";
|
||||
import Pagination from "@/components/Pagination/index.vue";
|
||||
|
||||
const router = useRouter();
|
||||
@ -211,7 +229,6 @@ const title = ref("");
|
||||
const expertRef = ref();
|
||||
const researchDirectionFormRef = ref();
|
||||
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -222,7 +239,7 @@ const data = reactive({
|
||||
rules: {},
|
||||
});
|
||||
|
||||
const {queryParams, form, rules} = toRefs(data);
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
const queryRef = ref();
|
||||
|
||||
@ -230,14 +247,14 @@ const queryRef = ref();
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
expertList(queryParams.value)
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
@ -255,16 +272,16 @@ function resetQuery() {
|
||||
/** 删除按钮操作 */
|
||||
function handleDeleteBind(id) {
|
||||
ElMessageBox.confirm(`是否确认取消关联数据编号为"${id}"的专家?`)
|
||||
.then(function () {
|
||||
return deleteBindExpert(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("取消关联成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
.then(function () {
|
||||
return deleteBindExpert(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("取消关联成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
/** 重置新增的表单以及其他数据 */
|
||||
@ -287,7 +304,6 @@ function cancel() {
|
||||
reset();
|
||||
}
|
||||
|
||||
|
||||
// 是否显示关联专家dialog
|
||||
const showExpertDialog = ref(false);
|
||||
// 未绑定专家列表
|
||||
@ -300,7 +316,6 @@ const notBindExpertQueryParams = reactive({
|
||||
name: undefined,
|
||||
});
|
||||
|
||||
|
||||
const notBindExpertQueryRef = ref();
|
||||
const getNotBindExpertList = () => {
|
||||
selectNotBindLaboratory(notBindExpertQueryParams).then((resp) => {
|
||||
@ -310,7 +325,7 @@ const getNotBindExpertList = () => {
|
||||
};
|
||||
|
||||
const handleAddBind = () => {
|
||||
getNotBindExpertList()
|
||||
getNotBindExpertList();
|
||||
showExpertDialog.value = true;
|
||||
};
|
||||
|
||||
@ -323,7 +338,7 @@ const resetNotBindExpertQuery = () => {
|
||||
notBindExpertQueryParams.name = undefined;
|
||||
notBindExpertQueryRef.value.resetFields();
|
||||
getNotBindExpertList();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 关联专家
|
||||
@ -331,18 +346,17 @@ const resetNotBindExpertQuery = () => {
|
||||
*/
|
||||
const submitBind = (id) => {
|
||||
ElMessageBox.confirm("是否确认关联该专家?")
|
||||
.then(function () {
|
||||
return bindExpert(id);
|
||||
})
|
||||
.then(() => {
|
||||
getNotBindExpertList();
|
||||
ElMessage.success("关联成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
.then(function () {
|
||||
return bindExpert(id);
|
||||
})
|
||||
.then(() => {
|
||||
getNotBindExpertList();
|
||||
ElMessage.success("关联成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdate = () => {
|
||||
reset();
|
||||
@ -373,6 +387,5 @@ function submitForm() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
@ -1,61 +1,70 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="成果名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入成果名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
placeholder="请输入成果名称"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
icon="Search"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" size="small" @click="resetQuery"
|
||||
>重置
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-if="route.name==='ResearchAchievement'" icon="UploadFilled" size="small" type="primary"
|
||||
@click="handleImport">导入成果
|
||||
<el-button
|
||||
v-if="route.name === 'ResearchAchievement'"
|
||||
icon="UploadFilled"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleImport"
|
||||
>导入成果
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="dataList">
|
||||
<el-table-column label="数据编号" prop="id"/>
|
||||
<el-table-column label="数据编号" prop="id" />
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果名称"
|
||||
prop="title"
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果名称"
|
||||
prop="title"
|
||||
/>
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果领域"
|
||||
prop="industryStr"
|
||||
:show-overflow-tooltip="true"
|
||||
label="成果领域"
|
||||
prop="industryStr"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="route.name === 'ExpertAchievement'"
|
||||
label="所属专家"
|
||||
prop="expertName"
|
||||
/>
|
||||
<el-table-column v-if="route.name==='ExpertAchievement'" label="所属专家" prop="expertName"/>
|
||||
<!-- <el-table-column label="浏览量" prop="visitCount"/>-->
|
||||
<el-table-column align="center" label="发布时间" prop="createTime">
|
||||
<template #default="{ row }">
|
||||
@ -63,9 +72,9 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button-->
|
||||
@ -77,69 +86,67 @@
|
||||
<!-- </el-button-->
|
||||
<!-- >-->
|
||||
<el-button
|
||||
icon="delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDelete(row.id)"
|
||||
>删除
|
||||
icon="delete"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="handleDelete(row.id)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog
|
||||
v-model="upload.dialogVisible"
|
||||
append-to-body
|
||||
title="导入成果"
|
||||
width="400px"
|
||||
v-model="upload.dialogVisible"
|
||||
append-to-body
|
||||
title="导入成果"
|
||||
width="400px"
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:auto-upload="false"
|
||||
:disabled="upload.isUploading"
|
||||
:headers="upload.headers"
|
||||
:limit="1"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
accept=".xlsx, .xls"
|
||||
drag
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:auto-upload="false"
|
||||
:disabled="upload.isUploading"
|
||||
:headers="upload.headers"
|
||||
:limit="1"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
accept=".xlsx, .xls"
|
||||
drag
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(xlsl, '成果导入模板.xlsx')"
|
||||
>下载模板
|
||||
</el-link
|
||||
>
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(xlsl, '成果导入模板.xlsx')"
|
||||
>下载模板
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="el-upload__tip text-center">
|
||||
<span style="color: red">成果导入说明(必读)。</span>
|
||||
<el-link
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(importTip, '成果导入说明(必读).txt')"
|
||||
>下载
|
||||
</el-link
|
||||
>
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="saveAs(importTip, '成果导入说明(必读).txt')"
|
||||
>下载
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
@ -150,20 +157,23 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {reactive, ref, toRefs} from "vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {achievementList, deleteAchievements, researchAchievementList} from "@/api/admin/research/achievement";
|
||||
import {getToken} from "@/utils/auth";
|
||||
import xlsl from '@/assets/achievement_import_template.xlsx?url'
|
||||
import importTip from '@/assets/achievement_import_description.txt?url'
|
||||
import {saveAs} from "file-saver";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import {
|
||||
achievementList,
|
||||
deleteAchievements,
|
||||
researchAchievementList,
|
||||
} from "@/api/admin/research/achievement";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import xlsl from "@/assets/achievement_import_template.xlsx?url";
|
||||
import importTip from "@/assets/achievement_import_description.txt?url";
|
||||
import { saveAs } from "file-saver";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@ -173,7 +183,7 @@ const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const route = useRoute()
|
||||
const route = useRoute();
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -182,25 +192,25 @@ const data = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
const {queryParams} = toRefs(data);
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
const queryRef = ref();
|
||||
const fetchMethods = {
|
||||
"ResearchAchievement": researchAchievementList,
|
||||
"ExpertAchievement": achievementList,
|
||||
}
|
||||
ResearchAchievement: researchAchievementList,
|
||||
ExpertAchievement: achievementList,
|
||||
};
|
||||
/** 查询数据列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
fetchMethods[route.name](queryParams.value)
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
.then((resp) => {
|
||||
dataList.value = resp.rows;
|
||||
total.value = resp.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
@ -221,17 +231,16 @@ function resetQuery() {
|
||||
*/
|
||||
function handleDelete(id) {
|
||||
ElMessageBox.confirm(`是否确认删除数据编号为"${id}"的成果项?'`)
|
||||
.then(function () {
|
||||
return deleteAchievements(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
});
|
||||
.then(function () {
|
||||
return deleteAchievements(id);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const uploadRef = ref(null)
|
||||
const uploadRef = ref(null);
|
||||
const upload = reactive({
|
||||
dialogVisible: false,
|
||||
// 是否显示弹出层(用户导入)
|
||||
@ -243,16 +252,16 @@ const upload = reactive({
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: {'client-token': "Bearer " + getToken()},
|
||||
headers: { "client-token": "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/app/research/importData",
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* 导入成果
|
||||
*/
|
||||
const handleImport = () => {
|
||||
upload.dialogVisible = true
|
||||
upload.dialogVisible = true;
|
||||
};
|
||||
|
||||
/**文件上传中处理 */
|
||||
@ -265,21 +274,19 @@ const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.isUploading = false;
|
||||
uploadRef.value.handleRemove(file);
|
||||
proxy.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{dangerouslyUseHTMLString: true}
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
getList();
|
||||
};
|
||||
|
||||
|
||||
/** 提交上传文件 */
|
||||
function submitFileForm() {
|
||||
uploadRef.value.submit();
|
||||
}
|
||||
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:label-width="labelWidth + 'px'"
|
||||
:model="modelValue"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
:label-width="labelWidth + 'px'"
|
||||
:model="modelValue"
|
||||
:rules="rules"
|
||||
>
|
||||
<div v-if="showTitle" class="form_title">基本信息</div>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="工作所在地:" prop="wordAddress">
|
||||
<el-input v-model="modelValue.wordAddress"/>
|
||||
<el-input v-model="modelValue.wordAddress" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -43,23 +43,23 @@
|
||||
<el-col :span="24">
|
||||
<el-form-item label="工作经历:" prop="experience">
|
||||
<el-input
|
||||
v-model="modelValue.experience"
|
||||
:autosize="{ minRows: 2, maxRows: 10 }"
|
||||
type="textarea"
|
||||
v-model="modelValue.experience"
|
||||
:autosize="{ minRows: 2, maxRows: 10 }"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<field-options ref="researchsFormRef" v-model="modelValue"/>
|
||||
<field-options ref="researchsFormRef" v-model="modelValue" />
|
||||
|
||||
<InputBoxAdd
|
||||
ref="keywordsFormRef"
|
||||
v-model="modelValue"
|
||||
:labelWidth="labelWidth"
|
||||
fieldKey="keywords"
|
||||
placeholder="应用场景关键词+技术产品关键词"
|
||||
title="关键词"
|
||||
ref="keywordsFormRef"
|
||||
v-model="modelValue"
|
||||
:labelWidth="labelWidth"
|
||||
fieldKey="keywords"
|
||||
placeholder="应用场景关键词+技术产品关键词"
|
||||
title="关键词"
|
||||
/>
|
||||
|
||||
<el-row v-if="isAdd">
|
||||
@ -69,9 +69,9 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="idImage.0">
|
||||
<ImageUpload
|
||||
v-model="modelValue.idImage[0]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
v-model="modelValue.idImage[0]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">身份证人像面</div>
|
||||
@ -79,9 +79,9 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="idImage.1">
|
||||
<ImageUpload
|
||||
v-model="modelValue.idImage[1]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
v-model="modelValue.idImage[1]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">身份证国徽面</div>
|
||||
@ -89,9 +89,9 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="idImage.2">
|
||||
<ImageUpload
|
||||
v-model="modelValue.idImage[2]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
v-model="modelValue.idImage[2]"
|
||||
:isShowTip="false"
|
||||
:limit="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">手持身份证人像面</div>
|
||||
@ -107,8 +107,8 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<image-upload
|
||||
v-model="modelValue.certificatePics"
|
||||
:isShowTip="false"
|
||||
v-model="modelValue.certificatePics"
|
||||
:isShowTip="false"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -120,7 +120,7 @@
|
||||
<script setup>
|
||||
import InputBoxAdd from "../InputBoxAdd";
|
||||
import FieldOptions from "../FieldOptions";
|
||||
import {ref} from "vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const formRef = ref();
|
||||
const researchsFormRef = ref();
|
||||
@ -141,21 +141,21 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const rules = {
|
||||
product: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
name: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
kind: [{required: true, message: "请选择", trigger: "change"}],
|
||||
code: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
product: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
name: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
kind: [{ required: true, message: "请选择", trigger: "change" }],
|
||||
code: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
mobile: [
|
||||
{required: true, message: "请输入手机号码", trigger: "blur"},
|
||||
{ required: true, message: "请输入手机号码", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
idCard: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
wordAddress: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
experience: [{required: true, message: "请输入", trigger: "blur"}],
|
||||
idCard: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
wordAddress: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
experience: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
"idImage.0": [
|
||||
{
|
||||
required: true,
|
||||
|
@ -1,11 +1,5 @@
|
||||
<script setup>
|
||||
<script setup></script>
|
||||
|
||||
</script>
|
||||
<template></template>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div class="paging">
|
||||
<el-icon
|
||||
:style="{
|
||||
:style="{
|
||||
cursor: page === 1 ? 'not-allowed' : 'pointer',
|
||||
color: page === 1 ? '#999' : '#4f93ed',
|
||||
}"
|
||||
class="prev"
|
||||
@click="prev"
|
||||
class="prev"
|
||||
@click="prev"
|
||||
>
|
||||
<ArrowLeftBold/>
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
<div class="page-num">{{ page }}</div>
|
||||
<el-icon
|
||||
:style="{
|
||||
:style="{
|
||||
cursor: Math.ceil(total / 5) <= page ? 'not-allowed' : 'pointer',
|
||||
color: Math.ceil(total / 5) <= page ? '#999' : '#4f93ed',
|
||||
}"
|
||||
class="next"
|
||||
@click="next"
|
||||
class="next"
|
||||
@click="next"
|
||||
>
|
||||
<ArrowRightBold/>
|
||||
<ArrowRightBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {toRefs} from "vue";
|
||||
import {ArrowLeftBold, ArrowRightBold} from "@element-plus/icons-vue";
|
||||
import { toRefs } from "vue";
|
||||
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
|
||||
|
||||
const emit = defineEmits(["update:page"]);
|
||||
const props = defineProps({
|
||||
@ -39,7 +39,7 @@ const props = defineProps({
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const {total, page} = toRefs(props);
|
||||
const { total, page } = toRefs(props);
|
||||
|
||||
const prev = () => {
|
||||
if (page.value === 1) return;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {computed, onMounted, ref, shallowRef, toRefs, watch} from "vue";
|
||||
import {init, registerMap} from "echarts";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { computed, onMounted, ref, shallowRef, toRefs, watch } from "vue";
|
||||
import { init, registerMap } from "echarts";
|
||||
import {
|
||||
countAchievementByArea,
|
||||
countAchievementByCity,
|
||||
@ -14,67 +14,76 @@ import {
|
||||
countEnterpriseByProvince,
|
||||
countExpertByArea,
|
||||
countExpertByCity,
|
||||
countExpertByProvince
|
||||
countExpertByProvince,
|
||||
} from "@/api/website/home";
|
||||
import backBtnPng from '@/assets/images/map_back.png'
|
||||
import backBtnPng from "@/assets/images/map_back.png";
|
||||
import RegionPagine from "@/views/website/home/comp/RegionPagine.vue";
|
||||
import html2canvas from "html2canvas";
|
||||
import anime from "animejs";
|
||||
import {debounce} from 'lodash-es'
|
||||
import {ElMessage} from "element-plus";
|
||||
import { debounce } from "lodash-es";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const leftBoxPageNum = ref(1)
|
||||
const rightBoxPageNum = ref(1)
|
||||
const leftBoxPageNum = ref(1);
|
||||
const rightBoxPageNum = ref(1);
|
||||
const mapRef = ref(null);
|
||||
const districtSearch = shallowRef(null)
|
||||
const myEcharts = shallowRef(null)
|
||||
const map = shallowRef(null)
|
||||
const mapData = ref([])
|
||||
const districtSearch = shallowRef(null);
|
||||
const myEcharts = shallowRef(null);
|
||||
const map = shallowRef(null);
|
||||
const mapData = ref([]);
|
||||
const props = defineProps({
|
||||
mapIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const {mapIndex} = toRefs(props)
|
||||
const emit = defineEmits(["changeMapIndex"])
|
||||
const { mapIndex } = toRefs(props);
|
||||
const emit = defineEmits(["changeMapIndex"]);
|
||||
const methods = [
|
||||
{
|
||||
name: "expert",
|
||||
title: "专家分布地图",
|
||||
byProvince: countExpertByProvince,
|
||||
byCity: countExpertByCity,
|
||||
byArea: countExpertByArea
|
||||
byArea: countExpertByArea,
|
||||
},
|
||||
{
|
||||
name: "technology",
|
||||
title: "技术分布地图",
|
||||
byProvince: countAchievementByProvince,
|
||||
byCity: countAchievementByCity,
|
||||
byArea: countAchievementByArea
|
||||
byArea: countAchievementByArea,
|
||||
},
|
||||
{
|
||||
name: "demand",
|
||||
title: "需求分布地图",
|
||||
byProvince: countDemandByProvince,
|
||||
byCity: countDemandByCity,
|
||||
byArea: countDemandByArea
|
||||
byArea: countDemandByArea,
|
||||
},
|
||||
{
|
||||
name: "enterprise",
|
||||
title: "企业分布地图",
|
||||
byProvince: countEnterpriseByProvince,
|
||||
byCity: countEnterpriseByCity,
|
||||
byArea: countEnterpriseByArea
|
||||
byArea: countEnterpriseByArea,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
|
||||
const areaCount = ref([]) // 按行政区划统计
|
||||
const industryCount = ref([]) // 按领域统计
|
||||
const areaCountPaged = computed(() => areaCount.value.slice((leftBoxPageNum.value - 1) * 5, leftBoxPageNum.value * 5))
|
||||
const industryCountPaged = computed(() => industryCount.value.slice((rightBoxPageNum.value - 1) * 5, rightBoxPageNum.value * 5))
|
||||
const areaCount = ref([]); // 按行政区划统计
|
||||
const industryCount = ref([]); // 按领域统计
|
||||
const areaCountPaged = computed(() =>
|
||||
areaCount.value.slice(
|
||||
(leftBoxPageNum.value - 1) * 5,
|
||||
leftBoxPageNum.value * 5
|
||||
)
|
||||
);
|
||||
const industryCountPaged = computed(() =>
|
||||
industryCount.value.slice(
|
||||
(rightBoxPageNum.value - 1) * 5,
|
||||
rightBoxPageNum.value * 5
|
||||
)
|
||||
);
|
||||
const options = {
|
||||
// nameProperty: 'adcode',
|
||||
visualMap: {
|
||||
@ -84,10 +93,10 @@ const options = {
|
||||
orient: "horizontal", //图例排列方向
|
||||
padding: 5,
|
||||
pieces: [
|
||||
{gte: 0, lte: 99, label: "99", color: "#CAE9FD"},
|
||||
{gte: 100, lte: 299, label: "100-299", color: "#7ED2F7"},
|
||||
{gte: 300, lte: 499, label: "299-499", color: "#039DDD"},
|
||||
{gte: 500, label: "500", color: "#0D4884"},
|
||||
{ gte: 0, lte: 99, label: "99", color: "#CAE9FD" },
|
||||
{ gte: 100, lte: 299, label: "100-299", color: "#7ED2F7" },
|
||||
{ gte: 300, lte: 499, label: "299-499", color: "#039DDD" },
|
||||
{ gte: 500, label: "500", color: "#0D4884" },
|
||||
],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -104,106 +113,106 @@ const options = {
|
||||
type: "map",
|
||||
name: "中国",
|
||||
map: "map",
|
||||
data: []
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
const loadAMap = async () => {
|
||||
const AMap = await AMapLoader.load({
|
||||
"key": "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
"version": "2.0", // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15
|
||||
"plugins": [/*"AMap.DistrictSearch", "AMap.DistrictExplorer"*/], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
||||
"AMapUI": {
|
||||
key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
/*"AMap.DistrictSearch", "AMap.DistrictExplorer"*/
|
||||
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI,缺省不加载
|
||||
version: '1.1', // AMapUI 缺省 1.1
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: [], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
});
|
||||
map.value = new AMap.Map("container", {
|
||||
zoom: 4, //级别
|
||||
center: [108.946609, 34.262324], //中心点坐标
|
||||
// viewMode: '3D' //使用3D视图
|
||||
});
|
||||
map.value.on("click", mapClick)
|
||||
map.value.on("click", mapClick);
|
||||
// districtSearch.value = new AMap.DistrictSearch({
|
||||
// level: 'province',
|
||||
// extensions: 'all',
|
||||
// subdistrict: 1,
|
||||
// showbiz: false,
|
||||
// })
|
||||
}
|
||||
const loading = ref(false)
|
||||
};
|
||||
const loading = ref(false);
|
||||
const loadDistrict = (adcode) => {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
|
||||
const districtExplorer = new DistrictExplorer({
|
||||
map: map //关联的地图实例
|
||||
map: map, //关联的地图实例
|
||||
});
|
||||
|
||||
districtExplorer.loadAreaNode(adcode, async (error, areaNode) => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
const parentAdcode = areaNode.getAdcode()
|
||||
const parentAdcode = areaNode.getAdcode();
|
||||
// 绘制载入的区划节点
|
||||
const geoJSON = {
|
||||
type: 'FeatureCollection',
|
||||
type: "FeatureCollection",
|
||||
features: areaNode.getSubFeatures(),
|
||||
}
|
||||
const level = getLevel(adcode)
|
||||
let result
|
||||
};
|
||||
const level = getLevel(adcode);
|
||||
let result;
|
||||
try {
|
||||
if (level === 0) {
|
||||
result = await methods[mapIndex.value]['byProvince']()
|
||||
result = await methods[mapIndex.value]["byProvince"]();
|
||||
} else if (level === 1) {
|
||||
result = await methods[mapIndex.value]['byCity'](adcode)
|
||||
result = await methods[mapIndex.value]["byCity"](adcode);
|
||||
} else if (level === 2) {
|
||||
result = await methods[mapIndex.value]['byArea'](adcode)
|
||||
result = await methods[mapIndex.value]["byArea"](adcode);
|
||||
}
|
||||
} catch (e) {
|
||||
loading.value = false
|
||||
return
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
if (result.industry) industryCount.value = Object.keys(result.industry).map(key => ({
|
||||
name: key,
|
||||
count: result.industry[key]
|
||||
})
|
||||
)
|
||||
areaCount.value = result.count ?? []
|
||||
mapData.value = geoJSON.features.map(el => {
|
||||
const areaProp = el.properties
|
||||
if (result.industry)
|
||||
industryCount.value = Object.keys(result.industry).map((key) => ({
|
||||
name: key,
|
||||
count: result.industry[key],
|
||||
}));
|
||||
areaCount.value = result.count ?? [];
|
||||
mapData.value = geoJSON.features.map((el) => {
|
||||
const areaProp = el.properties;
|
||||
return {
|
||||
adcode: areaProp.adcode,
|
||||
name: areaProp.name,
|
||||
value: result.count.find(el => el.code == areaProp.adcode)?.count ?? 0
|
||||
}
|
||||
})
|
||||
value:
|
||||
result.count.find((el) => el.code == areaProp.adcode)?.count ?? 0,
|
||||
};
|
||||
});
|
||||
|
||||
registerMap("map", {geoJSON, specialAreas: {}})
|
||||
options.series[0].data = mapData.value
|
||||
myEcharts.value.setOption(
|
||||
options
|
||||
)
|
||||
loading.value = false
|
||||
registerMap("map", { geoJSON, specialAreas: {} });
|
||||
options.series[0].data = mapData.value;
|
||||
myEcharts.value.setOption(options);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 返回地图上一级
|
||||
const backMap = () => {
|
||||
// loadDistrict(parentAdcode)
|
||||
loadDistrict("100000")
|
||||
}
|
||||
|
||||
loadDistrict("100000");
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await loadAMap()
|
||||
myEcharts.value = init(mapRef.value)
|
||||
myEcharts.value.on('click', mapClick)
|
||||
loadDistrict("100000")
|
||||
})
|
||||
await loadAMap();
|
||||
myEcharts.value = init(mapRef.value);
|
||||
myEcharts.value.on("click", mapClick);
|
||||
loadDistrict("100000");
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据adcode判断省市区级别
|
||||
@ -211,105 +220,101 @@ onMounted(async () => {
|
||||
* @return {number} 国家: 0 省: 1 市: 2 区: 3
|
||||
*/
|
||||
const getLevel = (adcode) => {
|
||||
adcode = adcode.toString()
|
||||
if (adcode === '100000') {
|
||||
return 0
|
||||
adcode = adcode.toString();
|
||||
if (adcode === "100000") {
|
||||
return 0;
|
||||
}
|
||||
const splitPattern = /(\d{2})(\d{2})(\d{2})/;
|
||||
const resultArray = adcode.match(splitPattern).slice(1);
|
||||
// 国家: 0 省: 1 市: 2 区: 3
|
||||
let result = resultArray.indexOf("00")
|
||||
let result = resultArray.indexOf("00");
|
||||
if (result === -1) {
|
||||
result = 3
|
||||
result = 3;
|
||||
}
|
||||
return result
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const mapClick = (ev) => {
|
||||
const level = getLevel(ev.data.adcode)
|
||||
const level = getLevel(ev.data.adcode);
|
||||
if (level === 3) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
loadDistrict(ev.data.adcode)
|
||||
}
|
||||
|
||||
loadDistrict(ev.data.adcode);
|
||||
};
|
||||
|
||||
const playScrollAnimation = (direction, start) => {
|
||||
const pageWrap = document.querySelector('.page-wrap')
|
||||
const rootWrap = document.querySelector('.root-container')
|
||||
html2canvas(pageWrap).then(canvas => {
|
||||
const pageWrap = document.querySelector(".page-wrap");
|
||||
const rootWrap = document.querySelector(".root-container");
|
||||
html2canvas(pageWrap).then((canvas) => {
|
||||
canvas.addEventListener("wheel", (ev) => {
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault()
|
||||
})
|
||||
if (direction === 'down') {
|
||||
rootWrap.insertBefore(canvas, pageWrap)
|
||||
} else if (direction === 'up') {
|
||||
rootWrap.appendChild(canvas)
|
||||
rootWrap.style.transform = 'translateY(-100%)'
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
if (direction === "down") {
|
||||
rootWrap.insertBefore(canvas, pageWrap);
|
||||
} else if (direction === "up") {
|
||||
rootWrap.appendChild(canvas);
|
||||
rootWrap.style.transform = "translateY(-100%)";
|
||||
}
|
||||
anime({
|
||||
targets: rootWrap,
|
||||
translateY: direction === 'down' ? "-100%" : "0",
|
||||
translateY: direction === "down" ? "-100%" : "0",
|
||||
duration: 300,
|
||||
easing: 'linear',
|
||||
easing: "linear",
|
||||
begin: start,
|
||||
complete: () => {
|
||||
rootWrap.removeChild(canvas)
|
||||
rootWrap.style.transform = 'translateY(0%)'
|
||||
isScrolling.value = false
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
rootWrap.removeChild(canvas);
|
||||
rootWrap.style.transform = "translateY(0%)";
|
||||
isScrolling.value = false;
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const isScrolling = ref(false)
|
||||
const isScrolling = ref(false);
|
||||
const handleScroll = async (ev) => {
|
||||
let direction = ev.deltaY > 0 ? 'down' : 'up'
|
||||
let direction = ev.deltaY > 0 ? "down" : "up";
|
||||
// 判断滚轮滚动方向
|
||||
if (direction === 'down' && mapIndex.value >= methods.length - 1 || direction === 'up' && mapIndex.value <= 0) {
|
||||
return
|
||||
if (
|
||||
(direction === "down" && mapIndex.value >= methods.length - 1) ||
|
||||
(direction === "up" && mapIndex.value <= 0)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
if (isScrolling.value) {
|
||||
return;
|
||||
}
|
||||
isScrolling.value = true
|
||||
playScrollAnimation(direction, () => {
|
||||
})
|
||||
if (direction === 'down' && mapIndex.value < methods.length - 1) {
|
||||
emit("changeMapIndex", mapIndex.value + 1)
|
||||
} else if (direction === 'up' && mapIndex.value > 0) {
|
||||
emit("changeMapIndex", mapIndex.value - 1)
|
||||
isScrolling.value = true;
|
||||
playScrollAnimation(direction, () => {});
|
||||
if (direction === "down" && mapIndex.value < methods.length - 1) {
|
||||
emit("changeMapIndex", mapIndex.value + 1);
|
||||
} else if (direction === "up" && mapIndex.value > 0) {
|
||||
emit("changeMapIndex", mapIndex.value - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(mapIndex, (newVal, oldVal) => {
|
||||
console.log(`mapIndex change from ${oldVal} to ${newVal}`)
|
||||
console.log(`mapIndex change from ${oldVal} to ${newVal}`);
|
||||
if (newVal === oldVal) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
isScrolling.value = true
|
||||
const direction = newVal > oldVal ? 'down' : 'up'
|
||||
playScrollAnimation(direction, () => {
|
||||
})
|
||||
loadDistrict("100000")
|
||||
})
|
||||
isScrolling.value = true;
|
||||
const direction = newVal > oldVal ? "down" : "up";
|
||||
playScrollAnimation(direction, () => {});
|
||||
loadDistrict("100000");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="root-wrap">
|
||||
<div class="root-container">
|
||||
<div class="page-wrap" @wheel="handleScroll">
|
||||
<div class="title">{{
|
||||
methods[mapIndex].title
|
||||
}}
|
||||
</div>
|
||||
<div v-if="loading" class="loading-modal">
|
||||
</div>
|
||||
<div class="title">{{ methods[mapIndex].title }}</div>
|
||||
<div v-if="loading" class="loading-modal"></div>
|
||||
<!-- 返回上一级按钮 -->
|
||||
<div class="back-btn" @click="backMap">
|
||||
<img :src="backBtnPng" alt="back"/>
|
||||
<img :src="backBtnPng" alt="back" />
|
||||
</div>
|
||||
<!-- 人数表格 -->
|
||||
<div class="count-table area">
|
||||
@ -321,14 +326,16 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div v-for="item in areaCountPaged"
|
||||
:key="item.adcode" class="tr">
|
||||
<div v-for="item in areaCountPaged" :key="item.adcode" class="tr">
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="count">{{ item.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RegionPagine v-model:page="leftBoxPageNum" :total="areaCount.length"/>
|
||||
<RegionPagine
|
||||
v-model:page="leftBoxPageNum"
|
||||
:total="areaCount.length"
|
||||
/>
|
||||
</div>
|
||||
<!-- 领域 -->
|
||||
<div class="count-table industry">
|
||||
@ -340,26 +347,34 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div v-for="item in industryCountPaged"
|
||||
:key="item.adcode" class="tr">
|
||||
<div
|
||||
v-for="item in industryCountPaged"
|
||||
:key="item.adcode"
|
||||
class="tr"
|
||||
>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="count">{{ item.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RegionPagine v-model:page="rightBoxPageNum" :total="industryCount.length"/>
|
||||
<RegionPagine
|
||||
v-model:page="rightBoxPageNum"
|
||||
:total="industryCount.length"
|
||||
/>
|
||||
</div>
|
||||
<div id="map-container" ref="mapRef"></div>
|
||||
<div
|
||||
id="container"
|
||||
style="width: 100%; height: 100%; background-color: rgb(0, 0, 0); display: none"
|
||||
>
|
||||
</div>
|
||||
id="container"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
display: none;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -439,12 +454,15 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
.table {
|
||||
border: 1px solid #0054ff;
|
||||
|
||||
.head, .body {
|
||||
.tr, .th {
|
||||
.head,
|
||||
.body {
|
||||
.tr,
|
||||
.th {
|
||||
display: flex;
|
||||
color: white;
|
||||
|
||||
.title, .count {
|
||||
.title,
|
||||
.count {
|
||||
width: 100px;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
@ -462,7 +480,6 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
.tr {
|
||||
color: rgb(161, 192, 255);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -474,7 +491,6 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//@keyframes page-scroll {
|
||||
// 0% {
|
||||
// transform: translateY(0);
|
||||
@ -483,4 +499,4 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
// transform: translateY(-100%);
|
||||
// }
|
||||
//}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div v-loading="loading" class="box3">
|
||||
<div class="tit">专家分布地图</div>
|
||||
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||
<img src="./img/back_button.png"/>
|
||||
<img src="./img/back_button.png" />
|
||||
</div>
|
||||
<!-- echartsDom 兼容缩放 -->
|
||||
<div id="map" ref="map" class="map echartsDom"></div>
|
||||
@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<template v-if="snapTree.length > 0">
|
||||
<div
|
||||
v-for="v in snapTree.slice(
|
||||
v-for="v in snapTree.slice(
|
||||
(leftBoxPageNum - 1) * 5,
|
||||
leftBoxPageNum * 5
|
||||
)"
|
||||
@ -27,9 +27,9 @@
|
||||
<div class="b">暂无</div>
|
||||
</div>
|
||||
<RegionPagine
|
||||
v-if="snapTree.length"
|
||||
v-model:page="leftBoxPageNum"
|
||||
:total="snapTree.length"
|
||||
v-if="snapTree.length"
|
||||
v-model:page="leftBoxPageNum"
|
||||
:total="snapTree.length"
|
||||
></RegionPagine>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
@ -38,8 +38,8 @@
|
||||
<div class="b">专家数量</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(v, k) in industryTree"
|
||||
v-if="Object.keys(industryTree).length > 0"
|
||||
v-for="(v, k) in industryTree"
|
||||
v-if="Object.keys(industryTree).length > 0"
|
||||
>
|
||||
<div :title="k" class="a">{{ k }}</div>
|
||||
<div class="b">{{ v ?? 0 }}</div>
|
||||
@ -53,15 +53,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, onMounted, reactive} from "vue";
|
||||
import {countExpertByArea, countExpertByCity, countExpertByProvince,} from "../../../../api/website/home/index";
|
||||
import { getCurrentInstance, onMounted, reactive } from "vue";
|
||||
import {
|
||||
countExpertByArea,
|
||||
countExpertByCity,
|
||||
countExpertByProvince,
|
||||
} from "../../../../api/website/home/index";
|
||||
// return;
|
||||
// console.log(echarts);
|
||||
import * as echarts from "echarts";
|
||||
import RegionPagine from "./RegionPagine.vue";
|
||||
// import { ElMessage } from "element-plus";
|
||||
|
||||
const {proxy} = getCurrentInstance();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const loading = shallowRef(true);
|
||||
|
||||
let treeData = {};
|
||||
@ -74,9 +78,9 @@ const searchRegionData = async (code, level) => {
|
||||
let data = {};
|
||||
|
||||
if (
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 2) == code.substring(0, 2) &&
|
||||
snapTree.value[0].code.substring(2, 4) != code.substring(2, 4)
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 2) == code.substring(0, 2) &&
|
||||
snapTree.value[0].code.substring(2, 4) != code.substring(2, 4)
|
||||
) {
|
||||
data = snapTree.value;
|
||||
} else {
|
||||
@ -90,9 +94,9 @@ const searchRegionData = async (code, level) => {
|
||||
const ctcode = code.substring(0, 4) + "00";
|
||||
let data = {};
|
||||
if (
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 4) == code.substring(0, 4) &&
|
||||
snapTree.value[0].code.substring(4, 6) != code.substring(4, 6)
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 4) == code.substring(0, 4) &&
|
||||
snapTree.value[0].code.substring(4, 6) != code.substring(4, 6)
|
||||
) {
|
||||
data = snapTree.value;
|
||||
} else {
|
||||
@ -108,7 +112,7 @@ const searchRegionData = async (code, level) => {
|
||||
snapTree.value = treeData.count ?? [];
|
||||
return treeData.count.find((item) => item.code == code) || false;
|
||||
} else {
|
||||
const {count, industry} = await countExpertByProvince();
|
||||
const { count, industry } = await countExpertByProvince();
|
||||
industryTree.value = industry ?? {};
|
||||
return count.find((item) => item.code == code) || false;
|
||||
}
|
||||
@ -139,8 +143,7 @@ function deepFindTree(code, tree) {
|
||||
return snap;
|
||||
}
|
||||
|
||||
const getIndustry = () => {
|
||||
};
|
||||
const getIndustry = () => {};
|
||||
|
||||
// function getIndustry(object) {
|
||||
// let snap = {};
|
||||
@ -360,8 +363,8 @@ function loadMapData(areaCode) {
|
||||
console.log("------------------");
|
||||
for (var i = 0; i < mapJson.features.length; i++) {
|
||||
if (
|
||||
mapJson.features[i].properties.adcode == 810000 ||
|
||||
mapJson.features[i].properties.adcode == 820000
|
||||
mapJson.features[i].properties.adcode == 810000 ||
|
||||
mapJson.features[i].properties.adcode == 820000
|
||||
) {
|
||||
mapJson.features.splice(i, 1); // 删除下标为i 的元素,i开始只删除一个就它自己了
|
||||
i--; // 删除一个元素后数组长度减一了
|
||||
@ -385,10 +388,10 @@ function loadMap(mapName, data) {
|
||||
orient: "horizontal", //图例排列方向
|
||||
padding: 5,
|
||||
pieces: [
|
||||
{gte: 0, lte: 99, label: "99", color: "#CAE9FD"},
|
||||
{gte: 100, lte: 299, label: "100-299", color: "#7ED2F7"},
|
||||
{gte: 300, lte: 499, label: "299-499", color: "#039DDD"},
|
||||
{gte: 500, label: "500", color: "#0D4884"},
|
||||
{ gte: 0, lte: 99, label: "99", color: "#CAE9FD" },
|
||||
{ gte: 100, lte: 299, label: "100-299", color: "#7ED2F7" },
|
||||
{ gte: 300, lte: 499, label: "299-499", color: "#039DDD" },
|
||||
{ gte: 500, label: "500", color: "#0D4884" },
|
||||
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||
// {min: 60, label: '危险', color: '#c23c33'},
|
||||
@ -469,7 +472,7 @@ function loadMap(mapName, data) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
font-family: Source Han Sans CN,sans-serif;
|
||||
font-family: Source Han Sans CN, sans-serif;
|
||||
font-weight: 300;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
@ -2,33 +2,33 @@
|
||||
<div ref="fullPageRef" v-loading="loading" class="fullPage">
|
||||
<div class="indicator">
|
||||
<div
|
||||
v-for="idx in 6"
|
||||
:id="idx.toString()"
|
||||
:key="idx"
|
||||
:class="`${indicatorActiveIndex == idx ? 'active' : ''}`"
|
||||
class="point"
|
||||
@click="handleIndicatorClick(idx)"
|
||||
v-for="idx in 6"
|
||||
:id="idx.toString()"
|
||||
:key="idx"
|
||||
:class="`${indicatorActiveIndex == idx ? 'active' : ''}`"
|
||||
class="point"
|
||||
@click="handleIndicatorClick(idx)"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
ref="fullPageContainerRef"
|
||||
:data-index="state.fullpage.current"
|
||||
class="fullPageContainer"
|
||||
@mousewheel="mouseWheelHandle"
|
||||
ref="fullPageContainerRef"
|
||||
:data-index="state.fullpage.current"
|
||||
class="fullPageContainer"
|
||||
@mousewheel="mouseWheelHandle"
|
||||
>
|
||||
<!-- @DOMMouseScroll="mouseWheelHandle" -->
|
||||
<div
|
||||
v-for="(item, $index) in state.boxList"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
class="section"
|
||||
v-for="(item, $index) in state.boxList"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
class="section"
|
||||
>
|
||||
<!-- v-if="`index${state.fullpage.current}` == item.title" -->
|
||||
<component
|
||||
:is="item.comp"
|
||||
v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
|
||||
:map-index="mapIndex"
|
||||
@changeMapIndex="mapIndex = $event"
|
||||
:is="item.comp"
|
||||
v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
|
||||
:map-index="mapIndex"
|
||||
@changeMapIndex="mapIndex = $event"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,8 +52,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, onMounted, reactive, ref, shallowRef,} from "vue";
|
||||
import index0 from "./comp/index0.vue"
|
||||
import { computed, onMounted, reactive, ref, shallowRef } from "vue";
|
||||
import index0 from "./comp/index0.vue";
|
||||
import index1 from "./comp/index1.vue";
|
||||
import index8 from "./comp/index8.vue";
|
||||
|
||||
@ -63,12 +63,12 @@ setTimeout(() => {
|
||||
}, 500);
|
||||
const fullPageRef = ref();
|
||||
const fullPageContainerRef = ref();
|
||||
const mapIndex = ref(0) // 0-3
|
||||
const mapRef = ref()
|
||||
const mapIndex = ref(0); // 0-3
|
||||
const mapRef = ref();
|
||||
onMounted(() => {
|
||||
fullPageContainerRef.value.addEventListener(
|
||||
"DOMMouseScroll",
|
||||
mouseWheelHandle
|
||||
"DOMMouseScroll",
|
||||
mouseWheelHandle
|
||||
);
|
||||
});
|
||||
// onUnmounted(() => {
|
||||
@ -81,7 +81,6 @@ onMounted(() => {
|
||||
const len = computed(() => state.boxList.length);
|
||||
// const len = ref(6);
|
||||
|
||||
|
||||
const next = () => {
|
||||
// 往下切换
|
||||
// TODO:
|
||||
@ -149,7 +148,6 @@ let state = reactive({
|
||||
},
|
||||
showBox: 0,
|
||||
boxList: [
|
||||
|
||||
{
|
||||
comp: shallowRef(index1),
|
||||
zIndex: 1,
|
||||
@ -174,32 +172,30 @@ let state = reactive({
|
||||
|
||||
const indicatorActiveIndex = computed(() => {
|
||||
if (state.fullpage.current === 1) {
|
||||
return 1
|
||||
return 1;
|
||||
} else if (state.fullpage.current === 2) {
|
||||
return mapIndex.value + 2
|
||||
return mapIndex.value + 2;
|
||||
} else {
|
||||
return state.fullpage.current + 3
|
||||
return state.fullpage.current + 3;
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
// 点击 indicator 时
|
||||
const handleIndicatorClick = (idx) => {
|
||||
console.log(idx)
|
||||
let boxIndex
|
||||
console.log(idx);
|
||||
let boxIndex;
|
||||
let _mapIndex;
|
||||
if (idx === 1) {
|
||||
boxIndex = 1
|
||||
_mapIndex = null
|
||||
boxIndex = 1;
|
||||
_mapIndex = null;
|
||||
} else if (idx <= 5) {
|
||||
boxIndex = 2
|
||||
_mapIndex = idx - 2
|
||||
boxIndex = 2;
|
||||
_mapIndex = idx - 2;
|
||||
} else {
|
||||
boxIndex = 3
|
||||
_mapIndex = null
|
||||
boxIndex = 3;
|
||||
_mapIndex = null;
|
||||
}
|
||||
|
||||
|
||||
if (boxIndex > state.fullpage.current) {
|
||||
for (let i = state.fullpage.current; i < boxIndex; i++) {
|
||||
next();
|
||||
@ -212,9 +208,8 @@ const handleIndicatorClick = (idx) => {
|
||||
if (_mapIndex !== null && _mapIndex !== mapIndex.value) {
|
||||
// mapRef.value?.loadMapByIndex(_mapIndex)
|
||||
// console.log(mapRef.value.loadMapByIndex)
|
||||
mapIndex.value = _mapIndex
|
||||
mapIndex.value = _mapIndex;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
Reference in New Issue
Block a user