提交

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 { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import echarts from '/@/utils/lib/echarts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch, computed } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     title: {
@@ -27,77 +28,104 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+    company: {
+      type: String as PropType<string>,
+      default: '',
+    },
+    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.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'line',
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#d7f3f2',
-                },
-                {
-                  offset: 1,
-                  color: '#ebf9f9',
-                },
-              ]),
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
+            axisTick: {
+              show: false,
             },
-            itemStyle: {
-              color: '#5ab1ef',
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: Object.values(e),
+              type: 'line',
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#d7f3f2',
+                  },
+                  {
+                    offset: 1,
+                    color: '#ebf9f9',
+                  },
+                ]),
+              },
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          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({