修改

src/assets/svg/title-right.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="153px" height="15px">
+<path fill-rule="evenodd"  fill="rgb(108, 205, 218)"
+ d="M137.053,14.875 L130.339,14.875 L146.285,0.250 L152.999,0.250 L137.053,14.875 ZM111.874,14.875 L127.821,0.250 L134.535,0.250 L118.589,14.875 L111.874,14.875 ZM93.410,14.875 L109.357,0.250 L116.071,0.250 L100.125,14.875 L93.410,14.875 ZM74.946,14.875 L90.893,0.250 L97.607,0.250 L81.660,14.875 L74.946,14.875 ZM55.642,14.875 L71.589,0.250 L78.303,0.250 L62.357,14.875 L55.642,14.875 ZM37.178,14.875 L53.125,0.250 L59.839,0.250 L43.893,14.875 L37.178,14.875 ZM18.714,14.875 L34.660,0.250 L41.375,0.250 L25.428,14.875 L18.714,14.875 ZM0.250,14.875 L16.196,0.250 L22.910,0.250 L6.964,14.875 L0.250,14.875 Z"/>
+</svg>

src/views/visualization/components/Agriculture.vue

@@ -0,0 +1,155 @@
+<template>
+  <Box title="农业">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '全部',
+        },
+        {
+          key: '1',
+          value: '猪',
+        },
+        {
+          key: '2',
+          value: '牛',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        chartsInit()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: ['销售水量', '主营业务'],
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              name: '销售水量',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#00F4B9',
+              },
+              areaStyle: {
+                color: 'rgba(0, 244, 185, 0.4)',
+              },
+            },
+            {
+              name: '主营业务',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#28F2E6',
+              },
+              areaStyle: {
+                color: 'rgba(40, 242, 230, 0.4)',
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/Box.vue

@@ -1,18 +1,39 @@
 <template>
-  <div class="bg-black bg-opacity-25 p-20px">
-    <div>{{ title }}</div>
-    <div>
-      <slot></slot>
+  <div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
+    <div class="flex items-center justify-between h-49px px-14px">
+      <div
+        class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+      >
+        <span class="block w-8.5px h-8.5px rounded-full bg-[#6CCDDA]"></span>
+        <span class="ml-10.5px text-18px">{{ title }}</span>
+      </div>
+      <slot name="right">
+        <img class="w-76.5px h-7.5px" :src="HeadIcon" alt="" srcset="" />
+      </slot>
+    </div>
+    <div class="px-14px pb-14px flex-1">
+      <div class="bg-[#293E4E] bg-opacity-30 h-full">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+  import HeadIcon from '/@/assets/images/head-icon.png'
   defineProps({
     title: {
       type: String as PropType<string>,
       default: '标题',
     },
+    width: {
+      type: String as PropType<string>,
+      default: '200px',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '200px',
+    },
   })
 </script>
 

src/views/visualization/components/CZNYCY.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="w-314px">
+    <div
+      class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+      >城镇农业产业情况</div
+    >
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    setup() {
+      return {}
+    },
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/components/Fisheries.vue

@@ -1,20 +1,145 @@
 <template>
-  <Box>
-    <div>1</div>
+  <Box title="渔业">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
   </Box>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
   import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
-      return {}
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '全部',
+        },
+        {
+          key: '1',
+          value: '鱼',
+        },
+        {
+          key: '2',
+          value: '虾',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        chartsInit()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+              },
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#76E9F0',
+                  },
+                  {
+                    offset: 1,
+                    color: '#1A3537',
+                  },
+                ]),
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
     },
   })
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/Forestry.vue

@@ -0,0 +1,145 @@
+<template>
+  <Box title="林业">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '全部',
+        },
+        {
+          key: '1',
+          value: '鱼',
+        },
+        {
+          key: '2',
+          value: '虾',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        chartsInit()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+              },
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#76E9F0',
+                  },
+                  {
+                    offset: 1,
+                    color: '#1A3537',
+                  },
+                ]),
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/Head.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="text-4xl text-white flex items-center justify-center relative">
+    <div class="w-1325px h-43px mt-3.5px relative">
+      <div class="absolute left-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-end">
+        2022-10-22 10:10
+      </div>
+      <div class="absolute right-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-start">
+        <div>多云</div>
+        <div class="mx-20px">PM2.5</div>
+        <div class="flex items-center">
+          <span class="bg-[#00F500] w-2.2px h-2.2px inline-block rounded-full mr-4px"></span>
+          <span>良好</span>
+        </div>
+      </div>
+      <img class="w-full h-full" :src="headTitleImg" alt="" srcset="" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import headTitleImg from '/@/assets/images/head-title.png'
+</script>
+
+<style scoped></style>

src/views/visualization/components/Husbandry.vue

@@ -0,0 +1,156 @@
+<template>
+  <Box title="畜牧业">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '全部',
+        },
+        {
+          key: '1',
+          value: '猪',
+        },
+        {
+          key: '2',
+          value: '牛',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        chartsInit()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: ['销售水量', '主营业务'],
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              name: '销售水量',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#00F4B9',
+              },
+              areaStyle: {
+                color: 'rgba(0, 244, 185, 0.4)',
+              },
+            },
+            {
+              name: '主营业务',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#28F2E6',
+              },
+              areaStyle: {
+                color: 'rgba(40, 242, 230, 0.4)',
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/JK.vue

@@ -0,0 +1,76 @@
+<template>
+  <Box title="监控">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1 px-11px">
+        <div class="h-196px border border-solid"></div>
+        <div class="grid grid-cols-3 gap-x-6px mt-10px">
+          <div class="border border-solid h-66px"></div>
+          <div class="border border-solid h-66px"></div>
+          <div class="border border-solid h-66px"></div>
+        </div>
+      </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '基地1',
+        },
+        {
+          key: '1',
+          value: '基地2',
+        },
+        {
+          key: '2',
+          value: '基地3',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+      }
+
+      onMounted(() => {})
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/NCZQS.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="w-314px">
+    <div
+      class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
+    >
+      历年产值趋势
+    </div>
+    <div class="h-200px mt-30px" ref="chartRef"> 1 </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Ref, ref, onMounted } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+  onMounted(() => {
+    setOptions({
+      grid: { left: '2%', right: '2%', top: '4%', bottom: '2%', containLabel: true },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: '#fff',
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#8EEEFF',
+              opacity: 0.3,
+            },
+          },
+          axisLabel: {
+            color: '#fff',
+          },
+        },
+      ],
+      series: [
+        {
+          data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+          type: 'bar',
+          label: {
+            show: true,
+            position: 'top',
+            color: '#fff',
+          },
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#76E9F0',
+              },
+              {
+                offset: 1,
+                color: '#1A3537',
+              },
+            ]),
+          },
+        },
+      ],
+    })
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/components/NYQK.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="w-314px">
+    <div
+      class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+      >隆昌农业产业情况</div
+    >
+    <div class="w-200px h-200px mx-auto mt-10px" ref="chartRef"> </div>
+    <div
+      class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
+    >
+      总产值：2200202万元
+    </div>
+
+    <div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
+      <div class="flex items-center">
+        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+        <div class="text-white ml-6px">
+          <div class="text-12px font-bold">面积</div>
+          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+        <div class="text-white ml-6px">
+          <div class="text-12px font-bold">人口</div>
+          <div class="text-10px font-bold mt-4px">794.41 万人</div>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+        <div class="text-white ml-6px">
+          <div class="text-12px font-bold">镇街</div>
+          <div class="text-10px font-bold mt-4px">13个</div>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+        <div class="text-white ml-6px">
+          <div class="text-12px font-bold">耕地</div>
+          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { SvgIcon } from '/@/components/Icon'
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return
+      }
+      setOptions({
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '90%',
+            label: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+          },
+        ],
+      })
+    },
+    {
+      immediate: true,
+    },
+  )
+</script>
+
+<style scoped></style>

src/views/visualization/components/QXSZ.vue

@@ -0,0 +1,33 @@
+<template>
+  <Box title="气象数据">
+    <div class="pl-23px py-23px">
+      <div class="grid grid-cols-3 gap-20px">
+        <div v-for="item in 6" :key="item">
+          <div class="text-11px text-white">空气温度</div>
+          <div
+            class="mt-11px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+          >
+            <span class="text-18px font-bold">18.12</span>
+            <span class="text-11px ml-4px">℃</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import Box from './Box.vue'
+
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      return {}
+    },
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/components/SBYXZT.vue

@@ -0,0 +1,92 @@
+<template>
+  <Box title="监控">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1 px-30px grid grid-cols-2 gap-y-10px gap-x-90px pb-16px">
+        <div class="flex items-center" v-for="item in 4" :key="item">
+          <div>
+            <SvgIcon name="jd1-icon" :size="65" />
+            <div class="text-12px font-bold text-white mt-11px">AI智能监控</div>
+          </div>
+          <div class="ml-24px">
+            <div class="flex items-center h-22px">
+              <div class="w-7px h-7px bg-[#76E9F0]"></div>
+              <div class="ml-11px text-11px text-white">在线</div>
+            </div>
+            <div class="flex items-center h-22px">
+              <div class="w-7px h-7px bg-[#F7B379]"></div>
+              <div class="ml-11px text-11px text-white">离线</div>
+            </div>
+            <div class="flex items-center h-22px">
+              <div class="w-7px h-7px bg-[#EB313E]"></div>
+              <div class="ml-11px text-11px text-white">故障</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import { SvgIcon } from '/@/components/Icon'
+  import Box from './Box.vue'
+  export default defineComponent({
+    components: {
+      Box,
+      SvgIcon,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '基地1',
+        },
+        {
+          key: '1',
+          value: '基地2',
+        },
+        {
+          key: '2',
+          value: '基地3',
+        },
+      ])
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+      }
+
+      onMounted(() => {})
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/SZJCSJ.vue

@@ -0,0 +1,107 @@
+<template>
+  <Box title="水质监测数据">
+    <div class="h-full flex flex-col">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '6%', bottom: '2%', containLabel: true },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+              },
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#76E9F0',
+                  },
+                  {
+                    offset: 1,
+                    color: '#1A3537',
+                  },
+                ]),
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        chartRef,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/TRJCSJ.vue

@@ -0,0 +1,117 @@
+<template>
+  <Box title="土壤监测数据">
+    <div class="h-full flex flex-col">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '20%', bottom: '2%', containLabel: true },
+          legend: {
+            data: ['销售水量', '主营业务'],
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: [
+            {
+              name: '销售水量',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#00F4B9',
+              },
+              areaStyle: {
+                color: 'rgba(0, 244, 185, 0.4)',
+              },
+            },
+            {
+              name: '主营业务',
+              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
+              type: 'line',
+              symbol: 'none',
+              itemStyle: {
+                color: '#28F2E6',
+              },
+              areaStyle: {
+                color: 'rgba(40, 242, 230, 0.4)',
+              },
+            },
+          ],
+        })
+      }
+
+      onMounted(() => {
+        chartsInit()
+      })
+
+      return {
+        chartRef,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/index.vue

@@ -1,20 +1,42 @@
 <template>
-  <ScaleScreen :boxStyle="{ background: '#012248' }">
-    <div class="flex flex-col h-full border border-gray-500">
-      <div class="h-60px text-4xl text-white flex items-center justify-center">
-        隆昌农业大数据平台
-      </div>
-      <div class="bg-red-200 flex-1 flex justify-between">
-        <div>
-          <Fisheries class="w-400px" />
+  <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
+  <div class="overflow-y-scroll bg-[#020603]">
+    <div class="flex flex-col h-full w-3120px h-760px">
+      <Head />
+      <div class="flex-1 flex justify-between py-11px px-20px">
+        <div class="flex">
+          <div class="grid grid-cols-2 gap-x-16px gap-y-16px">
+            <Fisheries width="440px" height="337px" />
+            <Husbandry width="440px" height="337px" />
+            <Agriculture width="440px" height="337px" />
+            <Forestry width="440px" height="337px" />
+          </div>
+          <div class="bg-[#10272F] bg-opacity-80 ml-16px">
+            <NYQK />
+            <NCZQS class="mt-37px" />
+          </div>
         </div>
         <div class="flex-1">
-          <Map />
+          <!-- <Map /> -->
+        </div>
+        <div class="flex">
+          <div class="bg-[#10272F] bg-opacity-80">
+            <CZNYCY />
+          </div>
+          <div class="mx-16px">
+            <JK width="440px" height="379px" />
+            <SBYXZT class="mt-16px" width="440px" height="295px" />
+          </div>
+          <div class="">
+            <QXSZ width="440px" height="222px" />
+            <SZJCSJ class="mt-11px" width="440px" height="222px" />
+            <TRJCSJ class="mt-11px" width="440px" height="222px" />
+          </div>
         </div>
-        <div> 右边 </div>
       </div>
     </div>
-  </ScaleScreen>
+  </div>
+  <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">
@@ -22,11 +44,35 @@
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
   import Fisheries from './components/Fisheries.vue'
+  import Husbandry from './components/Husbandry.vue'
+  import Forestry from './components/Forestry.vue'
+  import Agriculture from './components/Agriculture.vue'
+  import Head from './components/Head.vue'
+  import NYQK from './components/NYQK.vue'
+  import NCZQS from './components/NCZQS.vue'
+  import CZNYCY from './components/CZNYCY.vue'
+  import JK from './components/JK.vue'
+  import SBYXZT from './components/SBYXZT.vue'
+  import QXSZ from './components/QXSZ.vue'
+  import SZJCSJ from './components/SZJCSJ.vue'
+  import TRJCSJ from './components/TRJCSJ.vue'
   export default defineComponent({
     components: {
       Map,
       ScaleScreen,
       Fisheries,
+      Husbandry,
+      Forestry,
+      Agriculture,
+      NYQK,
+      NCZQS,
+      CZNYCY,
+      JK,
+      SBYXZT,
+      QXSZ,
+      SZJCSJ,
+      TRJCSJ,
+      Head,
     },
     setup() {
       return {}