修改

src/api/sys/other.ts

@@ -320,3 +320,16 @@ export function getFriendLinks(params?, mode: ErrorMessageMode = 'modal') {
     },
   )
 }
+/**
+ * @description:区域详情
+ */
+export function getAgriculturalBasicDetails(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/agricultural-basic/${params}`,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/design/index.less

@@ -17,6 +17,13 @@ html {
   text-size-adjust: 100%;
 }
 
+@font-face {
+  font-family: 'pmzd';
+  src: url('../assets/fonts/pmzd.TTF');
+}
+
+
+
 html,
 body {
   width: 100%;

src/views/visualization/MapModal.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal
-    v-bind="$attrs"
+    v-bind="getBindValue"
     :bodyStyle="{ background: '#233741', color: '#fff' }"
     :width="modelWidth"
     destroyOnClose
@@ -34,83 +34,30 @@
         <span>总产值：￥??</span></div
       > -->
       <div class="bg-[#1D2D35] mt-14px p-10px">
-        <div class="grid grid-cols-4 gap-10px">
+        <div class="flex">
-          <NZW
+          <div class="grid grid-cols-2 gap-10px flex-1">{{ cropsList }} </div>
-            v-for="(item, index) in crops"
+          <div class="grid grid-cols-2 gap-10px flex-1 ml-10px">
-            :key="index"
+            <SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="280px" v-bind="$attrs" />
-            headHeight="34.5px"
-            :width="`${boxWidth}px`"
-            height="235px"
-            :title="item.name"
-            :id="item.id"
-            :chart="item.chart"
-            v-bind="$attrs"
-          />
-          <SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
             <QXSZ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
             <SZJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
             <TRJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
           </div>
         </div>
       </div>
+    </div>
   </a-modal>
 </template>
 
 <script lang="ts">
   import { Modal } from 'ant-design-vue'
-  import { defineComponent, computed, onBeforeMount, reactive, toRefs, ref } from 'vue'
+  import { defineComponent, computed, reactive, toRefs, ref, watch, unref, watchEffect } from 'vue'
-  import NZW from './components/NZW.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'
   import { useVisualizationStore } from '/@/store/modules/visualization'
-  import { getKeywordsCropsCate } from '/@/api/sys/other'
+  import { getAgriculturalBasicDetails } from '/@/api/sys/other'
-  import { chartLineColors } from './components/colors'
   const boxWidth = 400
-  // const defaultTab = ['渔业', '畜牧业', '农业', '林业']
-  const defaultTab = [
-    {
-      name: '渔业',
-      chart: {
-        serie: {
-          type: 'bar',
-          symbol: 'none',
-        },
-        colors: chartLineColors,
-      },
-    },
-    {
-      name: '畜牧业',
-      chart: {
-        serie: {
-          type: 'line',
-          symbol: 'none',
-        },
-        colors: chartLineColors,
-      },
-    },
-    {
-      name: '农业',
-      chart: {
-        serie: {
-          type: 'line',
-          symbol: 'none',
-        },
-        colors: chartLineColors,
-      },
-    },
-    {
-      name: '林业',
-      chart: {
-        serie: {
-          type: 'bar',
-          symbol: 'none',
-        },
-        colors: chartLineColors,
-      },
-    },
-  ]
   interface cropsType {
     name: string
     id: number
@@ -119,51 +66,68 @@
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
-      NZW,
       SBYXZT,
       QXSZ,
       SZJCSJ,
       TRJCSJ,
     },
     props: {
+      baseId: {
+        type: [String, Number],
+      },
+      visible: {
+        type: Boolean,
+      },
       baseData: {
         type: Object,
         default: () => {},
       },
     },
-    setup(props) {
+    setup(props, { attrs }) {
+      const modelVisible = ref(false)
       const modelWidth = computed(() => boxWidth * 4 + 78)
       const visualizationStore = useVisualizationStore()
 
       const Data = reactive({
         crops: ref<cropsType[]>([]),
       })
+      const cropsList = ref([])
 
-      const year = computed(() => visualizationStore.getYear)
+      async function getData() {
-      const baseData = computed(() => props.baseData)
+        const resData = await getAgriculturalBasicDetails(props.baseId)
-
+        cropsList.value = resData.crops
-      async function getCrops() {
-        const resData = await getKeywordsCropsCate()
-        console.log(resData)
-
-        const a = resData
-          .filter((e) => defaultTab.findIndex(({ name }) => e.name == name) >= 0)
-          .map((e, i) => Object.assign({}, e, defaultTab[i]))
-        console.log(a)
-
-        Data.crops = a
       }
 
-      onBeforeMount(() => {
+      const year = computed(() => visualizationStore.getYear)
-        getCrops()
+
+      const getBindValue = computed(() => {
+        const attr = {
+          ...attrs,
+          ...unref(props),
+          visible: unref(modelVisible),
+        }
+        return attr
       })
 
+      watchEffect(() => {
+        modelVisible.value = !!props.visible
+      })
+
+      watch(
+        () => unref(modelVisible),
+        (v) => {
+          if (v) getData()
+        },
+      )
+
       return {
+        cropsList,
+        getBindValue,
         ...toRefs(Data),
         boxWidth,
         modelWidth,
         year,
-        baseData,
+        modelVisible,
       }
     },
   })

src/views/visualization/components/BasicChart.vue

@@ -0,0 +1,27 @@
+<template>
+  <div> </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onBeforeMount } from 'vue'
+  import { getAgriculturalBasicDetails } from '/@/api/sys/other'
+
+  export default defineComponent({
+    props: {
+      baseId: {
+        type: [String, Number],
+      },
+    },
+    setup(props) {
+      async function getData() {
+        await getAgriculturalBasicDetails(props.baseId)
+      }
+      onBeforeMount(() => {
+        getData()
+      })
+      return {}
+    },
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/components/Box.vue

@@ -8,7 +8,7 @@
         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>
+        <span class="ml-10.5px text-18px font-pmzd">{{ title }}</span>
       </div>
       <div class="absolute left-100px right-100px">
         <slot name="center"> </slot>

src/views/visualization/components/CZNYCY.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-314px flex h-full flex-col">
     <div
-      class="text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+      class="font-pmzd text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >城镇农业产业情况</div
     >
     <div class="text-right text-11px leading-17px text-white mr-42px"> 单位：万 </div>

src/views/visualization/components/DXLX.vue

@@ -52,6 +52,7 @@
             data: data,
             type: 'line',
             symbol: 'none',
+            stack: 'Total',
             itemStyle: {
               color: color.itemColor,
             },

src/views/visualization/components/DZWZ.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="大宗物质">
+  <Box title="大宗物资">
     <div class="h-full flex flex-col">
       <div class="py-10px">
         <ul class="flex items-center justify-center m-0">
@@ -82,6 +82,7 @@
           obj.series.push({
             name: 'Placeholder',
             type: 'bar',
+            barGap: 0,
             stack: 'Total' + index,
             itemStyle: {
               borderColor: 'transparent',
@@ -115,8 +116,15 @@
               },
             },
             formatter: function (params) {
-              var tar = params[1]
+              const arr = []
-              return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
+              params.forEach((e, index) => {
+                if (index % 2) arr.push(e)
+              })
+              let str = ''
+              arr.forEach((e: any) => {
+                str += e.name + '<br/>' + e.seriesName + ' : ' + (e?.value ?? 0)
+              })
+              return str
             },
           },
           xAxis: {

src/views/visualization/components/JK.vue

@@ -85,8 +85,18 @@
         if (resData.length) Data.currentTab = resData[0].id
       }
 
+      async function getData() {
+        // const resData = await getDevicesNum({
+        //   base_id:  Data.currentTab,
+        // })
+        // Object.keys(resData).map((e, index) => {
+        //   Data.list[index].value = resData[e].slice(1)
+        // })
+      }
+
       onBeforeMount(() => {
         getTabs()
+        getData()
       })
 
       return {

src/views/visualization/components/NCZQS.vue

@@ -101,7 +101,7 @@
     for (const key in list) {
       if (Object.prototype.hasOwnProperty.call(list, key)) {
         arr.push({
-          y: list[key],
+          y: Number(list[key]) / 10000,
           x: key,
         })
       }

src/views/visualization/components/NYQK.vue

@@ -1,7 +1,7 @@
 <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]"
+      class="font-pmzd text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >隆昌农业产业情况</div
     >
     <div class="w-full h-250px mx-auto mt-10px" ref="chartRef"> </div>
@@ -193,11 +193,12 @@
         Data.cityData = temp
       }
 
-      const countNumber = computed(() =>
+      const countNumber = computed(
+        () =>
           Data.lyqkData.reduce((c, p) => {
             c += Number(p.value)
             return c
-        }, 0),
+          }, 0) / 10000,
       )
 
       onBeforeMount(() => {

src/views/visualization/components/NZW.vue

@@ -39,7 +39,7 @@
     },
     props: {
       id: {
-        type: Number,
+        type: [Number, String],
       },
       baseId: {
         type: [Number, String],

src/views/visualization/index.vue

@@ -1,8 +1,12 @@
 <template>
-  <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="true">
+  <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
-    <!-- <div class="overflow-y-scroll"> -->
+  <div class="overflow-y-scroll">
-    <div class="flex flex-col h-full bg-img relative">
+    <div class="flex flex-col h-full bg-img relative w-3120px h-760px">
-      <canvas class="absolute left-0 top-0 w-full h-full" ref="cavsRef" id="canv"></canvas>
+      <canvas
+        class="absolute left-0 top-0 w-full h-full overflow-hidden"
+        ref="cavsRef"
+        id="canv"
+      ></canvas>
       <div class="flex flex-col h-full w-full z-100">
         <Head />
         <div class="flex-1 flex justify-between px-20px">
@@ -47,8 +51,8 @@
       :baseId="baseId"
       :baseData="baseData"
     />
-    <!-- </div> -->
+  </div>
-  </ScaleScreen>
+  <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">

windi.config.ts

@@ -12,6 +12,9 @@ export default defineConfig({
       colors: {
         primary: primaryColor,
       },
+      fontFamily: {
+        pmzd: ['pmzd'],
+      },
       screens: {
         sm: '576px',
         md: '768px',