Skip to content

J
jingan-wisdom
Commit 70ae8115 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

配置自定义值尝试,暂存

parent a9c30ffd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1903 additions and 34 deletions
dist/assets/index.00cfd82e.css 0 → 100644
View file @ 70ae8115
This diff is collapsed.
dist/assets/index.42ecaaae.css deleted 100644 → 0
View file @ a9c30ffd
This diff is collapsed.
dist/index.html
View file @ 70ae8115
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<link rel="icon" href="./favicon.ico" /> <link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静安智慧房管</title> <title>静安智慧房管</title>
<script type="module" crossorigin src="./assets/index.53e16366.js"></script> <script type="module" crossorigin src="./assets/index.203cae49.js"></script>
<link rel="modulepreload" href="./assets/vendor.d8be57b6.js"> <link rel="modulepreload" href="./assets/vendor.d8be57b6.js">
<link rel="stylesheet" href="./assets/vendor.db35e2cd.css"> <link rel="stylesheet" href="./assets/vendor.db35e2cd.css">
<link rel="stylesheet" href="./assets/index.42ecaaae.css"> <link rel="stylesheet" href="./assets/index.00cfd82e.css">
</head> </head>
<body> <body>
......
package-lock.json
View file @ 70ae8115
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"": { "": {
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@dom-utils/selector-path": "^1.0.3",
"@vicons/ionicons5": "^0.11.0", "@vicons/ionicons5": "^0.11.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^0.21.1", "axios": "^0.21.1",
...@@ -496,6 +497,14 @@ ...@@ -496,6 +497,14 @@
"vue": "^3.0.11" "vue": "^3.0.11"
} }
}, },
"node_modules/@dom-utils/selector-path": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@dom-utils/selector-path/-/selector-path-1.0.3.tgz",
"integrity": "sha512-x7+Os1cv9vqoDg2OuoADOWKHuBXszWnibA2Iuq7UmEdj/BA/78X64eBzYnFwc2kENbUXzV3iCfwzZmNgkbYzOQ==",
"dependencies": {
"trim": "^0.0.1"
}
},
"node_modules/@emmetio/abbreviation": { "node_modules/@emmetio/abbreviation": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz",
...@@ -4923,6 +4932,11 @@ ...@@ -4923,6 +4932,11 @@
"integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==", "integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==",
"dev": true "dev": true
}, },
"node_modules/trim": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
},
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
"version": "3.11.0", "version": "3.11.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz",
...@@ -5848,6 +5862,14 @@ ...@@ -5848,6 +5862,14 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@dom-utils/selector-path": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@dom-utils/selector-path/-/selector-path-1.0.3.tgz",
"integrity": "sha512-x7+Os1cv9vqoDg2OuoADOWKHuBXszWnibA2Iuq7UmEdj/BA/78X64eBzYnFwc2kENbUXzV3iCfwzZmNgkbYzOQ==",
"requires": {
"trim": "^0.0.1"
}
},
"@emmetio/abbreviation": { "@emmetio/abbreviation": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz",
...@@ -9240,6 +9262,11 @@ ...@@ -9240,6 +9262,11 @@
"integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==", "integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==",
"dev": true "dev": true
}, },
"trim": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
},
"tsconfig-paths": { "tsconfig-paths": {
"version": "3.11.0", "version": "3.11.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz",
......
package.json
View file @ 70ae8115
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"serve": "vite preview" "serve": "vite preview"
}, },
"dependencies": { "dependencies": {
"@dom-utils/selector-path": "^1.0.3",
"@vicons/ionicons5": "^0.11.0", "@vicons/ionicons5": "^0.11.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^0.21.1", "axios": "^0.21.1",
......
src/App.vue
View file @ 70ae8115
...@@ -33,6 +33,7 @@ const themeOverrides: GlobalThemeOverrides = { ...@@ -33,6 +33,7 @@ const themeOverrides: GlobalThemeOverrides = {
primaryColor: '#2F86EE', primaryColor: '#2F86EE',
borderColor: '#2F86EE', borderColor: '#2F86EE',
primaryColorHover: '#2F86EE', primaryColorHover: '#2F86EE',
popoverColor: 'rgba(2,27,53,.6)',
}, },
} }
......
src/hooks/useSettings.ts 0 → 100644
View file @ 70ae8115
import { onBeforeUnmount } from '@vue/runtime-core'
export type Settings = { path: string; value: string; pastValue: string }[]
export default function useSettings(settings: Settings) {
let timer: any = null
function setNewValue() {
settings.forEach((item) => {
const ele = document.querySelector<HTMLElement>(item.path)
ele && (ele.innerText = item.value)
})
}
let count = 0
timer = setInterval(() => {
setNewValue()
count += 1
if (count >= 10) {
clearTimer()
}
}, 500)
function clearTimer() {
timer && clearInterval(timer)
timer = null
}
onBeforeUnmount(clearTimer)
}
src/view/components/community-info.vue
View file @ 70ae8115
...@@ -161,7 +161,12 @@ ...@@ -161,7 +161,12 @@
type="primary" type="primary"
ghost ghost
size="small" size="small"
@click="showRiskBuilding = false" @click="
() => {
showRiskBuilding = false
pagination.page = 1
}
"
>返回</n-button >返回</n-button
> >
</div> </div>
...@@ -191,7 +196,12 @@ ...@@ -191,7 +196,12 @@
v-if="showRiskBtn" v-if="showRiskBtn"
type="primary" type="primary"
size="small" size="small"
@click="showRiskBuilding = true" @click="
() => {
showRiskBuilding = true
pagination.page = 1
}
"
> >
查看安全排查结果 查看安全排查结果
</n-button> </n-button>
...@@ -992,30 +1002,30 @@ const bxColumn = [ ...@@ -992,30 +1002,30 @@ const bxColumn = [
title: '状态', title: '状态',
key: 'status', key: 'status',
}, },
{ // {
title: '操作', // title: '操作',
key: 'actions', // key: 'actions',
render(row) { // render(row) {
return h( // return h(
NButton, // NButton,
{ // {
text: true, // text: true,
textColor: '#1890ff', // textColor: '#1890ff',
size: 'small', // size: 'small',
onClick: async () => { // onClick: async () => {
bxInfo.value = // bxInfo.value =
( // (
await ajax.get({ // await ajax.get({
url: `${api.BX}/${row.id}`, // url: `${api.BX}/${row.id}`,
}) // })
)?.data?.content || {} // )?.data?.content || {}
showBxInfo.value = true // showBxInfo.value = true
}, // },
}, // },
{ default: () => '查看' }, // { default: () => '查看' },
) // )
}, // },
}, // },
] ]
const bxData = ref<any[]>([]) const bxData = ref<any[]>([])
......
src/view/components/config-popover.vue 0 → 100644
View file @ 70ae8115
<template>
<n-popover
id="config-popover"
:show="showPopover"
:x="position[0]"
:y="position[1]"
trigger="manual"
placement="right-start"
>
<section>
<div class="head">
<p class="title">调整数据</p>
<n-button type="primary" text @click="closePopover">
<n-icon size=".18rem">
<CloseCircleOutline />
</n-icon>
</n-button>
</div>
<div class="content">
<n-space>
<n-radio
:checked="checkedValue === 'originValue'"
value="originValue"
size="small"
@change="onChange"
>
使用初始值
</n-radio>
</n-space>
<n-space align="center">
<n-radio
:checked="checkedValue === 'newValue'"
value="newValue"
size="small"
@change="onChange"
>
使用配置值
</n-radio>
<n-input
v-model:value="newValue"
:disabled="checkedValue !== 'newValue'"
size="small"
/>
</n-space>
<n-space justify="center">
<n-button size="small" type="primary" @click="saveConfig">
确定
</n-button>
</n-space>
</div>
</section>
</n-popover>
</template>
<script lang="ts" setup>
import { computed, onBeforeUnmount, PropType, ref, watch } from 'vue'
import { NPopover, NSpace, NIcon, NButton, NRadio, NInput } from 'naive-ui'
import { CloseCircleOutline } from '@vicons/ionicons5'
import { getSelectorPath } from '@dom-utils/selector-path'
import useSettings, { Settings } from '@/hooks/useSettings'
const props = defineProps({
settings: {
type: Array as PropType<Settings>,
required: true,
},
})
const emit = defineEmits(['save'])
const showPopover = ref(false)
const position = ref<[number, number]>([0, 0])
const changes = computed(() => props.settings)
let curEle: HTMLElement | undefined
const timer: any = null
const handler = (e) => {
e.preventDefault()
curEle = e.target as HTMLElement
if (!curEle.innerText || curEle.children.length > 0) return
const { clientX, clientY } = e
position.value = [clientX, clientY]
showPopover.value = true
checkValue()
}
function checkValue() {
if (!curEle) return
const path = getSelectorPath(curEle)
const index = changes.value.findIndex((item) => item.path === path)
if (index >= 0) {
checkedValue.value = 'newValue'
newValue.value = curEle.innerText
} else {
checkedValue.value = 'originValue'
newValue.value = ''
}
}
document.addEventListener('contextmenu', handler)
watch(
() => changes.value,
(changes) => {
useSettings(changes)
},
{ immediate: true },
)
onBeforeUnmount(() => {
document.removeEventListener('contextmenu', handler)
})
const newValue = ref('')
const checkedValue = ref('originValue')
function onChange(e) {
checkedValue.value = e.target.value
}
function saveConfig() {
if (!curEle) return
const path = getSelectorPath(curEle)
const result = [...changes.value]
const index = result.findIndex((item) => item.path === path)
if (checkedValue.value === 'newValue') {
if (index >= 0) {
result[index].value = newValue.value
} else {
result.push({
path,
value: newValue.value,
pastValue: curEle.innerText,
})
}
curEle.innerText = newValue.value
} else if (checkedValue.value === 'originValue') {
if (index >= 0) {
curEle.innerText = result[index].pastValue
result.splice(index, 1)
}
}
emit('save', result)
}
function closePopover() {
showPopover.value = false
newValue.value = ''
checkedValue.value = 'originValue'
}
</script>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#config-popover
$blur()
font-size .1rem
padding 0
width 3rem
box-sizing border-box
.head
display flex
align-items center
justify-content space-between
border-bottom .01rem solid $font-color
padding .04rem .08rem
box-sizing inherit
font-size .12rem
font-weight bold
.content
padding .08rem
box-sizing inherit
</style>
src/view/edit-page.vue
View file @ 70ae8115
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
columns="1fr 1.5fr 1fr" columns="1fr 1.5fr 1fr"
:rows="`${layout.rows}`" :rows="`${layout.rows}`"
> >
<!-- 为了保持和view-page一样的页面结构，使settings能找到对应元素进行数据替换 -->
<Map v-show="false" />
<div <div
v-for="(_, index) in new Array(layout.boxNum)" v-for="(_, index) in new Array(layout.boxNum)"
:key="index" :key="index"
...@@ -40,7 +42,7 @@ ...@@ -40,7 +42,7 @@
size=".16rem" size=".16rem"
@click="onSetComponent(componentList[components[index]])" @click="onSetComponent(componentList[components[index]])"
> >
<Settings /> <SettingsOutline />
</n-icon> --> </n-icon> -->
</div> </div>
</m-grid> </m-grid>
...@@ -98,14 +100,18 @@ ...@@ -98,14 +100,18 @@
</n-space> </n-space>
</n-drawer-content> </n-drawer-content>
</n-drawer> </n-drawer>
<!-- <ConfigPopover :settings="settings" @save="onSaveSettings" /> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import LayoutModal from './components/layout-modal.vue' import LayoutModal from './components/layout-modal.vue'
import ComponentModal from './components/component-modal.vue' import ComponentModal from './components/component-modal.vue'
import ConfigPopover from './components/config-popover.vue'
import Map from './components/map.vue'
import useLayout from '@/hooks/useLayout' import useLayout from '@/hooks/useLayout'
import useComponent from '@/hooks/useComponent' import useComponent from '@/hooks/useComponent'
import { TrashBin, Settings } from '@vicons/ionicons5' import { Settings } from '@/hooks/useSettings'
import { TrashBin, SettingsOutline } from '@vicons/ionicons5'
import { bus } from '@/utils/component-list' import { bus } from '@/utils/component-list'
import axios from 'axios' import axios from 'axios'
import { import {
...@@ -121,6 +127,10 @@ import { ...@@ -121,6 +127,10 @@ import {
import { onBeforeUnmount, ref } from 'vue' import { onBeforeUnmount, ref } from 'vue'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
const settings = ref<Settings>([])
const onSaveSettings = (data: Settings) => {
settings.value = data
}
const { showLayoutModal, layout, onChangeLayout } = useLayout() const { showLayoutModal, layout, onChangeLayout } = useLayout()
const { const {
components, components,
...@@ -131,6 +141,7 @@ const { ...@@ -131,6 +141,7 @@ const {
onSelectComponent, onSelectComponent,
isTake2rows, isTake2rows,
} = useComponent() } = useComponent()
const handleMessage = (e) => { const handleMessage = (e) => {
const { type, data } = e.data const { type, data } = e.data
switch (type) { switch (type) {
...@@ -141,6 +152,7 @@ const handleMessage = (e) => { ...@@ -141,6 +152,7 @@ const handleMessage = (e) => {
data: JSON.stringify({ data: JSON.stringify({
layout: layout.value, layout: layout.value,
components: components.value, components: components.value,
settings: settings.value,
}), }),
}, },
'*', '*',
...@@ -161,6 +173,7 @@ const handleMessage = (e) => { ...@@ -161,6 +173,7 @@ const handleMessage = (e) => {
const config = JSON.parse(configJson) const config = JSON.parse(configJson)
config?.layout && (layout.value = config.layout) config?.layout && (layout.value = config.layout)
config?.components && (components.value = config.components) config?.components && (components.value = config.components)
config?.settings && (settings.value = config.settings)
}) })
break break
case 'layout': case 'layout':
......
src/view/view-page.vue
View file @ 70ae8115
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<m-modal v-model="showModal" title="选择展示屏"> <m-modal v-model="showModal" title="选择展示屏">
<div class="list-content"> <div class="list-content">
<div v-for="item in list" :key="item.id" class="item"> <div v-for="item in list" :key="item.id" class="item">
<p>{{ item.configName }}</p> <p :title="item.configName">{{ item.configName }}</p>
<p>{{ item.updateTime }}</p> <p>{{ item.updateTime }}</p>
<n-button <n-button
size="tiny" size="tiny"
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import useLayout from '@/hooks/useLayout' import useLayout from '@/hooks/useLayout'
import useComponent from '@/hooks/useComponent' import useComponent from '@/hooks/useComponent'
// import useSettings from '@/hooks/useSettings'
import { onMounted, ref, shallowRef } from 'vue' import { onMounted, ref, shallowRef } from 'vue'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
import { NSpace, NButton } from 'naive-ui' import { NSpace, NButton } from 'naive-ui'
...@@ -81,7 +82,6 @@ import c4 from '@/assets/images/c4.png' ...@@ -81,7 +82,6 @@ import c4 from '@/assets/images/c4.png'
import c5 from '@/assets/images/c5.png' import c5 from '@/assets/images/c5.png'
import c6 from '@/assets/images/c6.png' import c6 from '@/assets/images/c6.png'
import CommunityIcon from '@/assets/images/init-point.png' import CommunityIcon from '@/assets/images/init-point.png'
import BlueOn from '@/assets/images/blue-on.gif'
const mapRef = shallowRef<any>(null) const mapRef = shallowRef<any>(null)
const { layout } = useLayout() const { layout } = useLayout()
...@@ -129,6 +129,7 @@ function switchDataView({ id, configJson }) { ...@@ -129,6 +129,7 @@ function switchDataView({ id, configJson }) {
const config = JSON.parse(configJson) const config = JSON.parse(configJson)
config?.layout && (layout.value = config.layout) config?.layout && (layout.value = config.layout)
config?.components && (components.value = config.components) config?.components && (components.value = config.components)
// useSettings(config?.settings || [])
showModal.value = false showModal.value = false
isDefaultScreen.value = false isDefaultScreen.value = false
window.location.hash = `#/${id}` window.location.hash = `#/${id}`
...@@ -313,6 +314,6 @@ const onSelectCommunity = async (data: any) => { ...@@ -313,6 +314,6 @@ const onSelectCommunity = async (data: any) => {
white-space nowrap white-space nowrap
text-overflow ellipsis text-overflow ellipsis
&:nth-of-type(2) &:nth-of-type(2)
flex 2 flex 1.2
margin 0 .1rem margin 0 .1rem
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment