125 lines
3.8 KiB
Vue
125 lines
3.8 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.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">
|
|
<div>
|
|
<SvgIcon name="jd1-icon" :size="65" />
|
|
<div class="text-12px font-bold text-white mt-11px">AI智能监控</div>
|
|
</div>
|
|
<div class="ml-24px">
|
|
<div class="flex items-center h-22px">
|
|
<div class="w-7px h-7px bg-[#76E9F0]"></div>
|
|
<div class="ml-11px text-11px text-white">在线</div>
|
|
</div>
|
|
<div class="flex items-center h-22px">
|
|
<div class="w-7px h-7px bg-[#F7B379]"></div>
|
|
<div class="ml-11px text-11px text-white">离线</div>
|
|
</div>
|
|
<div class="flex items-center h-22px">
|
|
<div class="w-7px h-7px bg-[#EB313E]"></div>
|
|
<div class="ml-11px text-11px text-white">故障</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
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 Data = reactive({
|
|
tabList: ref<any>([]),
|
|
currentTab: ref<number | string>(''),
|
|
})
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
|
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
|
|
}
|
|
|
|
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 {
|
|
...toRefs(Data),
|
|
currentTabValue,
|
|
chartRef,
|
|
onMenuClick,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.active {
|
|
@apply font-bold text-15px text-[#76E9F0];
|
|
}
|
|
</style>
|