zhouhui
/
lcny-vue3-antd-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改需求

new-map
30830569@qq.com 2022-11-16 17:34:12 +08:00
parent 77da2278c0 94ab292232
commit f22aed3793
5 changed files with 233 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/visualization/components/DXCY.vue
View File

@ -11,7 +11,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch, toRefs } from 'vue' import {
defineComponent,
reactive,
ref,
Ref,
onBeforeMount,
watch,
toRefs,
onBeforeUnmount,
} from 'vue'
import Box from './Box.vue' import Box from './Box.vue'
import { useECharts } from '/@/hooks/web/useECharts' import { useECharts } from '/@/hooks/web/useECharts'
import { getRiceShrimpIndustry } from '/@/api/sys/other' import { getRiceShrimpIndustry } from '/@/api/sys/other'
@ -45,17 +54,21 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData() { async function getData(init = true) {
const resData = await getRiceShrimpIndustry({ const resData = await getRiceShrimpIndustry({
year: visualizationStore.getYear, year: visualizationStore.getYear,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
if (init) {
chartsInit() chartsInit()
} else {
chartLineAmi()
}
} }
let legendData = [] as any let legendData = [] as any
const chartsInit = () => { function formatChartData() {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -63,12 +76,12 @@
Data.series.forEach(({ name, data }, index) => { Data.series.forEach(({ name, data }, index) => {
const color = chartLineColors[index % chartLineColors.length] const color = chartLineColors[index % chartLineColors.length]
obj.legendData.push(name) obj.legendData.push(name + '')
obj.series.push({ obj.series.push({
name: name, name: name,
data: data, data: data,
smooth: false,
type: 'line', type: 'line',
smooth: false,
// symbol: 'none', // symbol: 'none',
itemStyle: { itemStyle: {
color: color.itemColor, color: color.itemColor,
@ -78,8 +91,11 @@
}, },
}) })
}) })
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
@ -142,35 +158,40 @@
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
const currentIndex = index % 4 currentIndex = index % 4
sleep = index % (4 * 2) sleep = index % (4 * fo)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep == 7) { if (sleep + 1 >= 4 * fo) {
chartLineAmi() timer && clearInterval(timer)
setTimeout(() => {
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
getInstance()?.dispatchAction({ currentIndex = index % legendData.length
type: 'hideTip', if (currentIndex == 0) {
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -178,17 +199,21 @@
}) })
}) })
} }
if (legendIndex >= 0) { getInstance()?.setOption({
getInstance()?.dispatchAction({ series: [obj.series[currentIndex]],
type: 'legendSelect', })
name: legendData[legendIndex - 1], getInstance()?.dispatchAction({
}) type: 'legendSelect',
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
if (sleep <= 0) getData() index++
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }
@ -199,6 +224,10 @@
}) })
}) })
onBeforeUnmount(() => {
timer && clearInterval(timer)
})
watch( watch(
() => visualizationStore.getYear, () => visualizationStore.getYear,
() => getData(), () => getData(),

100
src/views/visualization/components/DXJG.vue
View File

@ -7,7 +7,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue' import { defineComponent, reactive, ref, Ref, onBeforeMount, onBeforeUnmount } from 'vue'
import Box from './Box.vue' import Box from './Box.vue'
import { useECharts } from '/@/hooks/web/useECharts' import { useECharts } from '/@/hooks/web/useECharts'
import { getRiceShrimpPrice } from '/@/api/sys/other' import { getRiceShrimpPrice } from '/@/api/sys/other'
@ -51,14 +51,15 @@
chartsInit() chartsInit()
} }
const reducer = (acc, cur) => (cur > acc ? cur : acc) // const reducer = (acc, cur) => (cur > acc ? cur : acc)
function largestOfFour(arr) { // function largestOfFour(arr) {
return arr.map(({ data }) => data.reduce(reducer)) // return arr.map(({ data }) => data.reduce(reducer))
} // }
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
let legendData = [] as any let legendData = [] as any
const chartsInit = () => {
function formatChartData() {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -81,10 +82,13 @@
}, },
}) })
}) })
const max = Math.max(...largestOfFour(Data.series)) ?? 100
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
// const max = Math.max(...largestOfFour(Data.series)) ?? 100
setOptions({ setOptions({
grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
@ -152,29 +156,42 @@
let timer: any = null let timer: any = null
function chartAmi() { function chartAmi() {
let index = 1 let index = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let sleep = 1 let currentIndex = 0
let type = 'showTip' let sleep = 0
let legendIndex = legendData.length const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
if (legendData.length == 0) return currentIndex = index % 4
const currentIndex = (index - 1) % 4 sleep = index % (4 * fo)
sleep = index % (4 * 2)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: type, type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
// console.log('currentIndex', currentIndex) if (sleep + 1 >= 4 * fo) {
// console.log('legendIndex', legendIndex) timer && clearInterval(timer)
// console.log('sleep', sleep) setTimeout(() => {
// console.log('index', index) getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
}
index++
}, timerNumber)
}
if (type == 'hideTip' && currentIndex == 0) { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000
timer && clearInterval(timer)
timer = setInterval(() => {
currentIndex = index % legendData.length
if (currentIndex == 0) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -182,28 +199,33 @@
}) })
}) })
} }
if (type == 'hideTip') { getInstance()?.setOption({
getInstance()?.dispatchAction({ series: [obj.series[currentIndex]],
type: 'legendSelect', })
name: legendData[legendIndex - 1], getInstance()?.dispatchAction({
}) type: 'legendSelect',
if (legendIndex == 0) getData() name: legendData[currentIndex],
legendIndex-- })
} if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
if (sleep == 0) { setTimeout(() => {
type = 'hideTip' chartAmi()
}, timerNumber)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
async function getData() { async function getData(init = true) {
const resData = await getRiceShrimpPrice() const resData = await getRiceShrimpPrice()
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
chartsInit() if (init) {
chartsInit()
} else {
chartLineAmi()
}
} }
onBeforeMount(() => { onBeforeMount(() => {
@ -214,6 +236,10 @@
}) })
}) })
onBeforeUnmount(() => {
timer && clearInterval(timer)
})
return { return {
tabList, tabList,
currentTab, currentTab,

87
src/views/visualization/components/DXLX.vue
View File

@ -7,7 +7,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue' import { defineComponent, reactive, ref, Ref, onBeforeMount, watch, onBeforeUnmount } from 'vue'
import Box from './Box.vue' import Box from './Box.vue'
import { useECharts } from '/@/hooks/web/useECharts' import { useECharts } from '/@/hooks/web/useECharts'
import { getRiceShrimpFlow } from '/@/api/sys/other' import { getRiceShrimpFlow } from '/@/api/sys/other'
@ -31,19 +31,23 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData() { async function getData(init = true) {
const resData = await getRiceShrimpFlow({ const resData = await getRiceShrimpFlow({
year: visualizationStore.getYear, year: visualizationStore.getYear,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
chartsInit() if (init) {
chartsInit()
} else {
chartLineAmi()
}
} }
let legendData = [] as any let legendData = [] as any
const chartsInit = () => { function formatChartData() {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -51,15 +55,13 @@
Data.series.forEach(({ name, data }, index) => { Data.series.forEach(({ name, data }, index) => {
const color = chartLineColors[index % chartLineColors.length] const color = chartLineColors[index % chartLineColors.length]
obj.legendData.push(name + '')
obj.legendData.push(name)
obj.series.push({ obj.series.push({
name: name, name: name,
data: data.map((e) => (e ? Number((e / 2000).toFixed(2)) : e)), data: data,
smooth: false,
type: 'line', type: 'line',
smooth: false,
// symbol: 'none', // symbol: 'none',
stack: 'Total',
itemStyle: { itemStyle: {
color: color.itemColor, color: color.itemColor,
}, },
@ -68,8 +70,12 @@
}, },
}) })
}) })
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
legend: { legend: {
@ -129,39 +135,44 @@
} }
let timer: any = null let timer: any = null
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
const currentIndex = index % 4 currentIndex = index % 4
sleep = index % (4 * 2) sleep = index % (4 * fo)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) {
if (sleep == 7) { timer && clearInterval(timer)
chartLineAmi() setTimeout(() => {
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
getInstance()?.dispatchAction({ currentIndex = index % legendData.length
type: 'hideTip', if (currentIndex == 0) {
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -169,17 +180,21 @@
}) })
}) })
} }
if (legendIndex >= 0) { getInstance()?.setOption({
getInstance()?.dispatchAction({ series: [obj.series[currentIndex]],
type: 'legendSelect', })
name: legendData[legendIndex - 1], getInstance()?.dispatchAction({
}) type: 'legendSelect',
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
if (sleep <= 0) getData() index++
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }
@ -191,6 +206,10 @@
}) })
}) })
onBeforeUnmount(() => {
timer && clearInterval(timer)
})
watch( watch(
() => visualizationStore.getYear, () => visualizationStore.getYear,
() => getData(), () => getData(),

76
src/views/visualization/components/DZWZ.vue
View File

@ -19,7 +19,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue' import { defineComponent, reactive, ref, Ref, onBeforeMount, watch, onBeforeUnmount } from 'vue'
import Box from './Box.vue' import Box from './Box.vue'
import { useECharts } from '/@/hooks/web/useECharts' import { useECharts } from '/@/hooks/web/useECharts'
import { getMateriel } from '/@/api/sys/other' import { getMateriel } from '/@/api/sys/other'
@ -62,19 +62,23 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData() { async function getData(init = true) {
const resData = await getMateriel({ const resData = await getMateriel({
year: visualizationStore.getYear, year: visualizationStore.getYear,
type: currentTab.value, type: currentTab.value,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
chartsInit() if (init) {
chartsInit()
} else {
chartLineAmi()
}
} }
let legendData = [] as any let legendData = [] as any
const chartsInit = () => { function formatChartData() {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -112,7 +116,11 @@
}) })
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '2%', top: '50px', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '2%', top: '50px', bottom: '2%', containLabel: true },
legend: { legend: {
@ -192,36 +200,40 @@
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
const currentIndex = index % 4 currentIndex = index % 4
sleep = index % (4 * 2) sleep = index % (4 * fo)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) {
if (sleep == 7) { timer && clearInterval(timer)
chartLineAmi() setTimeout(() => {
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
getInstance()?.dispatchAction({ currentIndex = index % legendData.length
type: 'hideTip', if (currentIndex == 0) {
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -229,17 +241,21 @@
}) })
}) })
} }
if (legendIndex >= 0) { getInstance()?.setOption({
getInstance()?.dispatchAction({ series: [obj.series[currentIndex]],
type: 'legendSelect', })
name: legendData[legendIndex - 1], getInstance()?.dispatchAction({
}) type: 'legendSelect',
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
if (sleep <= 0) getData() index++
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }
@ -257,6 +273,10 @@
}) })
}) })
onBeforeUnmount(() => {
timer && clearInterval(timer)
})
return { return {
tabList, tabList,
currentTab, currentTab,

14
src/views/visualization/index.vue
View File

@ -124,13 +124,15 @@
rootEmitter: vEmitter, rootEmitter: vEmitter,
}) })
let timer: any = null let timer1: any = null
let timer2: any = null
let timer3: any = null
const visibleMapModal = ref<boolean>(false) const visibleMapModal = ref<boolean>(false)
onMounted(() => { onMounted(() => {
setInterval(() => vEmitter.emit('interval:auto'), 1000 * 60) timer1 = setInterval(() => vEmitter.emit('interval:auto'), 1000 * 60)
setInterval(() => vEmitter.emit('interval:tab'), 1000 * 30) timer2 = setInterval(() => vEmitter.emit('interval:tab'), 1000 * 30)
setInterval(() => vEmitter.emit('interval:tab1'), 1000 * 10) timer3 = setInterval(() => vEmitter.emit('interval:tab1'), 1000 * 10)
new Build(cavsRef).run() new Build(cavsRef).run()
// Am(unref(cavsRef)) // Am(unref(cavsRef))
}) })
@ -146,7 +148,9 @@
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
timer && clearInterval(timer) timer1 && clearInterval(timer1)
timer2 && clearInterval(timer2)
timer3 && clearInterval(timer3)
}) })
return { return {