Merge branch 'temp' of https://gitea.peidikeji.cn/zhouhui/lcny-vue3-antd-admin into temp
commit
13a59790c1
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667196433611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9606" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M418.9 146.14H204.95a58.799 58.799 0 0 0-41.6 17.21 58.716 58.716 0 0 0-17.21 41.59v213.94a58.758 58.758 0 0 0 58.8 58.8h213.94a58.758 58.758 0 0 0 58.8-58.8V204.95c0.01-15.6-6.18-30.56-17.21-41.59a58.687 58.687 0 0 0-41.57-17.22zM860.65 163.36a58.716 58.716 0 0 0-41.59-17.21H605.11a58.758 58.758 0 0 0-58.8 58.8v213.94a58.758 58.758 0 0 0 58.8 58.8h213.93c15.6 0.01 30.56-6.18 41.59-17.21a58.768 58.768 0 0 0 17.22-41.59V204.95c0.02-15.6-6.17-30.56-17.2-41.59zM418.89 546.31l0.01-0.01H204.95a58.799 58.799 0 0 0-41.6 17.21 58.716 58.716 0 0 0-17.21 41.59v213.94a58.799 58.799 0 0 0 17.21 41.6 58.716 58.716 0 0 0 41.59 17.21h213.94a58.758 58.758 0 0 0 58.8-58.8V605.11c0.01-15.6-6.18-30.56-17.21-41.59a58.718 58.718 0 0 0-41.58-17.21zM819.06 546.31v-0.01H605.11a58.758 58.758 0 0 0-58.8 58.8v213.94a58.79 58.79 0 0 0 17.2 41.59 58.768 58.768 0 0 0 41.59 17.22h213.95c15.6 0.01 30.56-6.18 41.6-17.21a58.716 58.716 0 0 0 17.21-41.59V605.11a58.758 58.758 0 0 0-58.8-58.8z" p-id="9607" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -25,6 +25,8 @@ export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__'
|
|||
// lock info
|
||||
export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__'
|
||||
|
||||
export const YEAR_KEY = 'YEAR_KEY__'
|
||||
|
||||
export enum CacheTypeEnum {
|
||||
SESSION,
|
||||
LOCAL,
|
||||
|
|
|
|||
|
|
@ -91,8 +91,6 @@ export const useUserStore = defineStore({
|
|||
try {
|
||||
const { goHome = true, mode, ...loginParams } = params
|
||||
const data = await loginApi(loginParams, mode)
|
||||
console.log(data)
|
||||
|
||||
const { token } = data
|
||||
this.setToken(token)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
import { YEAR_KEY } from '/@/enums/cacheEnum'
|
||||
|
||||
interface VisualizationState {
|
||||
year: number
|
||||
addressId?: number | null
|
||||
}
|
||||
|
||||
export const useVisualizationStore = defineStore({
|
||||
id: 'app-visualization',
|
||||
state: (): VisualizationState => ({
|
||||
year: Number(localStorage.getItem(YEAR_KEY)) || new Date().getFullYear(),
|
||||
addressId: null,
|
||||
}),
|
||||
getters: {
|
||||
getYear(): number {
|
||||
return this.year
|
||||
},
|
||||
getAddresId(): number | null {
|
||||
return this?.addressId ?? null
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setAddressId(id: number | null) {
|
||||
this.addressId = id
|
||||
},
|
||||
setYear(year: number) {
|
||||
this.year = year
|
||||
localStorage.setItem(YEAR_KEY, String(year))
|
||||
},
|
||||
plus() {
|
||||
this.setYear(this.year + 1)
|
||||
},
|
||||
minus() {
|
||||
this.setYear(this.year - 1)
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="bg w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
|
||||
<div class="grid h-27px w-full grid-cols-5 text-white text-12px font-bold px-18px">
|
||||
<div
|
||||
class="h-full flex items-center cursor-pointer justify-center"
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
xxx系统
|
||||
</div>
|
||||
<div class="h-full flex items-center cursor-pointer justify-center">
|
||||
<Popover
|
||||
placement="topRight"
|
||||
trigger="click"
|
||||
overlayClassName="fotter-popover"
|
||||
color="rgba(28, 44, 52, .8)"
|
||||
:get-popup-container="getPopupContainer"
|
||||
:align="{ offset: [38, 0] }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="text-white"> 1 </div>
|
||||
</template>
|
||||
<SvgIcon name="more-icon" />
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { SvgIcon } from '/@/components/Icon'
|
||||
import { Popover } from 'ant-design-vue'
|
||||
|
||||
const getPopupContainer = (trigger) => {
|
||||
return trigger.parentElement
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bg {
|
||||
background: url('../../../assets/images/footer.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
::v-deep(.fotter-popover) {
|
||||
.ant-popover-inner-content {
|
||||
width: 375px;
|
||||
border: 1px solid rgba(57, 102, 132, 1);
|
||||
}
|
||||
|
||||
.ant-popover-arrow {
|
||||
right: 42px;
|
||||
|
||||
.ant-popover-arrow-content {
|
||||
background-color: rgba(57, 102, 132, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,22 @@
|
|||
<template>
|
||||
<div class="text-4xl text-white flex items-center justify-center relative">
|
||||
<div
|
||||
class="absolute left-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
|
||||
>
|
||||
{{ year }}年
|
||||
<div class="flex flex-col justify-center -mt-2px ml-4px">
|
||||
<caret-up-outlined
|
||||
:style="{ fontSize: '10px', color: '#76E9F0' }"
|
||||
class="h-6px cursor-pointer"
|
||||
@click="onYearPlus"
|
||||
/>
|
||||
<caret-down-outlined
|
||||
:style="{ fontSize: '10px', color: '#76E9F0' }"
|
||||
class="h-6px cursor-pointer"
|
||||
@click="onYearMinus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1099px h-43px relative">
|
||||
<div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
|
||||
{{ state.date }} {{ state.time }}
|
||||
|
|
@ -20,8 +37,22 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import { reactive, computed } from 'vue'
|
||||
import headTitleImg from '/@/assets/images/head-title.png'
|
||||
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const year = computed(() => visualizationStore.getYear)
|
||||
|
||||
const onYearPlus = () => {
|
||||
visualizationStore.plus()
|
||||
}
|
||||
const onYearMinus = () => {
|
||||
visualizationStore.minus()
|
||||
}
|
||||
|
||||
const state = reactive({
|
||||
date: '',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
|
||||
>返回</div
|
||||
>
|
||||
<div ref="chartRef" class="w-full h-[calc(100% - 2px)]"> </div>
|
||||
<div ref="chartRef" class="w-full h-full"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(0, 15, 40, 0.5)',
|
||||
areaColor: 'rgba(0, 15, 40, 0.0)',
|
||||
shadowColor: 'rgba(0, 0, 0, 1)',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
|
|
@ -105,12 +105,13 @@
|
|||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: {
|
||||
image: domImg,
|
||||
repeat: 'repeat',
|
||||
},
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'repeat',
|
||||
// },
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: 'rgba(0, 0, 0, 0.2)',
|
||||
|
||||
// shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowOffsetX: -2,
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||||
>隆昌农业产业情况</div
|
||||
>
|
||||
<div class="w-full h-200px mx-auto mt-10px" ref="chartRef"> </div>
|
||||
<div class="w-full h-250px mx-auto mt-10px" ref="chartRef"> </div>
|
||||
<div
|
||||
class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
|
||||
>
|
||||
总产值：
|
||||
<CountTo
|
||||
:startVal="0"
|
||||
:endVal="2200202"
|
||||
:endVal="countNumber"
|
||||
class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||||
/>
|
||||
万元
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
|
||||
<div class="grid grid-cols-2 gap-y-18px gap-x-10px mx-10px mt-18px">
|
||||
<div class="flex items-center" v-for="item in cityData" :key="item.slug">
|
||||
<!-- <SvgIcon :name="item.slug" :size="40" color="transparent" /> -->
|
||||
<img :src="item.icon" alt="" class="w-40px h-40px" srcset="" />
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
|
||||
import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
|
||||
import { CountTo } from '/@/components/CountTo'
|
||||
|
|
@ -45,6 +45,10 @@
|
|||
import cityIcon3 from '/@/assets/images/city-3.png'
|
||||
import cityIcon4 from '/@/assets/images/city-4.png'
|
||||
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
|
||||
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
|
||||
|
||||
interface cityDataType {
|
||||
name: string
|
||||
slug: string
|
||||
|
|
@ -89,6 +93,7 @@
|
|||
CountTo,
|
||||
},
|
||||
setup() {
|
||||
const visualizationStore = useVisualizationStore()
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const Data = reactive({
|
||||
|
|
@ -103,28 +108,47 @@
|
|||
legend: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '隆昌农业产业情况',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
||||
colorBy: 'data',
|
||||
color: colorList,
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}\n{d}%',
|
||||
},
|
||||
data: Data.lyqkData,
|
||||
data: Data.lyqkData.map((item, index) => {
|
||||
item.label = {
|
||||
color: colorList[index],
|
||||
}
|
||||
return item
|
||||
}),
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
async function getCropYieldCategory(params = { year: '2022', base_id: null }) {
|
||||
const { list } = await getCropYieldCategoryStatics(params)
|
||||
const arr = [] as { value: string; name: string }[]
|
||||
async function getCropYieldCategory() {
|
||||
const { list } = await getCropYieldCategoryStatics({
|
||||
year: visualizationStore.getYear,
|
||||
base_id: visualizationStore.getAddresId,
|
||||
})
|
||||
const arr = [] as { value: string | number; name: string }[]
|
||||
for (const key in list) {
|
||||
if (Object.prototype.hasOwnProperty.call(list, key)) {
|
||||
arr.push({
|
||||
value: list[key],
|
||||
// value: list[key],
|
||||
value: parseInt(Math.random() * 100),
|
||||
name: key,
|
||||
})
|
||||
}
|
||||
|
|
@ -169,16 +193,27 @@
|
|||
Data.cityData = temp
|
||||
}
|
||||
|
||||
const countNumber = computed(() =>
|
||||
Data.lyqkData.reduce((c, p) => {
|
||||
c += p.value
|
||||
return c
|
||||
}, 0),
|
||||
)
|
||||
|
||||
onBeforeMount(() => {
|
||||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
//地图点击
|
||||
rootEmitter.on('map:click', (e) => {
|
||||
visualizationStore.setAddressId(e.id)
|
||||
onChangeMap(e)
|
||||
getCropYieldCategory()
|
||||
})
|
||||
//地图返回
|
||||
rootEmitter.on('map:back', () => {
|
||||
visualizationStore.setAddressId(null)
|
||||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -189,8 +224,16 @@
|
|||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => visualizationStore.getYear,
|
||||
() => {
|
||||
getCropYieldCategory()
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
countNumber,
|
||||
...toRefs(Data),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
|
||||
<div class="overflow-y-scroll bg-[#020603] bg-img">
|
||||
<div class="flex flex-col h-full w-3120px h-760px">
|
||||
<div class="overflow-y-scroll">
|
||||
<div class="flex flex-col h-full w-3120px h-760px bg-img relative">
|
||||
<Head />
|
||||
<div class="flex-1 flex justify-between px-20px">
|
||||
<div class="flex">
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
<Forestry width="440px" height="353px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-5">
|
||||
<div class="bg-[10272f] bg-opacity-50">
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<NYQK />
|
||||
<NCZQS class="mt-37px" />
|
||||
<NCZQS class="mt-20px" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Map />
|
||||
</div>
|
||||
<div class="bg-[10272f] bg-opacity-50">
|
||||
<div class="bg-[#10272f] bg-opacity-00">
|
||||
<CZNYCY />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,9 +36,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<MapModal v-model:visible="visibleMapModal" :footer="null" />
|
||||
</div>
|
||||
<!-- </ScaleScreen> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -50,6 +52,7 @@
|
|||
import Forestry from './components/Forestry.vue'
|
||||
import Agriculture from './components/Agriculture.vue'
|
||||
import Head from './components/Head.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
import NYQK from './components/NYQK.vue'
|
||||
import NCZQS from './components/NCZQS.vue'
|
||||
import CZNYCY from './components/CZNYCY.vue'
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
import MapModal from './MapModal.vue'
|
||||
import { createVContext } from './useVContext'
|
||||
import mitt from '/@/utils/mitt'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
|
|
@ -80,10 +84,14 @@
|
|||
SZJCSJ,
|
||||
TRJCSJ,
|
||||
Head,
|
||||
Footer,
|
||||
MapModal,
|
||||
},
|
||||
setup() {
|
||||
const mapData = reactive([])
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
console.log(visualizationStore.getYear)
|
||||
|
||||
const vEmitter = mitt()
|
||||
|
||||
createVContext({
|
||||
|
|
@ -114,6 +122,10 @@
|
|||
.bg-img {
|
||||
// background-image: url('../../assets/images/map-bg.png') no-repeat;
|
||||
// background-position: center;
|
||||
background: url('../../assets/images/map-bg.png') no-repeat, #020603;
|
||||
background-position: center center;
|
||||
background-attachment: scroll;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
// .bg {
|
||||
|
|
|
|||
Loading…
Reference in New Issue