feat

src/components/custom-echart-line/index.vue

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
+import { ref, reactive, watchEffect, watch } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
@@ -66,6 +66,18 @@ export default {
       props.chartData && initCharts();
     });
 
+    watch(
+      () => props.chartData,
+      () => {
+        console.info('props.chartData变化', props.chartData);
+        props.chartData && initCharts();
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    );
+
     function hexToRGBA(hex, alpha = 1) {
       let hexCode = hex.replace('#', '');
       if (hexCode.length === 3) {

src/components/custom-scroll-title/index.vue

@@ -48,7 +48,7 @@ const props = defineProps({
       return [
         { label: '首页', value: 'home' },
         { label: '土地资源', value: 'land' },
-        { label: '投入品', value: 'inputs' },
+        { label: '投入品监管', value: 'inputs' },
         { label: '生产经营主体', value: 'entities' },
         // { label: '智慧种植监测', value: 'plant' },
         // { label: '智慧养殖监测', value: 'breed' },

src/components/customBack.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="custom-back-warp">
-    <subTop :title="topTitle" :postion="topPostion"></subTop>
+    <subTop
+      :title="topTitle"
+      :postion="topPostion"
+      :is-down="isDown"
+      :down-title="downTitle"
+      :label-field="labelField"
+      :value-field="valueField"
+      :down-width="downWidth"
+      :options="options"
+      @command="handeleCommand"
+    ></subTop>
     <div class="custom-back-content">
       <slot name="back"></slot>
     </div>
@@ -23,7 +33,47 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  options: {
+    type: Array,
+    default: () => {
+      return [
+        { label: '耿马镇', value: '42611' },
+        { label: '勐撒镇', value: '9259' },
+        { label: '勐永镇', value: '17787' },
+        { label: '孟定镇', value: '42610' },
+        { label: '勐简乡', value: '17788' },
+        { label: '贺派乡', value: '40161' },
+        { label: '四排山乡', value: '40163' },
+        { label: '大兴乡', value: '40159' },
+      ];
+    },
+  },
+  isDown: {
+    type: Boolean,
+    default: false,
+  },
+  downTitle: {
+    type: String,
+    default: '全县',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  downWidth: {
+    type: String,
+    default: '100px',
+  },
 });
+
+const emit = defineEmits(['command']);
+const handeleCommand = (data) => {
+  emit('command', data);
+};
 </script>
 <style lang="scss" scoped>
 .custom-back-warp {

src/components/subTop.vue

@@ -8,6 +8,18 @@
       class="title-top-bg"
     ></div>
     <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
+    <div v-if="isDown" class="down-list" :style="{ width: downWidth }">
+      <el-dropdown :hide-on-click="true" :style="{ width: '90%' }" trigger="click" @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentVal && currentVal[labelField] ? currentVal[labelField] : downTitle }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="down-menu">
+            <el-dropdown-item v-for="(n, index) in optionsList" :key="n[valueField]" :command="n[valueField]">{{ n[labelField] }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 <script setup>
@@ -26,24 +38,97 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  options: {
+    type: Array,
+    default: () => {
+      return [
+        { label: '耿马镇', value: '42611' },
+        { label: '勐撒镇', value: '9259' },
+        { label: '勐永镇', value: '17787' },
+        { label: '孟定镇', value: '42610' },
+        { label: '勐简乡', value: '17788' },
+        { label: '贺派乡', value: '40161' },
+        { label: '四排山乡', value: '40163' },
+        { label: '大兴乡', value: '40159' },
+      ];
+    },
+  },
+  isDown: {
+    type: Boolean,
+    default: false,
+  },
+  downTitle: {
+    type: String,
+    default: '全县',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  downWidth: {
+    type: String,
+    default: '100px',
+  },
 });
-
+const emit = defineEmits(['command']);
 let topTitle = ref('');
 let pos = ref('');
 
+let optionsList = reactive(props.options);
+let currentVal = reactive(null);
+
 watch(
-  () => (props.title, props.postion),
+  () => (props.title, props.postion, props.options),
   () => {
     topTitle.value = props.title;
     pos.value = props.postion;
+    optionsList = props.options;
   },
   {
     deep: true,
     immediate: true,
   }
 );
+
+const handleCommand = (data) => {
+  let index = optionsList.findIndex((m) => {
+    return m[props.valueField] == data;
+  });
+
+  if (index > -1) {
+    currentVal = optionsList[index];
+  }
+  // console.info('handleCommand', currentVal);
+  emit('command', currentVal);
+};
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+.down-menu {
+  background: transparent;
+}
+
+.el-dropdown-link {
+  color: $color-custom-main !important;
+  i {
+    color: $color-custom-main !important;
+  }
+}
+.el-dropdown__popper {
+  background: rgba(0, 0, 0, 0.8) !important;
+  border: 0 !important;
+}
+.el-popper__arrow::before {
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+.el-dropdown-menu__item:hover,
+.el-dropdown-menu__item:active {
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+}
 .title-top-warp {
   position: relative;
   height: 38px;
@@ -77,5 +162,22 @@ watch(
     top: 0;
     z-index: 2;
   }
+  .down-list {
+    display: inline-block;
+    position: absolute;
+    right: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    border: 1px solid $color-custom-main;
+    border-radius: 4px;
+    padding: 6px;
+    text-align: center;
+    ::v-deep() {
+      .el-dropdown {
+        display: inline-block;
+      }
+    }
+  }
 }
 </style>

src/layouts/index.vue

@@ -57,12 +57,13 @@ onMounted(() => {
     url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
   &-header {
     width: 100%;
-    height: 60px;
+    margin-bottom: 16px;
-    // margin-bottom: 60px;
   }
   &-main {
     flex: 1;
-    min-height: calc(100vh - 60px);
+    min-height: calc(100vh - 90px - 16px);
+    padding: 0 40px;
+    box-sizing: border-box;
   }
   .base-laytout-header {
     height: 90px;

src/router/modules/demo.js

@@ -20,12 +20,6 @@ export default [
         component: () => import('@/views/demo/rank.vue'),
         meta: { title: '滚动排名列表', icon: 'document' },
       },
-      // {
-      //   path: '/page',
-      //   component: () => import('@/views/demo/test.vue'),
-      //   name: 'page',
-      //   meta: { title: '测试', icon: 'document' },
-      // },
     ],
   },
 ];

src/router/modules/v2.js

@@ -5,55 +5,55 @@ export default {
   name: 'v2',
   component: Layout,
   redirect: '/v2/home',
-  meta: { title: '首页', icon: 'House' },
+  meta: { title: '首页', icon: '' },
   children: [
     // {
     //   path: '/v2/home',
     //   component: () => import('@/views/home/index.vue'),
     //   name: 'home',
-    //   meta: { title: '首页', icon: 'House' },
+    //   meta: { title: '首页', icon: '' },
     // },
     {
       path: '/v2/land',
       component: () => import('@/views/land/index.vue'),
       name: 'land',
-      meta: { title: '土地资源', icon: 'House' },
+      meta: { title: '土地资源', icon: '' },
+    },
+    {
+      path: 'inputs',
+      name: 'inputs',
+      component: () => import('@/views/inputs/index.vue'),
+      meta: { title: '投入品监管', icon: '' },
     },
-    // {
-    //   path: 'inputs',
-    //   name: 'inputs',
-    //   component: () => import('@/views/inputs/index.vue'),
-    //   hidden: true,
-    // },
     // {
     //   path: 'entities',
     //   name: 'entities',
     //   component: () => import('@/views/entities/index.vue'),
-    //   hidden: true,
+    //   meta: { title: '', icon: '' },
     // },
     // {
     //   path: 'breed',
     //   name: 'breed',
     //   component: () => import('@/views/breed/index.vue'),
-    //   hidden: true,
+    //   meta: { title: '', icon: '' },
     // },
     // {
     //   path: 'plant',
     //   name: 'plant',
     //   component: () => import('@/views/plant/index.vue'),
-    //   hidden: true,
+    //   meta: { title: '', icon: '' },
     // },
     // {
     //   path: 'trace',
     //   name: 'trace',
     //   component: () => import('@/views/trace/index.vue'),
-    //   hidden: true,
+    //   meta: { title: '', icon: '' },
     // },
     // {
     //   path: 'early',
     //   name: 'early',
     //   component: () => import('@/views/early/index.vue'),
-    //   hidden: true,
+    //   meta: { title: '', icon: '' },
     // },
   ],
 };

src/styles/global.scss

@@ -1,6 +1,6 @@
 // color
 $legacy-ie: 10;
-$color-primary: #20a0ff;
+$color-primary: #35D0C0;
 $color-success: #13ce66;
 $color-warning: #f7ba2a;
 $color-danger: #ff4949;
@@ -58,4 +58,6 @@ $color-types: (
   ),
 );
 
+$color-custom-main: #35D0C0;
+
 @import 'utils/utils';

src/styles/style.scss

@@ -5,7 +5,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  font-family: Avenir, sans-serif;
+  font-family: JinBuTi, Sans, Avenir, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #000;

src/views/inputs/index.vue

@@ -1,57 +1,55 @@
 <template>
-  <div class="data-home-index">
+  <el-row class="data-home-index">
-    <el-row style="width: 100%; height: 100%">
+    <el-col :span="6" class="left-charts">
-      <el-col :span="6" class="left-charts">
+      <div class="left-charts-item">
-        <div class="left-charts-item">
+        <customBack top-title="投入品监管体系建设" :top-postion="'left'">
-          <customBack top-title="投入品分类统计" :top-postion="'left'">
+          <template #back>
-            <template #back>
+            <inputsType></inputsType>
-              <inputsType></inputsType>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+      <div class="left-charts-item">
-        <div class="left-charts-item">
+        <customBack top-title="投入品检测监管" :top-postion="'left'">
-          <customBack top-title="投入品生产企业统计" :top-postion="'left'">
+          <template #back>
-            <template #back>
+            <inputsGmp></inputsGmp>
-              <inputsGmp></inputsGmp>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+      <div class="left-charts-item">
-        <div class="left-charts-item">
+        <customBack top-title="农资监管" :top-postion="'left'">
-          <customBack top-title="种养殖数据统计" :top-postion="'left'">
+          <template #back>
-            <template #back>
+            <landbreedCharts></landbreedCharts>
-              <landbreedCharts></landbreedCharts>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+    </el-col>
-      </el-col>
+    <el-col :span="12">
-      <el-col :span="12">
+      <centerMap></centerMap>
-        <centerMap></centerMap>
+    </el-col>
-      </el-col>
+    <el-col :span="6" class="right-charts">
-      <el-col :span="6" class="right-charts">
+      <div class="right-charts-item">
-        <div class="right-charts-item">
+        <customBack top-title="生产主体统计" :top-postion="'right'">
-          <customBack top-title="案件次数" :top-postion="'right'">
+          <template #back>
-            <template #back>
+            <casesAlerts></casesAlerts>
-              <casesAlerts></casesAlerts>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+      <div class="right-charts-item">
-        <div class="right-charts-item">
+        <customBack top-title="历年投入品规模对比" :top-postion="'right'">
-          <customBack top-title="投入品月度使用统计" :top-postion="'right'">
+          <template #back>
-            <template #back>
+            <monthlyuseCharts></monthlyuseCharts>
-              <monthlyuseCharts></monthlyuseCharts>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+      <div class="right-charts-item">
-        <div class="right-charts-item">
+        <customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
-          <customBack top-title="投入品经销商分布" :top-postion="'right'">
+          <template #back>
-            <template #back>
+            <dealerDistributionCharts></dealerDistributionCharts>
-              <dealerDistributionCharts></dealerDistributionCharts>
+          </template>
-            </template>
+        </customBack>
-          </customBack>
+      </div>
-        </div>
+    </el-col>
-      </el-col>
+  </el-row>
-    </el-row>
-  </div>
 </template>
 <script setup>
 import centerMap from '@/components/centerMap.vue';
@@ -64,6 +62,9 @@ import inputsType from './components/inputsType.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
+  width: 100%;
+  height: 100%;
+
   .left-charts {
     display: flex;
     justify-content: space-around;

src/views/land/components/landPatrol.vue

@@ -1,9 +1,34 @@
 <template>
-  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
 </template>
 <script setup>
 import { reactive } from 'vue';
-
+let dataList = reactive([
+  {
+    value: 10,
+    name: '2020',
+  },
+  {
+    value: 66,
+    name: '2021',
+  },
+  {
+    value: 100,
+    name: '2022',
+  },
+  {
+    value: 120,
+    name: '2023',
+  },
+  {
+    value: 150,
+    name: '2024',
+  },
+  {
+    value: 80,
+    name: '2025',
+  },
+]);
 const state = reactive({
   option: {
     color: ['#35D0C0'],
@@ -49,31 +74,40 @@ const state = reactive({
       // name: '',
     },
   },
-  data: [
+  data: dataList,
+});
+
+const refresData = () => {
+  console.info('landPatrol********************refresData');
+  state.data = dataList = reactive([
     {
-      value: 10,
+      value: 20,
       name: '2020',
     },
     {
-      value: 66,
+      value: 86,
       name: '2021',
     },
     {
-      value: 100,
+      value: 120,
       name: '2022',
     },
     {
-      value: 120,
+      value: 140,
       name: '2023',
     },
     {
-      value: 150,
+      value: 170,
       name: '2024',
     },
     {
-      value: 80,
+      value: 100,
       name: '2025',
     },
-  ],
+  ]);
+};
+
+defineExpose({
+  refresData,
 });
 </script>

src/views/land/index.vue

@@ -16,9 +16,29 @@
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="项目效益分析" :top-postion="'left'">
+        <customBack
+          top-title="项目效益分析"
+          :top-postion="'left'"
+          :down-title="'全县'"
+          :label-field="'label'"
+          :value-field="'value'"
+          :down-width="'100px'"
+          :options="[
+            { label: '全县', value: '530926' },
+            { label: '耿马镇', value: '42611' },
+            { label: '勐撒镇', value: '9259' },
+            { label: '勐永镇', value: '17787' },
+            { label: '孟定镇', value: '42610' },
+            { label: '勐简乡', value: '17788' },
+            { label: '贺派乡', value: '40161' },
+            { label: '四排山乡', value: '40163' },
+            { label: '大兴乡', value: '40159' },
+          ]"
+          :is-down="true"
+          @command="landPatrolCommand"
+        >
           <template #back>
-            <landPatrol></landPatrol>
+            <landPatrol ref="landPatrolRef"></landPatrol>
           </template>
         </customBack>
       </div>
@@ -61,6 +81,15 @@ import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
 import LandAera from './components/LandAera.vue';
 import cake from './components/cake.vue';
+import { nextTick, ref } from 'vue';
+
+const landPatrolRef = ref(null);
+const landPatrolCommand = (data) => {
+  console.info('landPatrolCommand', data);
+  nextTick(() => {
+    landPatrolRef.value && landPatrolRef.value.refresData();
+  });
+};
 </script>
 <style lang="scss" scoped>
 .data-home-index {