From 225e92ed4fd01dd9be529d7f9e5e546e05a0d277 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期一, 22 七月 2024 15:01:16 +0800
Subject: [PATCH] 添加来访信息
---
src/views/main/components/selectColor.vue | 91 +++
src/assets/icon/icon3.png | 0
src/views/infomanger/infoLook/components/export.vue | 63 ++
src/api/system/company/company.ts | 23
src/assets/icon/icon2.png | 0
src/views/infomanger/infoLook/components/exportRecord.vue | 155 ++++++
src/views/main/components/theme.vue | 42 +
src/permission.ts | 2
src/views/main/indexMarge.vue | 552 +++++++++++++++++++++++
src/views/infomanger/infoLook/index.vue | 318 +++++++++++++
.env.development | 5
src/assets/icon/icon1.png | 0
src/views/infomanger/infoLook/components/judge.vue | 67 ++
src/assets/icon/icon4.png | 0
src/views/infomanger/infoLook/components/createQrcode.vue | 105 ++++
index.html | 2
src/router/index.ts | 5
17 files changed, 1,427 insertions(+), 3 deletions(-)
diff --git a/.env.development b/.env.development
index 7b8fc5a..8ce352a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,10 +1,11 @@
# 椤甸潰鏍囬
-VITE_APP_TITLE = 鍏ヤ紒鎵爜
+VITE_APP_TITLE = 鎯犱紒鎵ф硶
# 寮�鍙戠幆澧冮厤缃�
VITE_APP_ENV = 'development'
-VITE_APP_BASE = 'http://172.16.61.34:8089'
+# VITE_APP_BASE = 'http://172.16.61.31:8089'
+VITE_APP_BASE = 'http://172.16.60.184:8089'
# VITE_APP_BASE = 'http://172.16.61.34:8089'
#VITE_APP_BASE = 'http://localhost:8089'
diff --git a/index.html b/index.html
index 7cfb61d..3c2e529 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- <link rel="icon" href="/logo.ico" /> -->
<title>鎯犱紒鎵ф硶</title>
+ <script src='//webapi.amap.com/maps?v=2.0&key=a3472b04ae282cabb61670b13c7b90ab' type="text/javascript"></script>
+ <script src="//webapi.amap.com/ui/1.1/main.js"></script>
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
diff --git a/src/api/system/company/company.ts b/src/api/system/company/company.ts
index 6370335..b5f4244 100644
--- a/src/api/system/company/company.ts
+++ b/src/api/system/company/company.ts
@@ -326,4 +326,27 @@
method: 'get',
params: data
})
+}
+// /enforce/company/log/list
+export function listCompanyLog(data) {
+ return request({
+ url: `/enforce/company/log/list`,
+ method: 'get',
+ params: data
+ })
+}
+// /enforce/company/log/upd
+export function updCompanyLog(data) {
+ return request({
+ url: `/enforce/company/log/upd`,
+ method: 'post',
+ data: data
+ })
+}
+// /enforce/company/log/{ids}
+export function delCompanyLog(data) {
+ return request({
+ url: `/enforce/company/log/${data.delId}`,
+ method: 'DELETE',
+ })
}
\ No newline at end of file
diff --git a/src/assets/icon/icon1.png b/src/assets/icon/icon1.png
new file mode 100644
index 0000000..e8721fa
--- /dev/null
+++ b/src/assets/icon/icon1.png
Binary files differ
diff --git a/src/assets/icon/icon2.png b/src/assets/icon/icon2.png
new file mode 100644
index 0000000..76d2091
--- /dev/null
+++ b/src/assets/icon/icon2.png
Binary files differ
diff --git a/src/assets/icon/icon3.png b/src/assets/icon/icon3.png
new file mode 100644
index 0000000..00e102c
--- /dev/null
+++ b/src/assets/icon/icon3.png
Binary files differ
diff --git a/src/assets/icon/icon4.png b/src/assets/icon/icon4.png
new file mode 100644
index 0000000..a3099c5
--- /dev/null
+++ b/src/assets/icon/icon4.png
Binary files differ
diff --git a/src/permission.ts b/src/permission.ts
index 01a2216..54ce5bf 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -11,7 +11,7 @@
NProgress.configure({ showSpinner: false });
-const whiteList = ["/login", "/register"];
+const whiteList = ["/login", "/register", "/main"];
router.beforeEach((to, from, next) => {
NProgress.start();
diff --git a/src/router/index.ts b/src/router/index.ts
index cf80dec..a6769dd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
import { createWebHistory, createRouter, RouteRecordRaw } from "vue-router";
/* Layout */
import Layout from "@/layout/index.vue";
+import path from "path";
/**
* Note: 璺敱閰嶇疆椤�
@@ -58,6 +59,10 @@
hidden: true,
},
{
+ path: '/main',
+ component: () => import("@/views/main/indexMarge.vue"),
+ },
+ {
path: "",
component: Layout,
redirect: "/home",
diff --git a/src/views/infomanger/infoLook/components/createQrcode.vue b/src/views/infomanger/infoLook/components/createQrcode.vue
new file mode 100644
index 0000000..87aa2da
--- /dev/null
+++ b/src/views/infomanger/infoLook/components/createQrcode.vue
@@ -0,0 +1,105 @@
+<template>
+ <el-dialog title="浜岀淮鐮�" v-model="dialogVisible" width="300px" @close="closeDialog">
+ <div class="text-center">
+ <vueQr ref="query" background="#fff" :text="info.companyCode"></vueQr>
+ <div style="font-weight: bold;margin-bottom: 10px;">娌堜笜鎯犱紒鎵ф硶</div>
+
+ <div>{{ info.companyName }}</div>
+ <div style="margin-top: 10px;">
+ <el-link @click="downImage" type="primary">涓嬭浇浼佷笟鐮�</el-link>
+ </div>
+ </div>
+ <canvas ref="canvasRef" style="position: absolute; left: 0; top: 2210px;background-color: white; display: none;"></canvas>
+ </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'
+let dialogVisible = ref(false)
+const canvasRef = ref()
+const info = ref({})
+const query = ref()
+function openDialog(row) {
+ // console.log(row)
+ info.value = row
+ dialogVisible.value = true
+}
+function closeDialog() {
+ dialogVisible.value = false
+}
+function downImage() {
+ drawText()
+ const imageUrl = canvasRef.value.toDataURL('image/png')
+ // console.log(query.value.imgUrl)
+ let aLink = document.createElement('a')
+ let blob = base64ToBlob(imageUrl)
+ let evt = document.createEvent("HTMLEvents")
+ evt.initEvent("click", true, true) // initEvent 涓嶅姞鍚庝袱涓弬鏁板湪FF涓嬩細鎶ラ敊 浜嬩欢绫诲瀷锛屾槸鍚﹀啋娉★紝鏄惁闃绘娴忚鍣ㄧ殑榛樿琛屼负
+ aLink.download = "浜岀淮鐮�.png"
+ aLink.href = URL.createObjectURL(blob);
+ // aLink.dispatchEvent(evt);
+ aLink.click()
+}
+function drawText() {
+ const canvas = canvasRef.value;
+ canvas.width = 350;
+ canvas.height = 380;
+ canvas.style.width = '350px';
+ canvas.style.height = '380px';
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = "#fff"
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ let img = new Image();
+ img.src = query.value.imgUrl;
+ const text = info.value.companyName;
+
+ ctx.drawImage(img, 10, 0, 320, 320);
+ // ctx.font = '20px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillStyle = '#000';
+ // ctx.setFontWeight('bold')
+ ctx.font ='bold 20px Arial'
+ wrapText(ctx, "娌堜笜鎯犱紒鎵ф硶", 180, 320, 350, 40)
+ // ctx.setFontWeight('normal')
+ ctx.font ="20px Arial"
+ wrapText(ctx, text, 180, 350, 350, 20)
+ }
+ function wrapText(context, text, x, y, maxWidth, lineHeight) {
+ var words = text.split('');
+ var line = '';
+ for(var n = 0; n < words.length; n++) {
+ var testLine = line + words[n] + ' ';
+ var metrics = context.measureText(testLine);
+ var testWidth = metrics.width;
+ if (testWidth > maxWidth && n > 0) {
+ context.fillText(line, x, y);
+ line = words[n] + ' ';
+ y += lineHeight;
+ }
+ else {
+ line = testLine;
+ }
+ }
+ if(line) {
+ context.fillText(line, x, y);
+ }
+}
+function base64ToBlob(code) {
+ let parts = code.split(';base64,')
+ let contentType = parts[0].split(':')[1]
+ let raw = window.atob(parts[1])
+ let rawLength = raw.length
+ let uInt8Array = new Uint8Array(rawLength)
+ for (let i = 0; i < rawLength; ++i) {
+ uInt8Array[i] = raw.charCodeAt(i)
+ }
+ return new Blob([uInt8Array], {type: contentType})
+ }
+defineExpose({
+ openDialog,
+ closeDialog
+})
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/infomanger/infoLook/components/export.vue b/src/views/infomanger/infoLook/components/export.vue
new file mode 100644
index 0000000..10ddd51
--- /dev/null
+++ b/src/views/infomanger/infoLook/components/export.vue
@@ -0,0 +1,63 @@
+<template>
+ <el-dialog title="鐢ㄦ埛瀵煎叆" v-model="dialogVisible" width="900px" append-to-body @close="cloaseDialog"
+ >
+ <el-form label-width="80px">
+ <el-form-item label="涓嬭浇妯℃澘">
+ <el-link type="primary" @click="downLoad">浼佷笟淇℃伅瀵煎叆妯℃澘.xlsx</el-link>
+ </el-form-item>
+ <el-form-item label="閫夊彇鏂囦欢">
+ <FileUpload :limit="1" :fileType="['cvs', 'xlsx']" v-model="form.exportNews.file" @resList="resList"></FileUpload>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div style="text-align: center;">
+ <el-button @click="cloaseDialog" >鍏抽棴</el-button>
+ </div>
+ </template>
+ </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import FileUpload from '@/components/FileUpload/handlerImport.vue'
+import { download as downloadHttp} from '@/utils/request'
+import { downTemplate, importTemplate, doImport, exportTemplate } from '@/api/system/company/company'
+const { proxy } = getCurrentInstance();
+const dialogVisible = ref(false)
+const emit = defineEmits()
+const form = reactive({
+ exportNews: {}
+})
+function openDialog() {
+ dialogVisible.value = true
+}
+
+function cloaseDialog() {
+ dialogVisible.value = false
+}
+function downLoad() {
+ exportTemplate().then(val => {
+ downloadHttp('/tool/file/download', {
+ fileName: val.msg,
+ delete: true
+ }, "浼佷笟淇℃伅妯℃澘.xlsx")
+ })
+}
+function startExport() {
+ uploadFile()
+}
+function resList(row) {
+ cloaseDialog()
+ emit('resList', row)
+}
+defineExpose({
+ openDialog,
+ cloaseDialog
+})
+</script>
+<style scoped>
+.dialog-footer button:first-child {
+ margin-right: 10px;
+}
+</style>
diff --git a/src/views/infomanger/infoLook/components/exportRecord.vue b/src/views/infomanger/infoLook/components/exportRecord.vue
new file mode 100644
index 0000000..6879481
--- /dev/null
+++ b/src/views/infomanger/infoLook/components/exportRecord.vue
@@ -0,0 +1,155 @@
+<template>
+ <el-dialog title="瀵煎叆璁板綍" v-model="dialogVisible" width="1200px" append-to-body @close="closeDialog"
+ >
+ <el-table :data="recordValue" border>
+ <el-table-column label="浼佷笟鍚�(浼佷笟鍏ㄧО)" prop="companyName">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input v-model="scope.row.companyName" @blur="checkImport(scope.row, scope.$index)"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 0)" :content="scope.row.errorList.find(item => item.index == 0).msg">
+ <div class="ml5">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="缁熶竴绀句細淇＄敤浠ｇ爜" prop="companyCode">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input v-model="scope.row.companyCode" @blur="checkImport(scope.row, scope.$index)"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 1)" :content="scope.row.errorList.find(item => item.index == 1).msg">
+ <div class="ml5">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="浼佷笟鑱旂郴浜�" prop="companyUser">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input v-model="scope.row.companyUser" @blur="checkImport(scope.row, scope.$index)"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 2)" :content="scope.row.errorList.find(item => item.index == 2).msg">
+ <div class="ml5" v-if="scope.row.errorList.length &&scope.row.errorList.find(item => item.index == 2)">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+
+ </div>
+
+ </template>
+ </el-table-column>
+ <el-table-column label="鑱旂郴浜虹數璇�" prop="companyPhone">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input type="numer" :maxlength="11" v-model="scope.row.companyPhone" @blur="checkImport(scope.row, scope.$index, 'companyPhone')"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 3)" :content="scope.row.errorList.find(item => item.index == 3).msg">
+ <div class="ml5">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+
+ </div>
+
+ </template>
+ </el-table-column>
+ <el-table-column label="浼佷笟鍦板潃" prop="companyAddress">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input v-model="scope.row.companyAddress" @blur="checkImport(scope.row, scope.$index)"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 4)" :content="scope.row.errorList.find(item => item.index == 4).msg">
+ <div class="ml5" v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 4)">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+ </div>
+
+ </template>
+ </el-table-column>
+ <el-table-column label="澶囨敞" prop="mark">
+ <template #default="scope">
+ <div class="flex-box-per">
+ <el-input v-model="scope.row.mark" @blur="checkImport(scope.row, scope.$index)"></el-input>
+ <el-tooltip v-if="scope.row.errorList.length && scope.row.errorList.find(item => item.index == 5)" :content="scope.row.errorList.find(item => item.index == 5).msg">
+ <div class="ml5">
+ <el-icon size="large" color="red" class="ml5"><CircleCloseFilled /></el-icon>
+ </div>
+ </el-tooltip>
+
+ </div>
+
+ </template>
+ </el-table-column>
+ </el-table>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDialog">鍙� 娑�</el-button>
+ <el-button type="primary" @click="addCompany">纭� 瀹�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { checkImport as checkImportHttp, saveImport } from '@/api/system/company/company'
+import { ElMessage} from 'element-plus'
+const dialogVisible = ref(false)
+const emits = defineEmits()
+const props = defineProps({
+ recordRow: { type: Array, default: () => [] },
+})
+const recordValue = ref([])
+watch(() => props.recordRow, (newValue) => {
+ // console.log(props.recordRow)
+ recordValue.value = newValue
+})
+function openDialog() {
+ dialogVisible.value = true
+}
+function closeDialog() {
+ dialogVisible.value = false
+}
+function checkImport(row, index, item) {
+ // row.companyPhone
+ if(item && item == 'companyPhone') {
+ if(row.companyPhone) {
+ const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
+ if(!reg.test(row.companyPhone)){
+ ElMessage.error('璇疯緭鍏ユ纭殑鎵嬫満鍙�')
+ }
+ }
+ }
+ checkImportHttp({voList: [row]}).then(val => {
+ // recordValue.value.splice(index, 1, val.data.voList[0])
+ recordValue.value[index] = val.data.voList[0]
+ // ElMessage.success('淇敼鎴愬姛')
+ })
+}
+function addCompany() {
+ saveImport({voList: recordValue.value}).then(val =>{
+ ElMessage.success('瀵煎叆鎴愬姛')
+ closeDialog()
+ emits('uploadList')
+ })
+}
+defineExpose({
+ openDialog,
+ closeDialog
+})
+</script>
+<style >
+.dialog-footer{
+ text-align: center;
+}
+.flex-box-per{
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+.ml5{
+ /* margin-left: 5px; */
+ line-height: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/infomanger/infoLook/components/judge.vue b/src/views/infomanger/infoLook/components/judge.vue
new file mode 100644
index 0000000..d86aaee
--- /dev/null
+++ b/src/views/infomanger/infoLook/components/judge.vue
@@ -0,0 +1,67 @@
+<template>
+ <el-dialog title="瀹℃牳" v-model="dialogVisible" width="900px" append-to-body @close="cloaseDialog"
+ >
+ <el-form>
+ <!-- <el-form-item label="瀹℃牳绫诲瀷">
+ <el-select style="width: 200px;" v-model="form.checkType">
+ <el-option label="浼佷笟瀹℃壒" value="1"></el-option>
+ <el-option label="浼佷笟瀹℃壒" value="2"></el-option>
+ </el-select>
+ </el-form-item> -->
+ <el-form-item label="瀹℃牳鐘舵��">
+ <el-radio-group v-model="form.checkStatus" class="ml-4">
+ <el-radio value="1" size="large">閫氳繃</el-radio>
+ <el-radio value="-1" size="large">鎷掔粷</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="瀹℃牳璇存槑">
+ <el-input type="textarea" v-model="form.checkReason" ></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div style="text-align: center;">
+ <el-button @click="cloaseDialog" >鍏抽棴</el-button>
+ <el-button @click="checkOrder" type="primary">纭</el-button>
+ </div>
+ </template>
+ </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { checkOrder as httpCheck } from '@/api/system/company/company'
+import { ElMessage } from 'element-plus'
+const dialogVisible = ref(false)
+const info = ref({})
+const emit:any = defineEmits()
+const form: any = reactive({
+ checkStatus: '1'
+})
+const cloaseDialog = () => {
+ dialogVisible.value = false
+}
+const openDialog = (row: { companyId?: any }) => {
+ info.value = row
+ form['ids'] = [row.companyId]
+ form['checkType'] = 1
+ form['checkReason'] = ''
+ dialogVisible.value = true
+}
+function checkOrder() {
+ if(!form['checkStatus']) {
+ ElMessage.error('璇峰～鍐欏鏍哥姸鎬�')
+ return
+ }
+ if(form['checkStatus'] == -1 && !form.checkReason) {
+ ElMessage.error('璇峰～鍐欏鏍歌鏄�')
+ return
+ }
+ httpCheck(form).then(res => {
+ cloaseDialog()
+ emit('upload')
+ })
+}
+defineExpose({
+ openDialog,
+ cloaseDialog
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infomanger/infoLook/index.vue b/src/views/infomanger/infoLook/index.vue
new file mode 100644
index 0000000..4946107
--- /dev/null
+++ b/src/views/infomanger/infoLook/index.vue
@@ -0,0 +1,318 @@
+<template>
+ <div class="app-container">
+ <el-form :model="queryParams" ref="queryRef" class="evenly-distributed-labels" :inline="true" v-show="showSearch" label-width="80px" label-position="left">
+ <el-form-item label="浼佷笟鍚嶇О" prop="companyName">
+ <el-input v-model="queryParams.companyName" placeholder="璇疯緭鍏ヤ紒涓氬悕绉�" clearable style="width: 200px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="浼佷笟缂栧彿" prop="companyCode">
+ <el-input v-model="queryParams.companyCode" placeholder="璇疯緭鍏ヤ紒涓氱紪鍙�" clearable style="width: 200px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鑱旂郴浜�" prop="companyUser">
+ <el-input v-model="queryParams.companyUser" placeholder="璇疯緭鍏ヨ仈绯讳汉" clearable style="width: 200px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙�" prop="companyPhone">
+ <el-input v-model="queryParams.companyPhone" type="number" placeholder="璇疯緭鍏ユ墜鏈哄彿" clearable style="width: 200px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-table
+ v-if="refreshTable"
+ v-loading="loading"
+ :data="deptList"
+ row-key="deptId"
+ :default-expand-all="isExpandAll"
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+ >
+ <el-table-column prop="companyName" label="浼佷笟鍚嶇О" minWidth="300"></el-table-column>
+ <!-- <el-table-column prop="companyName" label="浼佷笟绫诲瀷" width="200"></el-table-column> -->
+ <el-table-column prop="companyUser" label="鑱旂郴浜�" width="180"></el-table-column>
+ <el-table-column prop="companyPhone" label="鎵嬫満鍙风爜" width="120"></el-table-column>
+ <el-table-column prop="comeTime" label="鍒涘缓鏃堕棿" width="200"></el-table-column>
+ <el-table-column prop="comeContent" label="鏉ヨ浜嬮」" width="200"></el-table-column>
+ <el-table-column prop="userNum" label="闅忚浜烘暟" width="200"></el-table-column>
+ <el-table-column prop="remark" label="澶囨敞" ></el-table-column>
+ <el-table-column label="鎿嶄綔" align="center" fixed="right" class-name="small-padding fixed-width" width="240">
+ <template #default="scope">
+ <el-link type="success" v-if="scope.row.checkStatus < 2" v-hasPermi="['sys:company:check']" @click="checkJudge(scope.row)">瀹℃牳</el-link>
+ <el-divider direction="vertical" v-hasPermi="['sys:company:check']" v-if="scope.row.checkStatus < 2"/>
+ <el-link type="info" v-if="scope.row.checkStatus == 2" @click="createQrcodeHandler(scope.row)">浜岀淮鐮�</el-link>
+ <el-divider direction="vertical" v-if="scope.row.checkStatus == 2"/>
+ <el-link type="primary" @click="handleAdd(scope.row)">缂栬緫</el-link>
+ <el-divider direction="vertical" />
+ <el-link type="error" @click="handleDelete(scope.row)">鍒犻櫎</el-link>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+ <!-- 娣诲姞鎴栦慨鏀瑰璇濇 -->
+ <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+ <el-form ref="deptRef" :model="form" :rules="rules" label-width="140px">
+ <el-form-item label="浼佷笟鍚嶇О" prop="companyName">
+ <el-input placeholder="璇疯緭鍏ヤ紒涓氬悕绉�" v-model="form.companyName"></el-input>
+ </el-form-item>
+ <el-form-item label="鑱旂郴浜�" prop="companyUser">
+ <el-input placeholder="璇疯緭鍏ヨ仈绯讳汉" v-model="form.companyUser"></el-input>
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙风爜" prop="companyPhone">
+ <el-input placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" v-model="form.companyPhone"></el-input>
+ </el-form-item>
+ <el-form-item label="鏉ヨ浜哄憳" prop="comeUser">
+ <el-input placeholder="璇疯緭鍏�" v-model="form.comeUser"></el-input>
+ </el-form-item>
+ <el-form-item label="鏉ヨ浜嬮」" prop="comeContent">
+ <el-input placeholder="璇疯緭鍏�" v-model="form.comeContent"></el-input>
+ </el-form-item>
+ <el-form-item label="闅忚浜烘暟" prop="userNum">
+ <el-input placeholder="璇疯緭鍏�" v-model="form.userNum"></el-input>
+ </el-form-item>
+ <el-form-item label="澶囨敞">
+ <el-input placeholder="璇疯緭鍏ュ娉�" v-model="form.remark"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <exportExcelCom ref="exporttem" @resList="resList"></exportExcelCom>
+ <exportRecord ref="exportRecordCom" :recordRow="recordRow" @uploadList="getList"></exportRecord>
+ <judgeCom ref="judgeComRef" @upload="getList"></judgeCom>
+ <createQrcode ref="createQrcodeRef"></createQrcode>
+ </div>
+</template>
+
+<script setup name="Dept">
+import FileUpload from '@/components/ImageUpload/index'
+import exportRecord from './components/exportRecord'
+import createQrcode from './components/createQrcode'
+import judgeCom from './components/judge'
+import { listCompanyLog,addCompany, updStatus, delCompanyLog, updCompanyLog } from "@/api/system/company/company";
+import exportExcelCom from './components/export'
+import { computed } from "vue";
+import { judgeStatus, companyStatus, scopeList } from '@/utils/mapList/index.ts'
+import useSettingsStore from "@/store/modules/settings";
+const thcolor = computed(() => useSettingsStore().theme);
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+const deptList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const deptOptions = ref([]);
+const isExpandAll = ref(false);
+const refreshTable = ref(true);
+const exporttem = ref()
+const exportRecordCom = ref()
+const judgeComRef = ref()
+const createQrcodeRef = ref()
+const options = reactive({
+ // -1鎷掔粷锛�0寰呭鎵癸紝1瀹℃壒涓紝2閫氳繃
+ checkOptions: [
+ {
+ label: '鎷掔粷',
+ value: -1
+ },
+ {
+ label: '寰呭鎵�',
+ value: 0
+ },
+ {
+ label: '瀹℃壒涓�',
+ value: 1
+ },
+ {
+ label: '閫氳繃',
+ value: 2
+ }
+ ],
+ companyStatus: [
+ {
+ label: '姝ｅ父',
+ value: 0
+ },
+ {
+ label: '绂佺敤',
+ value: 1
+ },
+ ],
+ socreList: [
+ {
+ label: '瀵煎叆',
+ value: 1
+ },
+ {
+ label: '娉ㄥ唽',
+ value: 0
+ },
+ ]
+})
+const data = reactive({
+ form: {},
+ queryParams: {
+ deptName: undefined,
+ status: undefined,
+ deptType: undefined,
+ pageNum: 1,
+ pageSize: 10,
+ total: 1
+ },
+ rules: {
+ companyName: [{ required: true, message: "浼佷笟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+ companyUser: [{ required: true, message: "鑱旂郴浜轰笉鑳戒负绌�", trigger: "blur" }],
+ companyPhone: [{ required: true, message: "鎵嬫満鍙风爜涓嶈兘涓虹┖", trigger: "blur" }, {
+ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur"
+ }],
+ companyCode: [{ required: true, message: "缁熶竴绀句細淇＄敤浠ｇ爜涓嶈兘涓虹┖", trigger: "blur" }],
+ companyImg: [{ required: true, message: "钀ヤ笟鎵х収涓嶈兘涓虹┖", trigger: "blur" }],
+ companyAddress: [{ required: true, message: "浼佷笟鍦板潃涓嶈兘涓虹┖", trigger: "blur" }],
+
+ // email: [{ type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }],
+ // phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }],
+ },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+// const dispDeptType = computed(() => (e) => {
+// return dept_type.value.find((f) => f.value == e).label;
+// });
+const recordRow = ref([])
+/** 鏌ヨ浼佷笟鍒楄〃 */
+function getList() {
+ loading.value = true;
+ listCompanyLog(queryParams.value).then((response) => {
+ deptList.value = response.rows
+ data.queryParams.total = response.total
+ loading.value = false;
+ });
+}
+/** 鍙栨秷鎸夐挳 */
+function cancel() {
+ open.value = false;
+ reset();
+ getList();
+}
+/** 琛ㄥ崟閲嶇疆 */
+function reset() {
+ form.value = {
+ deptId: undefined,
+ parentId: undefined,
+ deptName: undefined,
+ orderNum: 0,
+ leader: undefined,
+ phone: undefined,
+ email: undefined,
+ status: "0",
+ deptType: undefined,
+ };
+ proxy.resetForm("deptRef");
+}
+const queryRef = ref()
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+function handleQuery() {
+ getList();
+}
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+function resetQuery() {
+ queryRef.value.resetFields();
+ handleQuery();
+}
+/** 鏂板鎸夐挳鎿嶄綔 */
+function handleAdd(row) {
+ if(row) {
+ form.value = row
+ title.value = "缂栬緫浼佷笟";
+ } else {
+ form.value = {
+ companyStatus: 0
+ }
+ title.value = "娣诲姞浼佷笟";
+ }
+ open.value = true;
+}
+
+/** 鎻愪氦鎸夐挳 */
+function submitForm() {
+ proxy.$refs["deptRef"].validate((valid) => {
+ if (valid) {
+ if (form.value.companyId != undefined) {
+ updCompanyLog(form.value).then((response) => {
+ proxy.$modal.msgSuccess("淇敼鎴愬姛");
+ open.value = false;
+ getList();
+ });
+ } else {
+ addCompany(form.value).then((response) => {
+ proxy.$modal.msgSuccess("鏂板鎴愬姛");
+ open.value = false;
+ getList();
+ });
+ }
+ }
+ });
+}
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+function handleDelete(row) {
+ proxy.$modal
+ .confirm('鏄惁纭鍒犻櫎璇ユ暟鎹�?')
+ .then(function () {
+ return delCompanyLog({delId: row.id});
+ })
+ .then(() => {
+ getList();
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {});
+}
+// 淇敼浼佷笟淇℃伅
+function changeCompanyNews(row, event) {
+ if(loading.value){
+ return
+ }
+ updStatus(row).then(val => {
+ proxy.$modal.msgSuccess("淇敼鎴愬姛");
+ getList();
+ })
+}
+// 瀵煎叆妯℃澘
+function exportExcel() {
+ exporttem.value.openDialog()
+}
+// 瀵煎叆璁板綍
+function exportRecordComOpen() {
+ exportRecordCom.value.openDialog()
+}
+function resList(row) {
+ recordRow.value = row
+ exportRecordCom.value.openDialog()
+}
+function checkJudge(row) {
+ judgeComRef.value.openDialog(row)
+}
+function createQrcodeHandler(row) {
+ createQrcodeRef.value.openDialog(row)
+}
+getList();
+</script>
+
+<style scoped lang="scss">
+.evenly-distributed-labels {
+ :deep(){
+ .el-form-item__label {
+ position: relative; /* 璁剧疆鐩稿瀹氫綅浣滀负鏄熷彿鐨勫畾浣嶅熀鍑� */
+ text-align: justify;
+ text-align-last: justify; /* 纭繚鏈�鍚庝竴琛屼篃涓ょ瀵归綈 */
+ padding-left: 10px; /* 涓烘槦鍙烽鐣欑┖闂� */
+ display: inline-block;
+ }
+ }
+}
+
+
+</style>
diff --git a/src/views/main/components/selectColor.vue b/src/views/main/components/selectColor.vue
new file mode 100644
index 0000000..8df5a7f
--- /dev/null
+++ b/src/views/main/components/selectColor.vue
@@ -0,0 +1,91 @@
+<template>
+ <div class="select-color">
+ <div class="color red" :class="[selectColor === '#FF0000' ? 'active' : '']" @click="selectColorClick('#FF0000')" />
+ <div
+ class="color green"
+ :class="[selectColor === '#008000' ? 'active' : '']"
+ @click="selectColorClick('#008000')"
+ />
+ <div
+ class="color yellow"
+ :class="[selectColor === '#0000FF' ? 'active' : '']"
+ @click="selectColorClick('#0000FF')"
+ />
+ <div
+ class="gradit-color"
+ :style="{ 'background': `linear-gradient(${selectColor}, ${adjustColor(selectColor, 200)})` }"
+ />
+ </div>
+</template>
+<script>
+export default {
+ props: {
+ selectColor: {
+ type: String,
+ default: '#FF0000'
+ }
+ },
+ methods: {
+ selectColorClick(item) {
+ this.$emit('update:selectColor', item)
+ this.$emit('changeRender')
+ },
+ adjustColor(color, range) {
+ let newColor = '#'
+ for (let i = 0; i < 3; i++) {
+ const hxStr = color.substr(i * 2 + 1, 2)
+ let val = parseInt(hxStr, 16)
+ val += range
+ if (val < 0) val = 0
+ else if (val > 255) val = 255
+ newColor += val.toString(16).padStart(2, '0')
+ }
+ this.$emit('minColor', newColor)
+ return newColor
+ }
+ }
+}
+</script>
+<style scoped>
+.select-color {
+ position: fixed;
+ top: 0;
+ z-index: 100000;
+ padding: 20px;
+}
+
+.title {
+ font-size: 26px;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+
+.color {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 20px;
+}
+
+.red {
+ background-color: red;
+}
+
+.green {
+ background-color: green;
+}
+
+.yellow {
+ background-color: #0000FF;
+}
+
+.active {
+ border: 2px solid #a0a0a0;
+ box-shadow: 0 0 10px #232323;
+}
+
+.gradit-color {
+ width: 10px;
+ height: 200px;
+ border-radius: 10px;
+}
+</style>
diff --git a/src/views/main/components/theme.vue b/src/views/main/components/theme.vue
new file mode 100644
index 0000000..c507320
--- /dev/null
+++ b/src/views/main/components/theme.vue
@@ -0,0 +1,42 @@
+<template>
+ <div class="theme-box">
+ <el-select v-model="style" @change="styleChange" size="large">
+ <el-option v-for="(item, index) in styleOptions" :key="index" :label="item.label" :value="item.value" />
+ </el-select>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ style: 'dark',
+ styleOptions: [
+ { label: '鏍囧噯', value: 'normal' },
+ { label: '骞诲奖榛�', value: 'dark' },
+ { label: '鏈堝厜閾�', value: 'light' },
+ { label: '杩滃北榛�', value: 'whitesmoke' },
+ { label: '鑽夎壊闈�', value: 'fresh' },
+ { label: '闆呭＋鐏�', value: 'grey' },
+ { label: '娑傞甫', value: 'graffiti' },
+ { label: '椹崱榫�', value: 'macaron' },
+ { label: '闈涢潚钃�', value: 'blue' },
+ { label: '鏋佸钃�', value: 'darkblue' },
+ { label: '閰辩苯', value: 'wine' }
+ ]
+ }
+ },
+ methods: {
+ styleChange(e) {
+ this.$emit('styleChange', e)
+ }
+ }
+}
+</script>
+<style>
+.theme-box{
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 1000;
+}
+</style>
diff --git a/src/views/main/indexMarge.vue b/src/views/main/indexMarge.vue
new file mode 100644
index 0000000..37c6266
--- /dev/null
+++ b/src/views/main/indexMarge.vue
@@ -0,0 +1,552 @@
+<template>
+ <el-container>
+ <selectColor :select-color.sync="selectColor" :min-color="minColor" @changeRender="changeRender" />
+ <themeCom @styleChange="changeStyle" />
+ <el-main style="margin: 0px; padding: 0px">
+ <div id="aMap" :style="{ height: windowHeight - 50 + 'px' }" />
+ </el-main>
+ </el-container>
+</template>
+<script>
+const markerContent = `
+
+<div class="custom-content-marker" onclick="showContent()">
+ <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
+ </div>`
+import selectColor from './components/selectColor.vue'
+import themeCom from './components/theme.vue'
+export default {
+ name: 'AMap',
+ components: {
+ selectColor,
+ themeCom
+ },
+ data() {
+ return {
+ circleMarker: [],
+ recordValue: [], // 璁板綍缁樺埗杩囩殑鏂囧瓧
+ adcode: 410000, // 涓績琛屾斂code
+ currentCodeObj: '', // 涓績琛屾斂code
+ map: null, // 鍦板浘瀹炰緥鍖�
+ districtExplorer: null, // 娓叉煋琛屾斂鍖哄煙瀹炰緥鍖�
+ windowHeight: document.documentElement.clientHeight,
+ selectColor: '#FF0000',
+ minColor: '',
+ provinceData: [
+ {
+ 'name': '閮戝窞甯�',
+ 'value': '8.99'
+ },
+ {
+ 'name': '寮�灏佸競',
+ 'value': '22.84'
+ },
+ {
+ 'name': '娲涢槼甯�',
+ 'value': '48.96'
+ },
+ {
+ 'name': '骞抽《灞卞競',
+ 'value': '79.49'
+ },
+ {
+ 'name': '瀹夐槼甯�',
+ 'value': '37.82'
+ },
+ {
+ 'name': '楣ゅ甯�',
+ 'value': '27.55'
+ },
+ {
+ 'name': '鏂颁埂甯�',
+ 'value': '90.76'
+ },
+ {
+ 'name': '鐒︿綔甯�',
+ 'value': '72.26'
+ },
+ {
+ 'name': '婵槼甯�',
+ 'value': '14.03'
+ },
+ {
+ 'name': '璁告槍甯�',
+ 'value': '32.93'
+ },
+ {
+ 'name': '婕渤甯�',
+ 'value': '57.85'
+ },
+ {
+ 'name': '涓夐棬宄″競',
+ 'value': '85.35'
+ },
+ {
+ 'name': '鍗楅槼甯�',
+ 'value': '99.59'
+ },
+ {
+ 'name': '鍟嗕笜甯�',
+ 'value': '45.33'
+ },
+ {
+ 'name': '淇￠槼甯�',
+ 'value': '69.38'
+ },
+ {
+ 'name': '鍛ㄥ彛甯�',
+ 'value': '65.45'
+ },
+ {
+ 'name': '椹婚┈搴楀競',
+ 'value': '90.25'
+ },
+ {
+ 'name': '娴庢簮甯�',
+ 'value': '88.85'
+ }
+ ],
+ style: 'dark',
+ marker: [],
+ infoWindow: [],
+ // marker: [],
+ regionData: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ [
+ [113.576491, 34.744435],
+ [113.605331, 34.768129],
+ [113.712447, 34.74782],
+ [113.673995, 34.66823],
+ [113.601211, 34.687994],
+ [113.573745, 34.705495],
+ [113.570998, 34.725249]
+ ]
+ ]
+ },
+ properties: {}
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ const vm = this
+ vm.loadMap()
+ },
+ methods: {
+ changeStyle(e) {
+ this.style = e
+ this.loadMap()
+ },
+ changeRender() {
+ this.loadMap()
+ },
+ loadMap() {
+ const vm = this
+ vm.map = new AMap.Map('aMap', {
+ viewMode: '2D', // 榛樿浣跨敤 2D 妯″紡锛屽鏋滃笇鏈涗娇鐢ㄥ甫鏈変刊浠拌鐨� 3D 妯″紡锛岃璁剧疆 viewMode: '3D'
+ zoom: 11, // 鍒濆鍖栧湴鍥惧眰绾�
+ center: [113.681999, 34.762029], // 鍒濆鍖栧湴鍥句腑蹇冪偣
+ mapStyle: 'amap://styles/' + this.style
+ })
+ vm.fillCityOrTown()
+ },
+ // 鍔犺浇娌冲崡鐪佸競鍘�
+ fillCityOrTown() {
+ const vm = this
+ AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
+ // 鍚姩椤甸潰
+ vm.initPage(DistrictExplorer)
+ })
+ },
+ initPage(DistrictExplorer) {
+ const vm = this
+ // 鍒涘缓涓�涓疄渚�
+ vm.districtExplorer = new DistrictExplorer({
+ eventSupport: true, // 鎵撳紑浜嬩欢鏀寔
+ map: vm.map // 鍏宠仈鐨勫湴鍥惧疄渚�
+ })
+ // 閰嶇疆鐐瑰嚮浜嬩欢
+ vm.districtExplorer.on('featureClick', function(e, feature) {
+ var props = feature.properties
+ // 濡傛灉瀛樺湪瀛愯妭鐐�
+ vm.recordValue.map(item => {
+ item.setMap(null)
+ })
+
+ vm.recordValue = []
+ vm.circleMarker.map(item => {
+ // item.setMap(null)
+ vm.map.remove(item)
+ })
+ vm.circleMarker = []
+ if (feature.properties.level === 'district') {
+ setTimeout(() => {
+ vm.drawMarker(feature.properties.center)
+ }, 500)
+ vm.initData()
+ }
+ // if (props.childrenNum > 0) {
+ // 鍒囨崲鑱氱劍鍖哄煙
+ vm.switch2AreaNode(props.adcode)
+ // }
+ })
+ // 澶栭儴鍖哄煙琚偣鍑�
+ vm.districtExplorer.on('outsideClick', function(e) {
+ vm.districtExplorer.locatePosition(e.originalEvent.lnglat, function(_error, routeFeatures) {
+ vm.recordValue.map(item => {
+ item.setMap(null)
+ })
+ vm.recordValue = []
+ vm.infoWindow.forEach(element => {
+ element.close(vm.map)
+ })
+ vm.marker.forEach(element => {
+ element.setMap(null)
+ })
+ vm.circleMarker.map(item => {
+ // item.setMap(null)
+ vm.map.remove(item)
+ })
+ vm.circleMarker = []
+ if (routeFeatures && routeFeatures.length > 1) {
+ // 鍒囨崲鍒扮渷绾у尯鍩�
+ vm.switch2AreaNode(routeFeatures[1].properties.adcode)
+ } else {
+ // 鍒囨崲鍒板叏鍥�
+ vm.switch2AreaNode(100000)
+ }
+ }, {
+ levelLimit: 2
+ })
+ })
+ var adcode = vm.adcode // 鍏ㄥ浗鐨勫尯鍒掔紪鐮�
+ vm.districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ console.error(error)
+ return
+ }
+ // 缁樺埗杞藉叆鐨勫尯鍒掕妭鐐�
+ vm.renderAreaNode(areaNode)
+ })
+ },
+ initData(){
+ for (let i = 0; i < this.regionData.features.length; i++) {
+ let item = this.regionData.features[i];
+ if(item.geometry.type=='Polygon'){
+ let arr = item.geometry.coordinates
+ let polygon = new AMap.Polygon({
+ path: arr,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.2,//鑳屾櫙閫忔槑搴�
+ strokeColor: '#2b8cbe',
+ strokeWeight: 2,
+ strokeStyle: 'dashed',
+ strokeDasharray: [5, 5],
+ });
+ this.map.add(polygon);
+ }
+ }
+ },
+ getMathRandom() {
+ return (Math.random() * 101).toFixed(2)
+ },
+ adjustColor(color, range) {
+ let newColor = '#'
+ for (let i = 0; i < 3; i++) {
+ const hxStr = color.substr(i * 2 + 1, 2)
+ let val = parseInt(hxStr, 16)
+ val += range
+ if (val < 0) val = 0
+ else if (val > 255) val = 255
+ newColor += val.toString(16).padStart(2, '0')
+ }
+ this.$emit('minColor', newColor)
+ return newColor
+ },
+ renderAreaNode(areaNode) {
+ const vm = this
+ vm.map.setBounds(areaNode.getBounds(), null, null, true)
+ // 娓呴櫎宸叉湁鐨勭粯鍒跺唴瀹�
+ vm.districtExplorer.clearFeaturePolygons()
+ var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']
+ // 缁樺埗瀛愬尯鍩�
+ // const arr = []
+ vm.districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
+ // arr.push({
+ // name: feature.properties.name, value: vm.getMathRandom()
+ // })
+ // console.log(feature.adcode) // 琛屾斂鍖虹殑areacode
+ var fillColor = colors[i % colors.length]
+ var strokeColor = colors[colors.length - 1 - i % colors.length]
+ const value = vm.provinceData.find(item => item.name === feature.properties.name)
+ const color = vm.adjustColor(vm.selectColor, 200)
+ const colorValue = vm.getColorBetween(value.value, 0, 100, color, vm.selectColor)
+ const fontStyle = {
+ 'background-color': 'rgba(0,0,0,0)',
+ 'border-width': 0,
+ 'font-size': '10px',
+ color: '#fff',
+ 'text-align': 'center'
+ }
+ // 瀹氫箟Text绫�
+ const text1 = new AMap.Text({
+ text: feature.properties.name,
+ position: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ style: fontStyle
+ })
+ // 鍒涘缓鍦嗗舰鐐规爣璁� CircleMarker 瀹炰緥
+ const circleMarker = new AMap.CircleMarker({
+ center: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ radius: 4, // 3D瑙嗗浘涓嬶紝CircleMarker鍗婂緞涓嶈瓒呰繃64px
+ strokeColor: 'white',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 1,
+ zIndex: 100000,
+ bubble: true,
+ cursor: 'pointer',
+ clickable: true
+ })
+ vm.recordValue.push(text1)
+ vm.circleMarker.push(circleMarker)
+ vm.map.add(text1)
+ vm.map.add(circleMarker)
+ return {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: strokeColor, // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: colorValue, // 濉厖鑹�
+ fillOpacity: 1 // 濉厖閫忔槑搴�
+ }
+ })
+ // 缁樺埗鐖跺尯鍩�
+ vm.districtExplorer.renderParentFeature(areaNode, {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: 'black', // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: areaNode.getSubFeatures().length ? null : colors[0], // 濉厖鑹�
+ fillOpacity: 0.35 // 濉厖閫忔槑搴�
+ })
+ // vm.
+
+ vm.map.setFitView(vm.districtExplorer.getAllFeaturePolygons())
+ },
+ // 鍒锋柊椤甸潰
+ switch2AreaNode(adcode, callback) {
+ const vm = this
+ if (vm.currentCodeObj && ('' + vm.currentCodeObj.getAdcode() === '' + adcode)) {
+ return
+ }
+ vm.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ if (callback) {
+ callback(error)
+ }
+ return
+ }
+ vm.adcode = window.currentAreaNode = areaNode.adcode
+ vm.currentCodeObj = window.currentAreaNode = areaNode
+ // 璁剧疆褰撳墠浣跨敤鐨勫畾浣嶇敤鑺傜偣
+ vm.districtExplorer.setAreaNodesForLocating([vm.currentCodeObj])
+ vm.refreshAreaNode(areaNode)
+ if (callback) {
+ callback(null, areaNode)
+ }
+ })
+ },
+ // 鍒锋柊鍖哄煙杈圭晫
+ loadAreaNode(adcode, callback) {
+ const vm = this
+ vm.districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ if (callback) {
+ callback(error)
+ }
+ return
+ }
+ if (callback) {
+ callback(null, areaNode)
+ }
+ })
+ },
+ refreshAreaNode(areaNode) {
+ this.districtExplorer.setHoverFeature(null)
+ this.renderAreaPolygons(areaNode)
+ },
+ // 缁樺埗鏌愪釜鍖哄煙鐨勮竟鐣�
+ renderAreaPolygons(areaNode) {
+ const vm = this
+ // 鏇存柊鍦板浘瑙嗛噹
+ vm.map.setBounds(areaNode.getBounds(), null, null, true)
+ // 娓呴櫎宸叉湁鐨勭粯鍒跺唴瀹�
+ vm.districtExplorer.clearFeaturePolygons()
+ var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']
+ // 缁樺埗瀛愬尯鍩�
+ vm.districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
+ var fillColor = colors[i % colors.length]
+ var strokeColor = colors[colors.length - 1 - i % colors.length]
+ const fontStyle = {
+ 'background-color': 'rgba(0,0,0,0)',
+ 'border-width': 0,
+ 'text-align': 'center',
+ 'font-size': '14px',
+ color: '#fff'
+ }
+ const text1 = new AMap.Text({
+ text: feature.properties.name,
+ position: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ style: fontStyle
+ })
+ vm.recordValue.push(text1)
+
+ vm.map.add(text1)
+
+ const value = vm.provinceData.find(item => item.name === feature.properties.name)
+ if (value && value.value) {
+ const color = vm.adjustColor(vm.selectColor, 200)
+ fillColor = vm.getColorBetween(value.value, 0, 100, color, vm.selectColor)
+ }
+ // 鍒涘缓鍦嗗舰鐐规爣璁� CircleMarker 瀹炰緥
+ const circleMarker = new AMap.CircleMarker({
+ center: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ radius: 4, // 3D瑙嗗浘涓嬶紝CircleMarker鍗婂緞涓嶈瓒呰繃64px
+ strokeColor: 'white',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 1,
+ zIndex: 100000,
+ bubble: true,
+ cursor: 'pointer',
+ clickable: true
+ })
+ vm.circleMarker.push(circleMarker)
+ vm.map.add(circleMarker)
+ return {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: strokeColor, // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: fillColor, // 濉厖鑹�
+ fillOpacity: 1 // 濉厖閫忔槑搴�
+ }
+ })
+
+ // 缁樺埗鐖跺尯鍩�
+ vm.districtExplorer.renderParentFeature(areaNode, {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: 'black', // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: areaNode.getSubFeatures().length ? null : colors[0], // 濉厖鑹�
+ fillOpacity: 0.35 // 濉厖閫忔槑搴�
+ })
+ },
+ // 鏍规嵁鍊艰繑鍥為鑹�
+ getColorBetween(value, minValue, maxValue, minColor, maxColor) {
+ // 灏嗛鑹茶浆鎹负RGB
+ function hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+
+ // 灏哛GB杞崲涓哄崄鍏繘鍒堕鑹�
+ function rgbToHex(r, g, b) {
+ return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+ }
+
+ // 灏嗛鑹茬殑姣忎釜鍒嗛噺杩涜鎻掑��
+ function interpolateColor(start, end, factor) {
+ return Math.round(start + (end - start) * factor)
+ }
+
+ // 纭繚鍊煎湪鏈�灏忓�煎拰鏈�澶у�间箣闂�
+ value = Math.max(minValue, Math.min(value, maxValue))
+
+ // 璁＄畻鍥犲瓙锛屽皢鍊艰寖鍥存槧灏勫埌0鍒�1涔嬮棿
+ const factor = (value - minValue) / (maxValue - minValue)
+
+ // 鑾峰彇涓ょ棰滆壊鐨凴GB鍊�
+ const minRgb = hexToRgb(minColor)
+ const maxRgb = hexToRgb(maxColor)
+ // 鏍规嵁鍥犲瓙鎻掑�糝GB鍒嗛噺
+ const r = interpolateColor(minRgb.r, maxRgb.r, factor)
+ const g = interpolateColor(minRgb.g, maxRgb.g, factor)
+ const b = interpolateColor(minRgb.b, maxRgb.b, factor)
+
+ // 灏哛GB杞崲涓哄崄鍏繘鍒堕鑹插苟杩斿洖
+ return rgbToHex(r, g, b)
+ },
+ // 缁樺埗鏍囩偣
+ // 缁樺埗鏍囩偣
+ drawMarker(positionArg) {
+ var content = [
+ '<div><b>杩欐槸涓彁绀烘枃瀛�</b>',
+ '鍦板潃锛氶儜宸炲競閲戞按鍖鸿姳鍥矾</div>'
+ ]
+ const position = new AMap.LngLat(positionArg[0], positionArg[1]) // Marker 缁忕含搴�
+ // 鍒涘缓 infoWindow 瀹炰緥
+
+ function getImageUrl(url) {
+ console.log(`../../assets/icon/${url}.png`)
+ const path = new URL(`../../assets/icon/${url}.png`, import.meta.url)
+ return path.href
+ }
+
+ for (let a = 0; a < 4; a++) {
+ const icon = new AMap.Icon({
+ size: new AMap.Size(20, 20), // 鍥炬爣灏哄
+ image: getImageUrl(`icon${a + 1}`), // 鍥炬爣鐨刄RL
+ imageSize: new AMap.Size(20, 20) // 鍥炬爣鎵�鐢ㄥ浘鐗囩殑澶у皬
+ })
+ const position = new AMap.LngLat(positionArg[0] - 0.02 * a, positionArg[1]) // Marker 缁忕含搴�
+ const infoWindow = new AMap.InfoWindow({
+ content: content.join('<br>'), // 浼犲叆瀛楃涓叉嫾鎺ョ殑 DOM 鍏冪礌
+ anchor: 'top-center',
+ position: position
+ // offset: [10, 40]
+ })
+ this.infoWindow.push(infoWindow)
+ const marker = new AMap.Marker({
+ position: position,
+ // content: markerContent, // 灏� html 浼犵粰 content
+ // icon: '',
+ icon: icon,
+ offset: new AMap.Pixel(-10, -30) // 浠� icon 鐨� [center bottom] 涓哄師鐐�
+ })
+ this.map.add(marker)
+ this.marker.push(marker)
+ marker.on('click', () => {
+ infoWindow.open(this.map)
+ })
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.aMap {
+ width: 100vw;
+ height: 100vh;
+}
+</style>
--
Gitblit v1.9.1