提交

src/views/main/water-quality/components/LineCharts.vue

@@ -3,16 +3,17 @@
     <template #title>
       <div class="text-18px font-extrabold">{{ title }}</div>
     </template>
-    <template #extra>普润镇桔博园-设备间旁边</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
+  import dayjs from 'dayjs'
-  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue'
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { Ref, ref, watch, computed } from 'vue'
-  import echarts from '/@/utils/lib/echarts';
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     title: {
@@ -27,15 +28,34 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
+    data: {
-  const chartRef = ref<HTMLDivElement | null>(null);
+      type: Object as PropType<object>,
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      default: () => {},
-  watch(
+    },
-    () => props.loading,
+    company: {
-    () => {
+      type: String as PropType<string>,
-      if (props.loading) {
+      default: '',
-        return;
+    },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
     }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+  watch(
+    () => props.data,
+    (e) => {
+      if (e) {
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -48,7 +68,7 @@
           },
           xAxis: {
             type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -73,7 +93,7 @@
           series: [
             {
               smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
+              data: Object.values(e),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -92,12 +112,20 @@
               },
             },
           ],
-      });
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>

src/views/main/water-quality/index.vue

@@ -146,12 +146,13 @@
     Row,
     Col,
     RadioGroup,
-    RadioButton,
+    Radio,
     RangePicker,
     Button,
     message,
   } from 'ant-design-vue'
   import type { FormInstance } from 'ant-design-vue'
+  const RadioButton = Radio.Button
   const [registerDrawer, { openDrawer }] = useDrawer()
   const formRef = ref<FormInstance>()
   const formState = reactive({