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

Merge branch 'temp' of https://gitea.peidikeji.cn/zhouhui/lcny-vue3-antd-admin into temp

new-map
H 2022-11-02 17:52:06 +08:00
parent 155e54d95f fbf504e87f
commit e18166f91b
8 changed files with 441 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/api/sys/other.ts
View File

@ -74,7 +74,7 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'modal') {
* @description:基地数据列表
*/
export function getAgriculturalBasic(
params = { per_page: 999999, page: 1 },
params: any = { per_page: 999999, page: 1, parent_id: 0, type: 2 },
mode: ErrorMessageMode = 'modal',
) {
return defHttp.get(
@ -115,3 +115,63 @@ export function getCropYieldCategoryStatics(params, mode: ErrorMessageMode = 'mo
},
)
}
/**
* @description:城镇年产值折线图
* 柱状图
*/
export function getCropYieldTotalChart(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: '/api/crop-yield-total-chart',
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:城镇年产值折线图
* 柱状图
*/
export function getCropYieldTotalListt(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: '/api/crop-yield-total-list',
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:设备数据-基地+设备类型
*
*/
export function getDeviceBaseDataStatics(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: '/api/device-base-data-statics',
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:获取指定设备下面的基地
*
*/
export function getAgriculturalDeviceBasic(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: '/api/agricultural-device-basic',
params,
},
{
errorMessageMode: mode,
},
)
}

25
src/design/index.less
View File

@ -42,3 +42,28 @@ svg,
span {
outline: none;
}
.dropdownClass {
.ant-dropdown-menu {
border: 1px solid rgba(57, 102, 132, 1);
color: #fff;
background: rgba(28, 44, 52, .9);
max-height: 200px;
overflow-y: auto;
.ant-dropdown-menu-item{
color: white;
&:hover{
background:rgba(62, 97, 114, 0.6);
}
}
}
.ant-popover-arrow {
right: 42px;
.ant-popover-arrow-content {
display: none;
background-color: rgba(57, 102, 132, 1) !important;
}
}
}

133
src/views/visualization/components/CZNYCY.vue
View File

@ -1,18 +1,143 @@
<template>
<div class="w-314px">
<div class="w-314px flex h-full flex-col">
<div
class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
class="text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
>城镇农业产业情况</div
>
<div class="text-right text-11px leading-17px text-white mr-42px"> 单位：万 </div>
<div :style="{ height: chartHeight + 'px' }" class="mt-20px min-h-200px" ref="chartRef"> </div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, reactive, Ref, ref, onMounted, computed, watch } from 'vue'
import { getCropYieldTotalListt } from '/@/api/sys/other'
// import echarts from '/@/utils/lib/echarts'
import { useECharts } from '/@/hooks/web/useECharts'
import { useVisualizationStore } from '/@/store/modules/visualization'
import { sortBy } from 'lodash-es'
const visualizationStore = useVisualizationStore()
const chartRef = ref<HTMLDivElement | null>(null)
export default defineComponent({
setup() {
return {}
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const Data = reactive({
list: [] as any,
})
const chartHeight = computed(() => {
return Data.list.length * 34 + Data.list.length * 12
})
function chatInit() {
setOptions({
legend: {
show: false,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
max: 'value',
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisPointer: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: Data.list?.map((e) => e.y) ?? [],
axisLabel: {
color: '#fff',
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
series: [
{
type: 'bar',
data: Data.list?.map((e) => e.value) ?? [],
label: {
show: true,
position: 'inside',
color: '#fff',
valueAnimation: true,
},
itemStyle: {
color: 'rgba(117, 232, 238, 0.5)',
},
barWidth: 34,
},
],
grid: { left: '2%', right: '2%', top: '0%', bottom: '2%', containLabel: true },
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
})
}
async function getData() {
const { list } = await getCropYieldTotalListt({
year: visualizationStore.getYear,
category_id: null,
})
const arr = [] as { value: string | number; y: string | number }[]
for (const key in list) {
if (Object.prototype.hasOwnProperty.call(list, key)) {
arr.push({
value: list[key],
y: key,
})
}
}
Data.list = sortBy(arr, (e) => {
return e.value
})
chatInit()
}
watch(
() => visualizationStore.getYear,
() => {
getData()
},
)
onMounted(() => {
getData()
})
return {
chartHeight,
chartRef,
}
},
})
</script>

60
src/views/visualization/components/JK.vue
View File

@ -1,17 +1,32 @@
<template>
<Box title="监控">
<div class="h-full flex flex-col">
<div class="py-10px">
<ul class="flex items-center justify-center m-0">
<li
class="mx-11px text-white text-12px cursor-pointer"
:class="{ active: currentTab == item.key }"
@click="changeTab(item.key)"
v-for="item in tabList"
:key="item.key"
>{{ item.value }}</li
<div class="py-10px relative">
<div
class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-15px font-bold"
>
</ul>
{{ currentTabValue }}
</div>
<div class="absolute right-18px top-1/2 transform -translate-y-1/2">
<Dropdown
overlayClassName="dropdownClass"
placement="bottomRight"
trigger="click"
:style="{ height: '300px' }"
>
<div class="cursor-pointer">
<span class="text-white text-12px">更多</span>
<DownOutlined :style="{ fontSize: '12px', color: '#FFF' }" />
</div>
<template #overlay>
<Menu @click="onMenuClick">
<menu-item v-for="item in tabList" :key="item.key">
<div>{{ item.value }}</div>
</menu-item>
</Menu>
</template>
</Dropdown>
</div>
</div>
<div class="flex-1 px-11px">
<div class="h-196px border border-solid"></div>
@ -26,11 +41,19 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
import { defineComponent, reactive, ref, onMounted, onBeforeMount, computed } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import { Dropdown, Menu } from 'ant-design-vue'
import { getDeviceBaseDataStatics } from '/@/api/sys/other'
import { useVisualizationStore } from '/@/store/modules/visualization'
import Box from './Box.vue'
export default defineComponent({
components: {
Box,
Dropdown,
DownOutlined,
Menu,
MenuItem: Menu.Item,
},
setup() {
const tabList = reactive([
@ -47,15 +70,25 @@
value: '基地3',
},
])
const visualizationStore = useVisualizationStore()
const currentTab = ref<String>('0')
const chartRef = ref<HTMLDivElement | null>(null)
const changeTab = (key: String) => {
const currentTabValue = computed(() => tabList.find((e) => e.key == currentTab.value)?.value)
async function getDevice() {
await getDeviceBaseDataStatics({
base_id: visualizationStore.getAddresId,
// device_type,
})
}
function onMenuClick({ key }) {
if (currentTab.value == key) return
currentTab.value = key
}
onBeforeMount(() => {})
onMounted(() => {})
@ -63,7 +96,8 @@
tabList,
currentTab,
chartRef,
changeTab,
currentTabValue,
onMenuClick,
}
},
})

49
src/views/visualization/components/NCZQS.vue
View File

@ -5,19 +5,30 @@
>
历年产值趋势
</div>
<div class="h-200px mt-30px" ref="chartRef"> 1 </div>
<div class="h-220px mt-10px" ref="chartRef"> 1 </div>
</div>
</template>
<script setup lang="ts">
import { Ref, ref, onMounted } from 'vue'
import { Ref, ref, onMounted, reactive, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
import { getCropYieldTotalChart } from '/@/api/sys/other'
import echarts from '/@/utils/lib/echarts'
import { useVisualizationStore } from '/@/store/modules/visualization'
const chartRef = ref<HTMLDivElement | null>(null)
const Data = reactive({
list: [] as any,
})
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
onMounted(() => {
const visualizationStore = useVisualizationStore()
function chatInit() {
setOptions({
grid: { left: '2%', right: '2%', top: '4%', bottom: '2%', containLabel: true },
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
tooltip: {
trigger: 'axis',
axisPointer: {
@ -29,7 +40,7 @@
},
xAxis: {
type: 'category',
data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
data: Data.list?.map((e) => e.x) ?? [],
axisTick: {
show: false,
},
@ -60,7 +71,7 @@
],
series: [
{
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
data: Data.list?.map((e) => e.y) ?? [],
type: 'bar',
label: {
show: true,
@ -82,6 +93,32 @@
},
],
})
}
async function getData() {
const { list } = await getCropYieldTotalChart({ base_id: visualizationStore.getAddresId })
const arr = [] as { x: string | number; y: string | number }[]
for (const key in list) {
if (Object.prototype.hasOwnProperty.call(list, key)) {
arr.push({
y: list[key],
x: key,
})
}
}
Data.list = arr
chatInit()
}
watch(
() => visualizationStore.getAddresId,
() => {
getData()
},
)
onMounted(() => {
getData()
})
</script>

3
src/views/visualization/components/NYQK.vue
View File

@ -147,8 +147,7 @@
for (const key in list) {
if (Object.prototype.hasOwnProperty.call(list, key)) {
arr.push({
// value: list[key],
value: parseInt(Math.random() * 100),
value: list[key],
name: key,
})
}

71
src/views/visualization/components/QXSZ.vue
View File

@ -1,5 +1,19 @@
<template>
<Box title="气象数据">
<template #right>
<div class="w-250px flex justify-end">
<a-tabs
:tabBarGutter="14"
v-model:activeKey="activeKey"
:tab-position="mode"
:style="{ height: '48px', color: 'white' }"
@tabScroll="callback"
color="red"
>
<a-tab-pane v-for="i in 10" :key="i" :tab="`Tab-${i}`" />
</a-tabs>
</div>
</template>
<div class="pl-23px py-23px">
<div class="grid grid-cols-3 gap-20px">
<div v-for="item in 6" :key="item">
@ -17,17 +31,68 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, ref } from 'vue'
import type { TabsProps } from 'ant-design-vue'
import Box from './Box.vue'
import { Tabs, TabPane } from 'ant-design-vue'
export default defineComponent({
components: {
Box,
[Tabs.name]: Tabs,
[TabPane.name]: TabPane,
},
setup() {
return {}
const mode = ref<TabsProps['tabPosition']>('top')
const activeKey = ref(1)
const callback: TabsProps['onTabScroll'] = (val) => {
console.log(val)
}
return {
mode,
callback,
activeKey,
}
},
})
</script>
<style scoped></style>
<style scoped lang="less">
::v-deep(.ant-tabs-nav) {
&::before {
border: none;
}
.ant-tabs-ink-bar {
@apply bg-[#76E9F0];
}
.ant-tabs-tab {
&:hover {
@apply text-[#76E9F0];
}
}
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
@apply text-[#76E9F0];
}
}
}
</style>
<style>
.ant-tabs-dropdown {
/* background: red; */
}
.ant-tabs-dropdown-menu {
border: 1px solid #396684;
background: rgba(28, 44, 52, 0.9);
}
.ant-tabs-dropdown-menu-item {
color: white;
}
</style>

102
src/views/visualization/components/SBYXZT.vue
View File

@ -1,17 +1,35 @@
<template>
<Box title="监控">
<Box title="设备运行状态">
<div class="h-full flex flex-col">
<div class="py-10px">
<ul class="flex items-center justify-center m-0">
<li
class="mx-11px text-white text-12px cursor-pointer"
:class="{ active: currentTab == item.key }"
@click="changeTab(item.key)"
v-for="item in tabList"
:key="item.key"
>{{ item.value }}</li
<div class="py-10px relative">
<div
class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-15px font-bold"
>
</ul>
{{ currentTabValue }}
</div>
<div
class="absolute right-18px top-1/2 transform -translate-y-1/2"
v-if="tabList.length > 1"
>
<Dropdown
overlayClassName="dropdownClass"
placement="bottomRight"
trigger="click"
:style="{ height: '300px' }"
>
<div class="cursor-pointer">
<span class="text-white text-12px">更多</span>
<DownOutlined :style="{ fontSize: '12px', color: '#FFF' }" />
</div>
<template #overlay>
<Menu @click="onMenuClick">
<menu-item v-for="item in tabList" :key="item.id">
<div>{{ item.name }}</div>
</menu-item>
</Menu>
</template>
</Dropdown>
</div>
</div>
<div class="flex-1 px-30px grid grid-cols-2 gap-y-10px gap-x-90px pb-16px">
<div class="flex items-center" v-for="item in 4" :key="item">
@ -40,46 +58,60 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
import { defineComponent, reactive, ref, onMounted, onBeforeMount, toRefs, computed } from 'vue'
import { SvgIcon } from '/@/components/Icon'
import Box from './Box.vue'
import { getAgriculturalBasic } from '/@/api/sys/other'
import { useVisualizationStore } from '/@/store/modules/visualization'
import { Dropdown, Menu } from 'ant-design-vue'
import { DownOutlined } from '@ant-design/icons-vue'
export default defineComponent({
components: {
Box,
SvgIcon,
Dropdown,
Menu,
MenuItem: Menu.Item,
DownOutlined,
},
setup() {
const tabList = reactive([
{
key: '0',
value: '基地1',
},
{
key: '1',
value: '基地2',
},
{
key: '2',
value: '基地3',
},
])
const currentTab = ref<String>('0')
const Data = reactive({
tabList: ref<any>([]),
currentTab: ref<number | string>(''),
})
const chartRef = ref<HTMLDivElement | null>(null)
const changeTab = (key: String) => {
if (currentTab.value == key) return
currentTab.value = key
const visualizationStore = useVisualizationStore()
const currentTabValue = computed(
() => Data.tabList.find((e) => e.id == Data.currentTab)?.name ?? '',
)
function onMenuClick({ key }) {
if (Data.currentTab == key) return
Data.currentTab = key
}
onMounted(() => {})
async function getDevices() {
const resData = await getAgriculturalBasic({
parent_id: visualizationStore.getAddresId,
type: 1,
})
Data.tabList = resData
if (resData.length) Data.currentTab = resData[0].id
}
onBeforeMount(() => {})
onMounted(() => {
getDevices()
})
return {
tabList,
currentTab,
...toRefs(Data),
currentTabValue,
chartRef,
changeTab,
onMenuClick,
}
},
})