虫情监控

src/api/sys/other.ts

@@ -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,
+    },
+  )
+}

src/views/visualization/components/CQJC.vue

@@ -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>

src/views/visualization/components/JK.vue

@@ -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>
 

src/views/visualization/index.vue

@@ -33,8 +33,9 @@
           </div>
           <div class="flex">
             <div class="mr-10px">
-              <JK :width="`${addW + 440}px`" height="390px" />
+              <JK :width="`${addW + 440}px`" height="204px" />
-              <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
+              <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,