虫情监控
parent
1ac3644155
commit
4b02c872c7
|
|
@ -416,3 +416,16 @@ export function updateRecommend(params, mode: ErrorMessageMode = 'none') {
|
|||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:修改设备推荐状态
|
||||
*/
|
||||
export function devicePoints(type, mode: ErrorMessageMode = 'none') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: `/api/agricultural-device-points?type=${type}`,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,235 @@
|
|||
<template>
|
||||
<Box title="虫情监控" v-bind="$attrs">
|
||||
<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-14px 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.monitoring_point }}</div>
|
||||
</menu-item>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"> <div class="h-full w-full" ref="chartRef"> </div> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, onBeforeMount, toRefs, computed, Ref } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { getWormCount } from '/@/api/sys/user'
|
||||
import { devicePoints } from '/@/api/sys/other'
|
||||
import { Dropdown, Menu } from 'ant-design-vue'
|
||||
import { DownOutlined } from '@ant-design/icons-vue'
|
||||
import { useVContext } from '../useVContext'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
Dropdown,
|
||||
Menu,
|
||||
MenuItem: Menu.Item,
|
||||
DownOutlined,
|
||||
},
|
||||
props: ['baseId'],
|
||||
setup(props) {
|
||||
const { rootEmitter } = useVContext()
|
||||
console.log('===CQJC')
|
||||
console.log(props.baseId)
|
||||
|
||||
const Data = reactive({
|
||||
tabList: ref<any>([]),
|
||||
list: [],
|
||||
currentTab: ref<number | string>(''),
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const currentTabValue = computed(
|
||||
() => Data.tabList.find((e) => e.id == Data.currentTab)?.monitoring_point ?? '',
|
||||
)
|
||||
|
||||
function onMenuClick({ key, res = false }) {
|
||||
console.log(key)
|
||||
|
||||
if (Data.currentTab == key && !res) return
|
||||
Data.currentTab = key
|
||||
getData()
|
||||
}
|
||||
|
||||
async function getTabs() {
|
||||
let resData = await devicePoints('5')
|
||||
|
||||
if (!isBase.value) {
|
||||
Data.tabList = [].concat(resData)
|
||||
} else {
|
||||
Data.tabList = resData
|
||||
}
|
||||
|
||||
let defaultId = ''
|
||||
|
||||
if (Data.tabList.length) defaultId = Data.tabList[0].id
|
||||
console.log(Data.tabList)
|
||||
console.log(defaultId)
|
||||
|
||||
onMenuClick({ key: defaultId, res: true })
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
const res = await getWormCount(Data.currentTab, { device: Data.currentTab })
|
||||
const _arr = [] as any
|
||||
Object.keys(res).forEach((key) => {
|
||||
_arr.push({
|
||||
x: key,
|
||||
data: res[key],
|
||||
})
|
||||
})
|
||||
Data.list = _arr
|
||||
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
function chartsInit() {
|
||||
const xAxis = Data.list?.map(({ x }) => x)
|
||||
const data = Data.list?.map(({ data }) => data)
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
top: '16%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '1',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(166, 233, 215, 1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(72, 151, 94, 0)',
|
||||
},
|
||||
]),
|
||||
barBorderRadius: 12,
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (isBase.value) {
|
||||
getData()
|
||||
} else {
|
||||
getTabs()
|
||||
}
|
||||
|
||||
rootEmitter.on('interval:auto', () => {
|
||||
getData()
|
||||
})
|
||||
|
||||
rootEmitter.on('interval:tab', () => {
|
||||
// if (Data.tabList.length == 0) return
|
||||
// const index = timerTabIndex % Data.tabList.length
|
||||
// onMenuClick({ key: Data.tabList[index].id })
|
||||
// timerTabIndex++
|
||||
// getData()
|
||||
})
|
||||
})
|
||||
const isBase = computed(() => !!props.baseId)
|
||||
|
||||
return {
|
||||
...toRefs(Data),
|
||||
currentTabValue,
|
||||
chartRef,
|
||||
isBase,
|
||||
onMenuClick,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply font-bold text-15px text-[#76E9F0];
|
||||
}
|
||||
</style>
|
||||
|
|
@ -31,10 +31,10 @@
|
|||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 px-11px flex flex-col py-10px box-content" :class="{ 'pt-0': !isBase }">
|
||||
<div class="flex-1 flex flex-col py-0px box-content" :class="{ 'pt-0': !isBase }">
|
||||
<div class="flex-1">
|
||||
<div
|
||||
class="h-full"
|
||||
class="h-130px"
|
||||
:class="{ 'h-140px': isBase }"
|
||||
v-for="(item, index) in listBig"
|
||||
:key="index"
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-x-6px pt-10px">
|
||||
<!-- <div class="grid grid-cols-3 gap-x-6px pt-10px">
|
||||
<div class="h-66px" v-for="item in listSmall" :key="item.id">
|
||||
<VideoFlv
|
||||
@onScreen="onScreenClick"
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
:screen="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,8 +33,9 @@
|
|||
</div>
|
||||
<div class="flex">
|
||||
<div class="mr-10px">
|
||||
<JK :width="`${addW + 440}px`" height="390px" />
|
||||
<SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
|
||||
<JK :width="`${addW + 440}px`" height="204px" />
|
||||
<CQJC class="mt-10px" :width="`${addW + 440}px`" height="245px" />
|
||||
<SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="245px" />
|
||||
</div>
|
||||
<div class="">
|
||||
<QXSZ :width="`${addW + 440}px`" height="204px" />
|
||||
|
|
@ -84,6 +85,7 @@
|
|||
import SBYXZT from './components/SBYXZT.vue'
|
||||
import QXSZ from './components/QXSZ.vue'
|
||||
import SZJCSJ from './components/SZJCSJ.vue'
|
||||
import CQJC from './components/CQJC.vue'
|
||||
import TRJCSJ from './components/TRJCSJ.vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import MapModal from './MapModal.vue'
|
||||
|
|
@ -116,6 +118,7 @@
|
|||
CZNYCY,
|
||||
JK,
|
||||
SBYXZT,
|
||||
CQJC,
|
||||
QXSZ,
|
||||
SZJCSJ,
|
||||
TRJCSJ,
|
||||
|
|
|
|||
Loading…
Reference in New Issue