111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
<template>
|
|
<Box title="监控">
|
|
<div class="h-full flex flex-col">
|
|
<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"
|
|
>
|
|
{{ 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.key">
|
|
<div>{{ item.value }}</div>
|
|
</menu-item>
|
|
</Menu>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 px-11px flex flex-col">
|
|
<div class="flex-1 border border-solid"></div>
|
|
<div class="grid grid-cols-3 gap-x-6px my-10px">
|
|
<div class="border border-solid h-66px"></div>
|
|
<div class="border border-solid h-66px"></div>
|
|
<div class="border border-solid h-66px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, ref, onBeforeMount, computed, toRefs } from 'vue'
|
|
import { DownOutlined } from '@ant-design/icons-vue'
|
|
import { Dropdown, Menu } from 'ant-design-vue'
|
|
import { getAgriculturalDeviceBasic } 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 visualizationStore = useVisualizationStore()
|
|
|
|
const Data = reactive({
|
|
tabList: ref<any>([]),
|
|
currentTab: ref<number | string>(''),
|
|
})
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const currentTabValue = computed(
|
|
() => Data.tabList.find((e) => e.id == Data.currentTab)?.name ?? '',
|
|
)
|
|
|
|
function onMenuClick({ key }) {
|
|
if (Data.currentTab == key) return
|
|
Data.currentTab = key
|
|
}
|
|
|
|
async function getTabs() {
|
|
const resData = await getAgriculturalDeviceBasic({
|
|
device_type: 1,
|
|
})
|
|
Data.tabList = resData
|
|
if (resData.length) Data.currentTab = resData[0].id
|
|
}
|
|
|
|
async function getData() {
|
|
// const resData = await getDevicesNum({
|
|
// base_id: Data.currentTab,
|
|
// })
|
|
// Object.keys(resData).map((e, index) => {
|
|
// Data.list[index].value = resData[e].slice(1)
|
|
// })
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getTabs()
|
|
getData()
|
|
})
|
|
|
|
return {
|
|
...toRefs(Data),
|
|
chartRef,
|
|
currentTabValue,
|
|
onMenuClick,
|
|
}
|
|
},
|
|
})
|
|
</script>
|