UI3/src/views/goLineData/_ViewCompany_General.vue

<script setup lang="ts">
import { ref, withDefaults, onMounted, watch } from "vue"
import moment from "moment"
import Rs from "@/core/services/RequestService"

const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
const date = ref<Array<any>>([
  [moment(new Date()).add(-6, "d").toDate(), new Date()],
  new Date(),
  [moment(new Date()).add(-6, "d").toDate(), new Date()],
  [moment(new Date()).add(-6, "d").toDate(), new Date()],
])
const titles = ref(["", "", "", ""])
const chartData = ref<any>([{}, {}, {}, {}])
const lineOptions = {
  titleText: " ",
}
function onOverDateChange(type: number) {
  queryChart(type)
}
function queryChart(type: number) {
  let url = ""
  let data: any = {}
  switch (type) {
    case 0:
      url = "sys/onlineDataCompany/getOverWarnBar"
      data = {
        id: props.id,
        start: moment(date.value[type][0]).format("YYYYMMDD"),
        end: moment(date.value[type][1]).format("YYYYMMDD"),
      }
      break
    case 1:
      url = "sys/onlineData/line"
      data = { id: props.id, getTime: moment(date.value[type]).format("YYYYMMDD"), type: "" }
      break
    case 2:
      url = "sys/onlineDataCompany/getDeviceRuntimeBar"
      data = {
        id: props.id,
        start: moment(date.value[type][0]).format("YYYYMMDD"),
        end: moment(date.value[type][1]).format("YYYYMMDD"),
      }
      break
    case 3:
      url = "sys/onlineDataCompany/getCompanyEmissionsBar"
      data = {
        id: props.id,
        start: moment(date.value[type][0]).format("YYYYMMDD"),
        end: moment(date.value[type][1]).format("YYYYMMDD"),
      }
      break
  }
  Rs.post(url, { data: data, successAlert: false }).then((res) => {
    chartData.value[type] = res.data
    titles.value[type] = res.data.chartData[0].title
  })
}
function init() {
  queryChart(0)
  queryChart(1)
  queryChart(2)
  queryChart(3)
}
watch(
  () => props.id,
  () => {
    init()
  }
)
onMounted(() => {
  init()
})
</script>
<template>
  <el-row :gutter="20" class="mb-5">
    <el-col :span="12">
      <div class="card card-bordered border-primary">
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title"><h2 class="text-primary">异常时间：</h2></div>
          <div class="card-toolbar">
            <el-date-picker
              v-model="date[0]"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="default"
              @change="
                () => {
                  onOverDateChange(0)
                }
              "
            />
          </div>
        </div>
        <div class="card-body p-3">
          <div class="text-primary">
            <span class="fw-bolder">{{ titles[0] }}：</span>
            {{ moment(date[0][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[0][1]).format("YYYY-MM-DD") }}
          </div>
          <BaseChart :data="chartData[0]" type="line" :options="lineOptions" h="230px"></BaseChart>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="card card-bordered border-primary">
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
          <div class="card-toolbar">
            <el-date-picker
              v-model="date[1]"
              type="date"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="default"
              @change="
                () => {
                  onOverDateChange(1)
                }
              "
            />
          </div>
        </div>
        <div class="card-body p-3">
          <div class="text-primary">
            <span class="fw-bolder">{{ titles[1] }}：</span>
            {{ moment(date[1]).format("YYYY-MM-DD") }}
          </div>
          <BaseChart :data="chartData[1]" type="line" :options="lineOptions" h="230px"></BaseChart>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="mb-5">
    <el-col :span="12">
      <div class="card card-bordered border-primary">
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
          <div class="card-toolbar">
            <el-date-picker
              v-model="date[2]"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="default"
              @change="
                () => {
                  onOverDateChange(2)
                }
              "
            />
          </div>
        </div>
        <div class="card-body p-3">
          <div class="text-primary">
            <span class="fw-bolder">{{ titles[2] }}：</span>
            {{ moment(date[2][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[2][1]).format("YYYY-MM-DD") }}
          </div>
          <BaseChart :data="chartData[2]" type="line" :options="lineOptions" h="230px"></BaseChart>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="card card-bordered border-primary">
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
          <div class="card-toolbar">
            <el-date-picker
              v-model="date[3]"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="default"
              @change="
                () => {
                  onOverDateChange(3)
                }
              "
            />
          </div>
        </div>
        <div class="card-body p-3">
          <div class="text-primary">
            <span class="fw-bolder">{{ titles[3] }}：</span>
            {{ moment(date[3][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[3][1]).format("YYYY-MM-DD") }}
          </div>
          <BaseChart :data="chartData[3]" type="line" :options="lineOptions" h="230px"></BaseChart>
        </div>
      </div>
    </el-col>
  </el-row>
</template>