parent
855df48e57
commit
641213d436
@ -1,112 +1,107 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||
*
|
||||
* hidden: true if set true, item will not show in the sidebar(default is false)
|
||||
* alwaysShow: true if set true, will always show the root menu
|
||||
* if not set alwaysShow, when item has more than one children route,
|
||||
* it will becomes nested mode, otherwise not show the root menu
|
||||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
|
||||
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
||||
* meta : {
|
||||
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
||||
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
||||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
|
||||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
||||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
* a base page that does not have permission requirements
|
||||
* all roles can be accessed
|
||||
*/
|
||||
export const constantRoutes = [{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/index'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import('@/views/404'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
component: () => import('@/views/component/test.vue'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'password',
|
||||
component: () => import('@/views/system/password'),
|
||||
name: '密码修改',
|
||||
meta: {
|
||||
title: '密码修改'
|
||||
}
|
||||
}],
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
children: [{
|
||||
path: 'dashboard',
|
||||
name: '系统首页',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
icon: 'dashboard'
|
||||
}
|
||||
}, ]
|
||||
}
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||
*
|
||||
* hidden: true if set true, item will not show in the sidebar(default is false)
|
||||
* alwaysShow: true if set true, will always show the root menu
|
||||
* if not set alwaysShow, when item has more than one children route,
|
||||
* it will becomes nested mode, otherwise not show the root menu
|
||||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
|
||||
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
||||
* meta : {
|
||||
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
||||
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
||||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
|
||||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
||||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
* a base page that does not have permission requirements
|
||||
* all roles can be accessed
|
||||
*/
|
||||
export const constantRoutes = [{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/index'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import('@/views/404'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'password',
|
||||
component: () => import('@/views/system/password'),
|
||||
name: '密码修改',
|
||||
meta: {
|
||||
title: '密码修改'
|
||||
}
|
||||
}],
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
children: [{
|
||||
path: 'dashboard',
|
||||
name: '系统首页',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
icon: 'dashboard'
|
||||
}
|
||||
}, ]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* asyncRoutes
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({
|
||||
y: 0
|
||||
}),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||
export function resetRouter() {
|
||||
const newRouter = createRouter()
|
||||
router.matcher = newRouter.matcher // reset router
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* asyncRoutes
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({
|
||||
y: 0
|
||||
}),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||
export function resetRouter() {
|
||||
const newRouter = createRouter()
|
||||
router.matcher = newRouter.matcher // reset router
|
||||
}
|
||||
|
||||
export default router
|
||||
|
||||
@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="search-bar">
|
||||
<el-select
|
||||
v-model="nowCity"
|
||||
size="small"
|
||||
placeholder="请选择区域"
|
||||
@change="areaPick"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in wxAreas"
|
||||
:value="item"
|
||||
:label="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="search" v-draggable="(status) => (dragging = status)">
|
||||
<transition name="fade">
|
||||
<div
|
||||
class="search-btn"
|
||||
v-if="!searchShow"
|
||||
@click="dragging ? '' : (searchShow = true)"
|
||||
>
|
||||
查询
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<transition name="fade">
|
||||
<div class="search-list" v-if="searchShow">
|
||||
<div class="search-list__close" @click="searchShow = false">
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="select.name"
|
||||
style="width: 65px; margin-right: 10px"
|
||||
placeholder="地块名称"
|
||||
/>
|
||||
<Button type="primary" @click="$refs['table'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<xy-table
|
||||
ref="table"
|
||||
:height="360"
|
||||
:action="index"
|
||||
:table-item="table"
|
||||
:req-opt="select"
|
||||
@row-click="pickRow"
|
||||
></xy-table>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
|
||||
|
||||
<div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
|
||||
<div>
|
||||
<div v-for="item in form">
|
||||
<p>{{ item.name }}</p>
|
||||
<p>{{ contentFormat(item) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index } from "@/api/system/baseForm";
|
||||
import { show } from "@/api/system/customForm";
|
||||
import { listdept } from "@/api/system/department";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dragging: false,
|
||||
searchShow: false,
|
||||
select: {
|
||||
table_name: "assets",
|
||||
},
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: "",
|
||||
},
|
||||
form: [],
|
||||
table: [],
|
||||
list: [],
|
||||
mapHeight: 0,
|
||||
center: [119.597897, 31.723247],
|
||||
isShowInfoWindow: false,
|
||||
openData: {},
|
||||
infoWindow: null,
|
||||
district: null,
|
||||
cluster: null,
|
||||
polygons: [],
|
||||
markerList: [],
|
||||
nowCity: "",
|
||||
wxAreas: [
|
||||
"锡山区",
|
||||
"惠山区",
|
||||
"滨湖区",
|
||||
"梁溪区",
|
||||
"新吴区",
|
||||
"江阴市",
|
||||
"宜兴市",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
areaPick(e) {
|
||||
this.areaBG(e);
|
||||
},
|
||||
pickRow({ row }) {
|
||||
this.isShowInfoWindow = true;
|
||||
this.openData = row;
|
||||
if (row.zichanweizhi) {
|
||||
let lat, lng;
|
||||
[lng, lat] = row.zichanweizhi.split(",");
|
||||
this.map.panTo([lng, lat]);
|
||||
this.infoWindow.open(this.map, [lng, lat]);
|
||||
} else {
|
||||
this.map.panTo(this.center);
|
||||
this.infoWindow.open(this.map, this.center);
|
||||
}
|
||||
},
|
||||
async getList() {
|
||||
const res = await index({
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
...this.select,
|
||||
});
|
||||
|
||||
this.list = res.data;
|
||||
},
|
||||
addCluster () {
|
||||
if (this.cluster) {
|
||||
this.cluster.setMap(null);
|
||||
}
|
||||
this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
|
||||
gridSize: 50, // 设置网格像素大小
|
||||
renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
|
||||
renderMarker: this.renderMarker, // 自定义非聚合点样式
|
||||
});
|
||||
},
|
||||
renderClusterMarker (context) {
|
||||
let factor = Math.pow(context.count / this.list.length, 1 / 18);
|
||||
let div = document.createElement('div');
|
||||
let Hue = 180 - factor * 180;
|
||||
let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
|
||||
let fontColor = 'hsla(' + Hue + ',100%,90%,1)';
|
||||
let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
||||
let shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
|
||||
div.style.backgroundColor = bgColor;
|
||||
let size = Math.round(30 + Math.pow(context.count / this.list.length, 1 / 5) * 20);
|
||||
div.style.width = div.style.height = size + 'px';
|
||||
div.style.border = 'solid 1px ' + borderColor;
|
||||
div.style.borderRadius = size / 2 + 'px';
|
||||
div.style.boxShadow = '0 0 5px ' + shadowColor;
|
||||
div.innerHTML = context.count;
|
||||
div.style.lineHeight = size + 'px';
|
||||
div.style.color = fontColor;
|
||||
div.style.fontSize = '14px';
|
||||
div.style.textAlign = 'center';
|
||||
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||||
context.marker.setContent(div)
|
||||
},
|
||||
renderMarker (context) {
|
||||
let content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
|
||||
let offset = new AMap.Pixel(-9, -9);
|
||||
context.marker.setContent(content)
|
||||
context.marker.setOffset(offset)
|
||||
},
|
||||
setMapMarker() {
|
||||
this.map.remove(this.markerList);
|
||||
this.markerList = [];
|
||||
|
||||
this.list.forEach((item) => {
|
||||
if (item.zichanweizhi) {
|
||||
let lat, lng;
|
||||
[lng, lat] = item.zichanweizhi.split(",");
|
||||
let marker = new AMap.Marker({
|
||||
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||||
position: [Number(lng), Number(lat)],
|
||||
offset: new AMap.Pixel(-13, -30),
|
||||
});
|
||||
let markerContent = document.createElement("div");
|
||||
markerContent.setAttribute("class", "map-marker");
|
||||
markerContent.onclick = () => {
|
||||
this.pickRow({ row: item });
|
||||
};
|
||||
let markerImg = document.createElement("img");
|
||||
markerImg.src =
|
||||
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
|
||||
let markerSpan = document.createElement("span");
|
||||
markerSpan.setAttribute("class", "map-marker__text");
|
||||
markerSpan.innerText =
|
||||
item.dikuaimingcheng.length > 4
|
||||
? item.dikuaimingcheng.slice(0,2) + ".." + item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
|
||||
: item.dikuaimingcheng;
|
||||
markerContent.appendChild(markerImg);
|
||||
markerContent.appendChild(markerSpan);
|
||||
marker.setContent(markerContent);
|
||||
this.markerList.push(marker);
|
||||
}
|
||||
});
|
||||
this.map.add(this.markerList);
|
||||
|
||||
this.addCluster();
|
||||
},
|
||||
init() {
|
||||
let winHeight = document
|
||||
.querySelector(".app-main")
|
||||
?.getBoundingClientRect()?.height;
|
||||
this.mapHeight = winHeight - 50 - 20;
|
||||
|
||||
this.map = new AMap.Map("map", {
|
||||
center: this.center,
|
||||
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
||||
zoom: this.zoom
|
||||
});
|
||||
// 行政区域加载
|
||||
let adcode = ["320200"];
|
||||
this.areaBG(adcode);
|
||||
this.infoWindow = new AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
autoMove: true,
|
||||
avoid: [20, 20, 20, 20],
|
||||
content: this.$refs.infoWindow,
|
||||
closeWhenClickMap: true,
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
});
|
||||
},
|
||||
// 加载
|
||||
areaBG(adcode) {
|
||||
AMap.service("AMap.DistrictSearch", () => {
|
||||
let opts = {
|
||||
subdistrict: 1, // 返回下一级行政区
|
||||
extensions: "all", // 返回行政区边界坐标组等具体信息
|
||||
level: "city", // 查询行政级别为市
|
||||
// adcode:'320200'
|
||||
};
|
||||
// 实例化DistrictSearch
|
||||
let district = new AMap.DistrictSearch(opts);
|
||||
district.setLevel("district");
|
||||
// 行政区查询
|
||||
district.search(`${adcode}`, (status, result) => {
|
||||
//清空
|
||||
this.map.remove(this.polygons);
|
||||
this.polygons = [];
|
||||
// 获取边界信息
|
||||
let bounds = result.districtList[0].boundaries;
|
||||
if (bounds) {
|
||||
for (let i = 0, l = bounds.length; i < l; i++) {
|
||||
// 生成行政区划polygon
|
||||
let polygon = new AMap.Polygon({
|
||||
map: this.map,
|
||||
strokeWeight: 1,
|
||||
path: bounds[i],
|
||||
fillOpacity: 0.2,
|
||||
fillColor: "#3579c788",
|
||||
strokeColor: "#3579c7",
|
||||
});
|
||||
this.polygons.push(polygon);
|
||||
this.map.setFitView(polygon);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
async getFormDetail() {
|
||||
if (this.$route.meta.params?.custom_form) {
|
||||
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
||||
try {
|
||||
let custom_form = JSON.parse(decode);
|
||||
this.customForm.customFormId = custom_form.custom_form_id;
|
||||
this.customForm.tableName = custom_form.table_name;
|
||||
this.select.table_name = custom_form.table_name;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await show({ id: this.customForm.customFormId }, false);
|
||||
|
||||
//字段处理
|
||||
//初始表白名单
|
||||
let baseTable = new Map([
|
||||
[
|
||||
"departments",
|
||||
async () => {
|
||||
const res = await listdept();
|
||||
return res;
|
||||
},
|
||||
],
|
||||
["admins", []],
|
||||
]);
|
||||
let { fields, relation } = res;
|
||||
let fieldRes = fields.sort((a, b) => a.sort - b.sort);
|
||||
if (
|
||||
!fields ||
|
||||
!relation ||
|
||||
!fields instanceof Array ||
|
||||
!relation instanceof Array
|
||||
) {
|
||||
throw new Error("fields或relation格式错误");
|
||||
}
|
||||
fieldRes?.forEach((i, index) => {
|
||||
i._relations = relation.find(
|
||||
(j) => j.link_table_name.split("_")[1] === i.field
|
||||
);
|
||||
if (i.select_item && typeof i.select_item === "object") {
|
||||
let keys = Object.keys(i.select_item);
|
||||
i._params = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(i.select_item[key])
|
||||
? Number(i.select_item[key])
|
||||
: i.select_item[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
if (i.edit_input === "file" || i.edit_input === "files") {
|
||||
return;
|
||||
}
|
||||
if (i._relations) {
|
||||
if (baseTable.get(i._relations.link_table_name)) {
|
||||
baseTable
|
||||
.get(i._relations.link_table_name)()
|
||||
.then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
} else {
|
||||
i._params = i._relations.parameter_id
|
||||
? getparameter({ id: i._relations.parameter_id }, false).then(
|
||||
(res) => {
|
||||
i._params = res.detail;
|
||||
}
|
||||
)
|
||||
: this.index({
|
||||
table_name: i._relations.link_table_name,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
}).then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form = fieldRes || [];
|
||||
this.form
|
||||
?.filter((i) => i.list_show)
|
||||
.forEach((i) => {
|
||||
let linkOb = {};
|
||||
|
||||
if (i.edit_input === "richtext") {
|
||||
linkOb.customFn = (row) => {
|
||||
return (
|
||||
<div
|
||||
style={{ "max-height": "55px", overflow: "scroll" }}
|
||||
domPropsInnerHTML={row[i.field]}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
}
|
||||
if (
|
||||
i.select_item &&
|
||||
typeof i.select_item === "object" &&
|
||||
!(i.select_item instanceof Array)
|
||||
) {
|
||||
let keys = Object.keys(i.select_item);
|
||||
linkOb.customFn = (row) => {
|
||||
let paramMap = new Map();
|
||||
keys.forEach((key) => {
|
||||
paramMap.set(i.select_item[key], key);
|
||||
});
|
||||
|
||||
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
|
||||
};
|
||||
}
|
||||
if (i._relations) {
|
||||
let { link_relation, foreign_key, link_with_name } = i._relations;
|
||||
if (link_relation === "newHasOne" || link_relation === "hasOne") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "file") {
|
||||
return (
|
||||
<a
|
||||
download={row[link_with_name]?.original_name}
|
||||
href={row[link_with_name]?.url}
|
||||
>
|
||||
{row[link_with_name]?.original_name}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{row[link_with_name]?.name ||
|
||||
row[link_with_name]?.no ||
|
||||
row[link_with_name]?.value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "files") {
|
||||
return (
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<a>{o?.original_name || o?.name}</a>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<p>
|
||||
{o?.name ||
|
||||
o?.no ||
|
||||
o?.value ||
|
||||
o?.biaoti ||
|
||||
o?.mingcheng}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
this.table.push(
|
||||
Object.assign(
|
||||
{
|
||||
prop: i.field,
|
||||
label: i.name,
|
||||
width: i.width,
|
||||
fixed: i.is_fixed,
|
||||
},
|
||||
linkOb
|
||||
)
|
||||
);
|
||||
});
|
||||
this.table.unshift({
|
||||
type: "index",
|
||||
width: 60,
|
||||
label: "序号",
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
contentFormat() {
|
||||
return function (i) {
|
||||
if (i._params && i._params.length > 0) {
|
||||
return i._params.find(
|
||||
(param) => param.value == this.openData[i.field]
|
||||
)?.key;
|
||||
}
|
||||
if (i._relations) {
|
||||
let { link_relation, foreign_key, link_with_name, link_table_name } = i._relations;
|
||||
|
||||
if (link_table_name && link_relation) {
|
||||
if (link_relation === "hasOne" || link_relation === "newHasOne") {
|
||||
return (
|
||||
this.openData[link_with_name]?.name ||
|
||||
this.openData[link_with_name]?.no ||
|
||||
this.openData[link_with_name]?.value
|
||||
);
|
||||
}
|
||||
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
||||
return this.openData[link_with_name]
|
||||
?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
|
||||
?.toString();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.openData[i.field] || '/';
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFormDetail();
|
||||
},
|
||||
async mounted() {
|
||||
this.init();
|
||||
|
||||
await this.getList();
|
||||
this.setMapMarker();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-bar {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.search {
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
position: fixed;
|
||||
top: 115px;
|
||||
left: 85px;
|
||||
z-index: 99;
|
||||
|
||||
&-btn {
|
||||
color: #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: $primaryColor;
|
||||
filter: drop-shadow(2px 2px 5px #000000aa);
|
||||
transition: all 0.3s;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
max-width: 500px;
|
||||
border-radius: 6px;
|
||||
filter: drop-shadow(2px 2px 5px #00000055);
|
||||
background: #fff;
|
||||
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
|
||||
&__close {
|
||||
zoom: 0.85;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px 0 0 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
border-radius: 4px;
|
||||
filter: drop-shadow(2px 2px 5px #00000033);
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fade-leave-active {
|
||||
animation: fade-out 0.4s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
#infoWindow {
|
||||
min-width: 140px;
|
||||
max-height: 240px;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
filter: drop-shadow(2px 2px 5px #00000055);
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
|
||||
padding: 20px;
|
||||
animation: fade-in 0.4s forwards;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#infoWindow > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
|
||||
& > div > p:nth-child(1) {
|
||||
font-weight: 600;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
& > div > p:nth-child(2) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep #infoWindow .el-icon-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.showInfo {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: $primaryColor;
|
||||
}
|
||||
|
||||
.map-marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
background: #fff;
|
||||
zoom: 0.75;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
filter: drop-shadow(2px 2px 5px #00000055);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
123
|
||||
<avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
|
||||
<xyTinymce v-model="content"></xyTinymce>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvueMap from 'avue-plugin-map'
|
||||
import xyTinymce from "@/components/XyTinymce/index.vue";
|
||||
export default{
|
||||
components: {
|
||||
AvueMap,
|
||||
xyTinymce
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
mapparams: {
|
||||
zoom: 11,
|
||||
},
|
||||
mapform: [],
|
||||
content:''
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in new issue