lcny-admin-mobile-vue/src/pages/index/insecticidal-lamp.vue

<template>
  <view>
    <u-sticky :h5NavHeight="h5NavHeightP">
      <view class="bg-white">
        <SearchForm
          :schemas="searchFormSchema"
          @submit="handleSubmit"
        ></SearchForm>
      </view>
    </u-sticky>
    <view>
      <view
        class="bg-white my-20rpx shadow shadow-lg pb-20rpx"
        v-for="(item, i) in chatList"
        :key="i"
      >
        <div class="p-20rpx text-32rpx">
          {{ item.lable }}
        </div>
        <qiun-data-charts type="area" :opts="opts" :chartData="item.chatOpt" />
      </view>
    </view>
  </view>
</template>
<script>
import SearchForm from '@/components/search-form'
import { http } from '@/api/index.js'
import { formatDataByObject } from '@/utils/index.js'
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
const tagMenus = [
  {
    lable: '大气湿度',
    value: 'air_humidity',
    unit: '',
  },
  {
    lable: '大气气温',
    value: 'air_temperature',
    unit: '',
  },
  {
    lable: '蓄电池电压',
    value: 'battery_vol',
    unit: '',
  },
  {
    lable: '充电电压',
    value: 'charging_vol',
    unit: '',
  },
  {
    lable: '高压值',
    value: 'high_vol',
    unit: '',
  },
  {
    lable: '杀虫数',
    value: 'killed_num',
    unit: '',
  },
]

export default {
  components: {
    SearchForm,
    QiunDataCharts,
  },
  data() {
    return {
      filterParmas: {},
      searchFormSchema: [
        {
          field: 'base',
          label: '基地',
          component: 'ApiSelect',
          componentProps: ({ formActionType }) => {
            return {
              api: async (e) => {
                const { data } = await http.get(
                  '/api/agricultural-device-basic',
                  {
                    params: e,
                  }
                )
                return data.data
              },
              onOptionsChange: (options) => {
                const { setFieldsValue } = formActionType
                if (options.length) {
                  setFieldsValue({
                    base: options[0].value,
                  })
                }
              },
              labelField: 'name',
              valueField: 'id',
              params: {
                device_type: 7,
              },
            }
          },
        },
        {
          field: 'device_id',
          component: 'ApiSelect',
          label: '监控点',
          componentProps: ({ formModel, formActionType }) => {
            return {
              placeholder: '监控点',
              api: async (e) => {
                if (e.agricultural_basic == null) return []
                const { data } = await http.get(
                  `/api/agricultural-device-point/${e.agricultural_basic}`,
                  {
                    params: e,
                  }
                )
                return formatDataByObject(data.data)
              },
              onOptionsChange: (options) => {
                const { setFieldsValue } = formActionType

                if (options.length)
                  setFieldsValue({
                    device_id: options[0].value,
                  })
              },
              params: {
                device_type: 7,
                agricultural_basic: formModel.base,
              },
              labelField: 'label',
              valueField: 'value',
            }
          },
        },
        {
          field: '[start_time, end_time]',
          label: '日期',
          component: 'Calendar',
          defaultValue: [
            this.$u.timeFormat(
              new Date().getTime() - 1000 * 60 * 60 * 24 * 7,
              'yyyy-mm-dd'
            ),
            this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
          ],
          componentProps: {
            mode: 'range',
            placeholder: ['开始时间', '结束时间'],
          },
        },
      ],
      chatList: [],
      opts: {
        dataLabel: false, //显示数据
        padding: [15, 15, 15, 15],
        xAxis: {
          disableGrid: true,
          labelCount: 7,
          rotateLabel: true,
          rotateAngle: 30,
        },
        yAxis: {
          gridType: 'dash',
          data: [
            {
              min: 0,
            },
          ],
        },
        legend: {
          show: false,
        },
        extra: {
          area: {
            type: 'curve',
            opacity: 0.9,
            addLine: true,
            gradient: true,
          },
        },
      },
    }
  },
  methods: {
    handleSubmit(e) {
      this.filterParmas = e
      this.getData()
    },
    async getData() {
      this.chatList = []
      if (!this.filterParmas.device_id){
        return this.$u.toast('没有关联基地')
      }
      const { data } = await http.get('/api/monitoring-data', {
        params: this.filterParmas,
      })
      const { data: resData } = data

      const arr = []
      Object.keys(resData).forEach((key) => {
        const item = tagMenus.find((item) => item.value === key)
        if (item) {
          let res = {
            categories: Object.keys(resData[key]).map((item) => {
              return this.$u.date(item, 'yyyy-mm-dd')
            }),
            series: [
              {
                name: item.lable,
                data: Object.values(resData[key]),
              },
            ],
          }
          arr.push({
            ...item,
            chatOpt: JSON.parse(JSON.stringify(res)),
          })
        }
      })
      console.log(arr)
      this.chatList = arr
    },
  },
}
</script>