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 @@
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="stylesheet" href="./assets/vendor.db35e2cd.css">
<link rel="stylesheet" href="./assets/index.42ecaaae.css">
<link rel="stylesheet" href="./assets/index.00cfd82e.css">
</head>
<body>
......
package-lock.json
View file @ 70ae8115
......@@ -7,6 +7,7 @@
"": {
"version": "1.0.0",
"dependencies": {
"@dom-utils/selector-path": "^1.0.3",
"@vicons/ionicons5": "^0.11.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
......@@ -496,6 +497,14 @@
"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": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz",
......@@ -4923,6 +4932,11 @@
"integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==",
"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": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz",
......@@ -5848,6 +5862,14 @@
"dev": true,
"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": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz",
......@@ -9240,6 +9262,11 @@
"integrity": "sha512-wv9lBoPaeWsOgBSX09cpDi1HcO/A3aNfY+Qhvu8JnOSvVfSTmcXMKGrg9g8oTgWA8YLVqq+wt8p+eQvAhqKqlQ==",
"dev": true
},
"trim": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
},
"tsconfig-paths": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz",
......
package.json
View file @ 70ae8115
......@@ -11,6 +11,7 @@
"serve": "vite preview"
},
"dependencies": {
"@dom-utils/selector-path": "^1.0.3",
"@vicons/ionicons5": "^0.11.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
......
src/App.vue
View file @ 70ae8115
......@@ -33,6 +33,7 @@ const themeOverrides: GlobalThemeOverrides = {
primaryColor: '#2F86EE',
borderColor: '#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 @@
type="primary"
ghost
size="small"
@click="showRiskBuilding = false"
@click="
() => {
showRiskBuilding = false
pagination.page = 1
}
"
>返回</n-button
>
</div>
......@@ -191,7 +196,12 @@
v-if="showRiskBtn"
type="primary"
size="small"
@click="showRiskBuilding = true"
@click="
() => {
showRiskBuilding = true
pagination.page = 1
}
"
>
查看安全排查结果
</n-button>
......@@ -992,30 +1002,30 @@ const bxColumn = [
title: '状态',
key: 'status',
},
{
title: '操作',
key: 'actions',
render(row) {
return h(
NButton,
{
text: true,
textColor: '#1890ff',
size: 'small',
onClick: async () => {
bxInfo.value =
(
await ajax.get({
url: `${api.BX}/${row.id}`,
})
)?.data?.content || {}
showBxInfo.value = true
},
},
{ default: () => '查看' },
)
},
},
// {
// title: '操作',
// key: 'actions',
// render(row) {
// return h(
// NButton,
// {
// text: true,
// textColor: '#1890ff',
// size: 'small',
// onClick: async () => {
// bxInfo.value =
// (
// await ajax.get({
// url: `${api.BX}/${row.id}`,
// })
// )?.data?.content || {}
// showBxInfo.value = true
// },
// },
// { default: () => '查看' },
// )
// },
// },
]
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 @@
columns="1fr 1.5fr 1fr"
:rows="`${layout.rows}`"
>
<!-- 为了保持和view-page一样的页面结构，使settings能找到对应元素进行数据替换 -->
<Map v-show="false" />
<div
v-for="(_, index) in new Array(layout.boxNum)"
:key="index"
......@@ -40,7 +42,7 @@
size=".16rem"
@click="onSetComponent(componentList[components[index]])"
>
<Settings />
<SettingsOutline />
</n-icon> -->
</div>
</m-grid>
......@@ -98,14 +100,18 @@
</n-space>
</n-drawer-content>
</n-drawer>
<!-- <ConfigPopover :settings="settings" @save="onSaveSettings" /> -->
</template>
<script lang="ts" setup>
import LayoutModal from './components/layout-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 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 axios from 'axios'
import {
......@@ -121,6 +127,10 @@ import {
import { onBeforeUnmount, ref } from 'vue'
import { ajax, api } from '@/ajax'
const settings = ref<Settings>([])
const onSaveSettings = (data: Settings) => {
settings.value = data
}
const { showLayoutModal, layout, onChangeLayout } = useLayout()
const {
components,
......@@ -131,6 +141,7 @@ const {
onSelectComponent,
isTake2rows,
} = useComponent()
const handleMessage = (e) => {
const { type, data } = e.data
switch (type) {
......@@ -141,6 +152,7 @@ const handleMessage = (e) => {
data: JSON.stringify({
layout: layout.value,
components: components.value,
settings: settings.value,
}),
},
'*',
......@@ -161,6 +173,7 @@ const handleMessage = (e) => {
const config = JSON.parse(configJson)
config?.layout && (layout.value = config.layout)
config?.components && (components.value = config.components)
config?.settings && (settings.value = config.settings)
})
break
case 'layout':
......
src/view/view-page.vue
View file @ 70ae8115
......@@ -25,7 +25,7 @@
<m-modal v-model="showModal" title="选择展示屏">
<div class="list-content">
<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>
<n-button
size="tiny"
......@@ -63,6 +63,7 @@
<script lang="ts" setup>
import useLayout from '@/hooks/useLayout'
import useComponent from '@/hooks/useComponent'
// import useSettings from '@/hooks/useSettings'
import { onMounted, ref, shallowRef } from 'vue'
import { ajax, api } from '@/ajax'
import { NSpace, NButton } from 'naive-ui'
......@@ -81,7 +82,6 @@ import c4 from '@/assets/images/c4.png'
import c5 from '@/assets/images/c5.png'
import c6 from '@/assets/images/c6.png'
import CommunityIcon from '@/assets/images/init-point.png'
import BlueOn from '@/assets/images/blue-on.gif'
const mapRef = shallowRef<any>(null)
const { layout } = useLayout()
......@@ -129,6 +129,7 @@ function switchDataView({ id, configJson }) {
const config = JSON.parse(configJson)
config?.layout && (layout.value = config.layout)
config?.components && (components.value = config.components)
// useSettings(config?.settings || [])
showModal.value = false
isDefaultScreen.value = false
window.location.hash = `#/${id}`
......@@ -313,6 +314,6 @@ const onSelectCommunity = async (data: any) => {
white-space nowrap
text-overflow ellipsis
&:nth-of-type(2)
flex 2
flex 1.2
margin 0 .1rem
</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