Forráskód Böngészése

此部分为之前提交设备历史数据查询组件(已无用),已经由DeviceHistoryEcharts实现,删除无用代码

wangkeyi 4 napja
szülő
commit
5f6ad7f67f
1 módosított fájl, 0 hozzáadás és 213 törlés
  1. 0 213
      src/components/chart/DeviceHistoryChart.vue

+ 0 - 213
src/components/chart/DeviceHistoryChart.vue

@@ -1,213 +0,0 @@
-<template>
-  <div>
-    <a-form :model="formState" layout="inline" :label-col="{ style: { width: '80px' } }"
-                    :wrapper-col="{ span: 8 }" autocomplete="off" @submit.prevent="handleQuery">
-      <a-form-item label="查询设备">
-        <a-select v-model:value="formState.selectedDeviceId" style="width: 180px">
-          <a-select-option v-for="d in deviceList" :key="d.deviceId" :value="d.deviceId">{{ d.name }}</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="分析点位">
-        <a-select v-model:value="formState.selectedValueCode" style="width: 180px">
-          <a-select-option v-for="item in valueCodeList" :key="item.valuecode" :value="item.valuecode">
-            {{ item.valuename || item.valuecode }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="开始时间">
-        <a-date-picker
-          v-model:value="formState.startTime"
-          style="width:180px"
-          show-time
-          valueFormat="YYYY-MM-DD HH:mm:ss"
-          placeholder="请选择开始时间"
-          :disabled-date="disabledStartDate"
-        />
-      </a-form-item>
-      <a-form-item label="结束时间">
-        <a-date-picker
-          v-model:value="formState.endTime"
-          style="width:180px"
-          show-time
-          valueFormat="YYYY-MM-DD HH:mm:ss"
-          placeholder="请选择结束时间"
-          :disabled-date="disabledEndDate"
-        />
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" html-type="submit">查询</a-button>
-      </a-form-item>
-    </a-form>
-    
-    <div style="margin-top: 16px;" class="wang">
-      <BarAndLine
-        :key="chartKey"
-        v-if="finalDataSource.length && finalChartsColumns.length"
-        :chartsColumnsType="chartsColumnsType"
-        :xAxisPropType="xAxisPropType"
-        :dataSource="finalDataSource"
-        :height="height"
-        :chartsColumns="finalChartsColumns"
-        :chartsType="chartsType"
-        :option="option"
-        @refresh="$emit('refresh')"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, watch, onMounted, computed, reactive } from 'vue';
-import { message } from 'ant-design-vue';
-import dayjs from 'dayjs';
-import BarAndLine from './BarAndLine.vue';
-import { getDeviceHistoryData } from '@/views/vent/monitorManager/deviceMonitor/components/device/device.api';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-
-export default defineComponent({
-  name: 'DeviceHistoryChart',
-  components: { BarAndLine },
-  props: {
-    chartsColumnsType: String,
-    xAxisPropType: String,
-    dataSource: {
-      type: Array,
-      default: () => [],
-    },
-    height: {
-      type: String,
-      default: '400px',
-    },
-    chartsColumns: {
-      type: Array,
-      default: () => [],
-    },
-    chartsType: {
-      type: String,
-      default: 'history',
-    },
-    option: {
-      type: Object,
-      default: () => ({
-        grid: { top: '20%', left: '10px', right: '5px', bottom: '10%', containLabel: true },
-        toolbox: { feature: {} },
-      }),
-    },
-  },
-  emits: ['refresh'],
-  setup(props, { emit }) {
-    // 查询表单相关
-    const deviceList = ref([
-      { deviceId: '1657545388451663016', name: '辅运平硐111' },
-    ]);
-    const valueCodeList = ref(props.chartsColumns);
-    // 用reactive统一管理表单状态
-    const formState = reactive({
-      selectedDeviceId: deviceList.value[0]?.deviceId || '',
-      selectedValueCode: valueCodeList.value[0]?.valuecode || '',
-      startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-    });
-    const chartData = ref<any[]>([]);
-    const chartColumns = ref<any[]>([]);
-    const isQueried = ref(false);
-    // 图表key,用于查询后强制刷新图表
-    const chartKey = ref(0);
-
-    function disabledStartDate(current: any) {
-      if (!formState.endTime) return false;
-      return current && current.valueOf() > dayjs(formState.endTime).valueOf();
-    }
-    function disabledEndDate(current: any) {
-      if (!formState.startTime) return false;
-      return current && current.valueOf() < dayjs(formState.startTime).valueOf();
-    }
-
-    watch(() => formState.selectedDeviceId, (newVal) => {
-      if (!newVal) return;
-      chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart');
-    });
-
-    onMounted(() => {
-      chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart');
-    });
-
-    async function handleQuery() {
-      if (!formState.selectedDeviceId || !formState.selectedValueCode) {
-        message.warning('请选择设备和分析点位');
-        return;
-      }
-      try {
-        const res = await getDeviceHistoryData({
-          deviceId: formState.selectedDeviceId,
-          valueCode: formState.selectedValueCode,
-          startTime: formState.startTime,
-          endTime: formState.endTime,
-        });
-        if (res && Array.isArray(res.list)) {
-          chartData.value = res.list.map(item => ({
-            ...item,
-            [formState.selectedValueCode]: Number(item.val),
-          }));
-          chartColumns.value = getTableHeaderColumns(formState.selectedDeviceId + '_chart');
-          isQueried.value = true;
-          // 查询成功后更新key,强制刷新图表
-          chartKey.value += 1;
-        } else {
-          chartData.value = [];
-          chartColumns.value = [];
-          isQueried.value = true;
-          message.info('未查询到数据');
-        }
-      } catch (e) {
-        chartData.value = [];
-        chartColumns.value = [];
-        isQueried.value = true;
-        message.error('查询失败');
-      }
-    }
-
-    // 只要查询过就用查询数据,否则用外部props
-    const finalDataSource = computed(() => {
-      return isQueried.value ? chartData.value : props.dataSource;
-    });
-    
-    const finalChartsColumns = computed(() => {
-      return isQueried.value ? chartColumns.value : props.chartsColumns;
-    });
-
-    return {
-      deviceList,
-      valueCodeList,
-      formState,
-      chartData,
-      chartColumns,
-      handleQuery,
-      finalDataSource,
-      finalChartsColumns,
-      chartsColumnsType: props.chartsColumnsType,
-      xAxisPropType: props.xAxisPropType,
-      height: props.height,
-      chartsType: props.chartsType,
-      option: props.option,
-      disabledStartDate,
-      disabledEndDate,
-      chartKey,
-    };
-  },
-});
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.zxm-form-item {
-  margin-right: 26px ;
-  ::v-deep .zxm-form-item-label {
-    color: #fff;
-    > label {
-      color: #fff;
-    }
-  }
-}
-
-</style>