智慧养殖

main/src/components/custom-echart-pictorial-bar/index.vue

@@ -103,7 +103,6 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      option.series[0].data = props.chartData;
       setOptions(option);
       resize();
       getInstance()?.off('click', onClick);

sub-government-screen-service/src/views/breed/components/InventoryCharts.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="inventory-charts">
+    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+const legendData = reactive(['猪', '牛', '羊', '鸡', '其他']);
+let dataItem = reactive([100, 90, 200, 250, 240, 275, 120, 300, 320, 270, 290, 120]);
+let colors = reactive({
+  猪: '#3685fe',
+  牛: '#41b879',
+  羊: '#ffd500',
+  鸡: '#e57373',
+  其他: '#46b1db',
+});
+let colorBg = reactive({
+  猪: [
+    { offset: 0, color: 'rgba(54,161,255,0.6)' },
+    { offset: 1, color: 'rgba(25,104,255,0)' },
+  ],
+  牛: [
+    { offset: 0, color: 'rgba(0,255,0,0.6)' },
+    { offset: 1, color: 'rgba(25,104,255,0)' },
+  ],
+  羊: [
+    { offset: 0, color: 'rgba(255,213,0,0.6)' },
+    { offset: 1, color: 'rgba(25,104,255,0)' },
+  ],
+  鸡: [
+    { offset: 0, color: 'rgba(299,155,155,0.6)' },
+    { offset: 1, color: 'rgba(25,104,255,0)' },
+  ],
+  其他: [
+    { offset: 0, color: 'rgba(0,255,0,0.6)' },
+    { offset: 1, color: 'rgba(70,177,219,0)' },
+  ],
+});
+
+const currentMonth = ref(new Date().getMonth() + 1);
+const yAxisData = computed(() => {
+  let list = [];
+  for (let i = 1; i < 13; i++) {
+    let mouth = i < 10 ? i : i;
+    list.push(mouth + '月');
+  }
+  return list;
+});
+
+let seriesItem = reactive({
+  type: 'line',
+  stack: 'Total',
+  symbol: 'none',
+  smooth: true,
+});
+
+let seriesData = computed(() => {
+  let list = [];
+  if (legendData.length && legendData.length > 0) {
+    legendData.forEach((m) => {
+      let val = {
+        ...seriesItem,
+        name: m,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: colorBg[m],
+            global: false, // 缺省为 false
+          },
+        },
+        lineStyle: {
+          color: colors[m],
+          width: 1,
+          type: 'solid',
+        },
+        data: dataItem,
+      };
+
+      list.push(val);
+    });
+  }
+  return list;
+});
+const chartsData = reactive({
+  option: {
+    backgroundColor: 'transparent',
+    grid: {
+      left: '3%',
+      right: '15%',
+      bottom: '1%',
+      top: '3%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      textStyle: {
+        color: '#fff',
+        fontSize: 10,
+      },
+      confine: true, // 超出范围
+      backgroundColor: 'rgba(17,95,182,0.5)', //设置背景颜色
+      formatter: function (item) {
+        let params = [...item];
+        var res = params[0].name + '<br/>';
+        for (var i = 0, l = params.length; i < l; i++) {
+          res += params[i].value !== '-' ? params[i].marker + params[i].seriesName + ' : ' + params[i].value + ' <br/>' : '';
+        }
+        return res;
+      },
+    },
+    legend: {
+      show: true,
+      data: Array.from(legendData),
+      right: '0', // 距离左侧10%的位置
+      top: 'middle', // 垂直居中
+      orient: 'vertical', // 图例垂直排列
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#94A7BD', //轴线和单位颜色
+        },
+      },
+      data: yAxisData,
+    },
+    yAxis: {
+      type: 'value',
+      name: ' ',
+      nameTextStyle: {
+        fontSize: 14,
+        color: '#94A7BD',
+        padding: [0, 0, 0, -45],
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#94A7BD', //轴线和单位颜色
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#182D46',
+          type: [2, 3],
+          dashOffset: 2,
+        },
+      },
+    },
+    series: seriesData.value,
+  },
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.inventory-charts {
+  height: 100%;
+  width: 100%;
+}
+</style>

sub-government-screen-service/src/views/breed/components/benefitCharts.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="benefit-charts">
+    <custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+let itemStyle = reactive({
+  itemStyle: { borderRadius: [8, 8, 0, 0] },
+});
+
+let legendList = reactive(['成本', '收入', '繁殖率', '配种成功率']);
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#8dcbe9', '#ffd500', '#631f9f'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      show: true,
+      data: legendList,
+      left: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    barStyle: {
+      barWidth: 10,
+    },
+    dataZoom: [
+      // {
+      //   type: 'slider', // 滑动条型数据区域缩放组件
+      //   startValue: 0, // 数据窗口起始值的索引
+      //   endValue: 2, // 数据窗口结束值的索引
+      // },
+      // {
+      //   type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
+      //   startValue: 0,
+      //   endValue: 2,
+      // },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: ' ',
+        axisLabel: {
+          formatter: '{value}',
+        },
+        splitLine: {
+          show: true, // 显示分割线
+          lineStyle: {
+            type: 'dashed', // 设置为虚线
+            width: 0.5, // 分割线宽度
+          },
+        },
+
+        itemStyle: { fontSize: 8 },
+      },
+    ],
+    grid: {
+      x: '10%',
+      x2: '10%',
+      y: '20%',
+      y2: '20%',
+    },
+  },
+  valData: [],
+});
+
+const randomVal = (num) => {
+  let list = [];
+  for (let i = 0; i < legendList.length; i++) {
+    let addNum = [10, 8, 2, 5];
+    let val = {
+      name: num + '月',
+      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
+      seriesType: i < legendList.length - 2 ? 'bar' : 'line',
+      type: legendList[i],
+      stack: num + '月',
+    };
+    if (val.seriesType == 'line') {
+      val.smooth = 30;
+      val.symbol = 'none';
+    }
+    let lastVal = {
+      ...val,
+      ...itemStyle,
+    };
+    list[i] = i < legendList.length - 3 ? val : lastVal;
+  }
+  return list;
+};
+let handelData = computed(() => {
+  let list = [];
+  let maxMouth = 12;
+  for (let i = 0; i < maxMouth; i++) {
+    let val = randomVal(i + 1);
+    list = [...list, ...val];
+  }
+
+  list.map((m, indexm) => {
+    return { ...m, value: Number(Number(m.value) + Math.random() + indexm).toFixed(0) };
+  });
+  // console.info('handelData', list);
+  return list;
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.benefit-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/breed/components/deviceCharts.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="demo device-charts" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="item.status == 1 ? 'td-title' : 'td-warn'" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                <span v-if="b != 'status'">
+                  {{ item[b] }}
+                </span>
+                <el-icon v-else>
+                  <Bell></Bell>
+                </el-icon>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { num: '投喂机', duration: '3.7h', status: 1 },
+  { num: '喂水机', duration: '10.0h', status: 1 },
+  { num: '投喂机', duration: '6.4h', status: 1 },
+  { num: '喂水机', duration: '3.9h', status: 1 },
+  { num: '投喂机', duration: '3.6h', status: 0 },
+  { num: '喂水机', duration: '4.5h', status: 1 },
+  { num: '投喂机', duration: '5.6h', status: 1 },
+]);
+
+const listKeys = reactive(['num', 'status', 'duration']);
+const listKeysHeader = reactive({
+  num: '设备编号',
+  status: '设备状态',
+  duration: '设备今日运行时长',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.device-charts {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6beff9 !important;
+      }
+
+      &.td-warn {
+        color: red !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>

sub-government-screen-service/src/views/breed/components/environment.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="plant-environment-warp">
+    <div class="data-item-row">
+      <div
+        v-for="(n, index) in datalist"
+        :key="index"
+        :style="{
+          'background-image': 'url(' + getAssetsFile('images/plant/bg3.png') + ')',
+          width: 'calc((100% - 30px) /' + datalist.length + ')',
+        }"
+        class="data-item"
+      >
+        <div class="data-warp">
+          <div class="data-pos">
+            <div class="data-pos-center">
+              <div class="pos-center">
+                <span class="label">{{ n.label }}</span>
+                <div class="value">
+                  <span>{{ n.value }}</span>
+                  <span class="unit">{{ n.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="small-bg">
+            <img :src="getAssetsFile('images/plant/bg6.png')" />
+            <img :src="getAssetsFile('images/plant/' + n.icon)" class="img-icon" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+
+const router = useRouter();
+const props = defineProps({
+  title: {
+    type: String,
+    default: '统计分析',
+  },
+  postion: {
+    type: String,
+    default: 'left',
+  },
+});
+
+let topTitle = ref('');
+let pos = ref('');
+
+const datalist = reactive([
+  { label: '空气温度', value: 28.6, unit: '℃', icon: 'icon4.png' },
+  { label: '空气湿度', value: 30, unit: '%', icon: 'icon3.png' },
+  { label: '光照强度', value: 1000, unit: 'lux', icon: 'icon1.png' },
+  { label: '降水量', value: 100, unit: 'mm', icon: 'icon2.png' },
+]);
+
+onMounted(() => {
+  if (datalist.length) {
+    datalist.forEach((m, index) => {
+      let num = 0;
+      switch (index) {
+        case 0:
+          num = 20;
+          break;
+        case 1:
+          num = 30;
+          break;
+        case 2:
+          num = 1000;
+          break;
+        case 3:
+          num = 100;
+          break;
+        default:
+          num = 10;
+          break;
+      }
+
+      m.value = (Math.random() + num).toFixed(2);
+    });
+  }
+});
+
+watch(
+  () => (props.title, props.postion),
+  () => {
+    topTitle.value = props.title;
+    pos.value = props.postion;
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+<style lang="scss" scoped>
+.plant-environment-warp {
+  height: 100%;
+  width: 100%;
+  .data-item-row {
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .data-item {
+    height: 100%;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .data-warp {
+    padding: 8px 0;
+    text-align: center;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    .small-bg,
+    .data-pos {
+      display: inline-flex;
+      vertical-align: middle;
+      .data-pos-center {
+        display: inline-flex;
+        justify-content: space-around;
+        flex-direction: column;
+        height: 100%;
+        .pos-center {
+        }
+      }
+    }
+    .small-bg {
+      width: 38px;
+      height: 38px;
+      position: relative;
+      margin-top: 10%;
+      .img-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 38%;
+        height: 38%;
+      }
+    }
+    .data-pos {
+      width: calc(100% - 54px);
+      .label,
+      .value {
+        display: inline-block;
+        width: 100%;
+      }
+      .label {
+        color: #fff;
+        font-size: 13px;
+      }
+      .value {
+        color: #6beff9;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 6px;
+      }
+      .unit {
+        font-size: 10px;
+      }
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/breed/components/growthIndexesCharts.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="growth-indexes-charts">
+    <custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+let itemStyle = reactive({
+  itemStyle: { borderRadius: [8, 8, 0, 0] },
+});
+
+let legendList = reactive(['猪', '牛', '羊', '鸡', '其他']);
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      show: true,
+      data: legendList,
+      left: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    barStyle: {
+      barWidth: 10,
+    },
+    dataZoom: [
+      // {
+      //   type: 'slider', // 滑动条型数据区域缩放组件
+      //   startValue: 0, // 数据窗口起始值的索引
+      //   endValue: 2, // 数据窗口结束值的索引
+      // },
+      // {
+      //   type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
+      //   startValue: 0,
+      //   endValue: 2,
+      // },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: ' ',
+        axisLabel: {
+          formatter: '{value}',
+        },
+        splitLine: {
+          show: true, // 显示分割线
+          lineStyle: {
+            type: 'dashed', // 设置为虚线
+            width: 0.5, // 分割线宽度
+          },
+        },
+
+        itemStyle: { fontSize: 8 },
+      },
+    ],
+    grid: {
+      x: '10%',
+      x2: '10%',
+      y: '20%',
+      y2: '20%',
+    },
+  },
+  valData: [],
+});
+
+const randomVal = (num) => {
+  let list = [];
+  for (let i = 0; i < legendList.length; i++) {
+    let addNum = [10, 8, 2, 5];
+    let val = {
+      name: num + '月',
+      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
+      seriesType: 'bar',
+      type: legendList[i],
+      stack: num + '月',
+    };
+    let lastVal = {
+      ...val,
+      ...itemStyle,
+    };
+    list[i] = i < legendList.length - 1 ? val : lastVal;
+  }
+  return list;
+};
+let handelData = computed(() => {
+  let list = [];
+  let maxMouth = 12;
+  for (let i = 0; i < maxMouth; i++) {
+    let val = randomVal(i + 1);
+    list = [...list, ...val];
+  }
+
+  list.map((m, indexm) => {
+    return { ...m, value: Number(Number(m.value) + Math.random() + indexm).toFixed(0) };
+  });
+  // console.info('handelData', list);
+  return list;
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.growth-indexes-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/breed/components/healthStatusCharts.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="demo health-status-charts" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="item.status == 1 ? 'td-title' : 'td-warn'" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                <span v-if="b != 'status'">
+                  {{ item[b] }}
+                </span>
+                <el-icon v-else>
+                  <Bell></Bell>
+                </el-icon>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { diseaseType: '瘟疫', incidenceRate: '23%', coverage: '84%', status: 1 },
+  { diseaseType: '蓝耳病', incidenceRate: '19%', coverage: '88%', status: 1 },
+  { diseaseType: '口蹄疫', incidenceRate: '45%', coverage: '68%', status: 1 },
+  { diseaseType: '链球病菌', incidenceRate: '35%', coverage: '88%', status: 1 },
+  { diseaseType: '炎症', incidenceRate: '8%', coverage: '98%', status: 1 },
+  { diseaseType: '寄生虫', incidenceRate: '11%', coverage: '99%', status: 1 },
+]);
+
+const listKeys = reactive(['diseaseType', 'incidenceRate', 'coverage', 'status']);
+const listKeysHeader = reactive({
+  diseaseType: '疾病种类',
+  incidenceRate: '发病率',
+  coverage: '疫苗接种率',
+  status: '预警',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.health-status-charts {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6beff9 !important;
+      }
+
+      &.td-warn {
+        color: red !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>

sub-government-screen-service/src/views/breed/components/irrigationCharts.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="irrigation-charts">
+    <div class="charts-content">
+      <div class="water-droplet-bg" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg5.png') + ')' }">
+        <div class="water-droplet">
+          <custom-echart-water-droplet height="100%" :option="option" />
+        </div>
+      </div>
+      <div class="water-droplet-warp">
+        <template v-for="(n, index) in itemlist" :key="index">
+          <div class="water-droplet-item" :style="{ height: 'calc((100% - 20px) / ' + itemlist.length + ')' }">
+            <div class="title" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg1) + ')' }">
+              <div class="title-val" :style="{ color: n.color }">{{ n.title }}</div>
+            </div>
+            <div class="tips" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg2) + ')' }">
+              <span class="tips-val">{{ n.tips }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+let percent = ref(0.6);
+let itemlist = reactive([
+  { title: '智能喂水', bg1: 'images/plant/bg8.png', bg2: 'images/plant/bg7.png', tips: '去喂水', color: '#4a90e2ff' },
+  { title: '智能投喂', bg1: 'images/plant/bg9.png', bg2: 'images/plant/bg7.png', tips: '去投喂', color: '#50e3c2ff' },
+]);
+const option = reactive({
+  backgroundColor: 'transparent', //背景色
+  series: [
+    {
+      name: '预估量',
+      type: 'liquidFill',
+      radius: '80%',
+      center: ['50%', '50%'],
+      backgroundStyle: {
+        color: 'transparent',
+      },
+      data: [percent.value, percent.value],
+      amplitude: 12, //水波振幅
+      label: {
+        //标签设置
+        position: ['50%', '45%'],
+        formatter: percent.value * 100 + '%', //显示文本,
+        textStyle: {
+          fontSize: '20px', //文本字号,
+          color: '#fff',
+        },
+      },
+      outline: {
+        borderDistance: 3,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: {
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(255, 255, 255, 0.8)',
+              },
+              {
+                offset: 0.6,
+                color: 'rgba(255, 255, 255, 0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 255, 255, 0.8)',
+              },
+            ],
+            globalCoord: false,
+          },
+        },
+      },
+      itemStyle: {
+        color: {
+          type: 'linear', // 线性渐变
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#45bfe9' },
+            { offset: 1, color: '#01589c' },
+          ],
+          global: false, // 默认为 false
+        },
+      },
+    },
+  ],
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.irrigation-charts {
+  height: 100%;
+  .charts-content {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    .water-droplet-bg {
+      display: inline-block;
+      width: 40%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+      position: relative;
+      .water-droplet {
+        position: absolute;
+        left: 50%;
+        top: 10%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .water-droplet-warp {
+      width: 60%;
+      padding: 0 10px;
+      display: inline-flex;
+      vertical-align: middle;
+      flex-direction: column;
+      .water-droplet-item {
+        width: 100%;
+      }
+      .title,
+      .tips {
+        display: inline-block;
+        color: #fff;
+        vertical-align: top;
+        .tips-val {
+          display: inline-flex;
+          line-height: 42px;
+          text-align: center;
+          font-size: 14px;
+          font-weight: bold;
+          transform: skewX(-13deg) translateY(-50%);
+          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+          -webkit-background-clip: text;
+          color: #fff;
+          letter-spacing: 2px;
+          text-shadow: -6px 0 0 1px #add8f1;
+          position: absolute;
+          left: 0;
+          top: 50%;
+        }
+      }
+      .title {
+        width: 40%;
+        height: 100%;
+        background-size: contain;
+        background-position: left bottom;
+        background-repeat: no-repeat;
+        .title-val {
+          width: 100%;
+          text-align: center;
+          line-height: 32px;
+        }
+      }
+      .tips {
+        width: 60%;
+        height: 100%;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: left center;
+        position: relative;
+      }
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/breed/components/monitoringScreen.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="monitoring-screen-warp">
+    <div class="monitoring-screen-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg2.png') + ')' }"></div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+</script>
+<style lang="scss" scoped>
+.monitoring-screen-warp {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  .monitoring-screen-content {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0;
+    div {
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/breed/components/noticeBar.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="notice-bar-warp" :style="{ height: height }">
+    <div class="notice-bar-pos">
+      <div class="notice-icon">
+        <img :src="getAssetsFile('images/plant/icon5.png')" />
+      </div>
+      <div class="notice-bar" :style="{ 'line-height': height }">
+        <div class="scrolling-text">
+          <span>{{ text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted } from 'vue';
+defineProps({
+  text: {
+    type: String,
+    required: true,
+    default: '这是一条滚动通知消息，请注意查看！',
+  },
+  height: {
+    type: String || Number,
+    default: '40px',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.notice-bar-warp {
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  .notice-bar-pos {
+    display: inline-flex;
+    width: 100%;
+  }
+  .notice-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 30px;
+    img {
+      width: 80%;
+      height: 80%;
+      margin: 10% 0;
+    }
+  }
+}
+.notice-bar {
+  display: inline-block;
+  overflow: hidden;
+  width: calc(100% - 30px);
+}
+
+.scrolling-text {
+  white-space: nowrap;
+  animation: scroll-left 10s linear infinite;
+  color: #fff;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>

sub-government-screen-service/src/views/breed/components/plantgs.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="plant-gs-warp">
+    <div class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }"></div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+</script>
+<style lang="scss" scoped>
+.plant-gs-warp {
+  height: 100%;
+  padding: 10px 0;
+  width: 100%;
+  box-sizing: border-box;
+  .plant-gs-content {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

sub-government-screen-service/src/views/breed/components/waterIntakeCharts.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="water-intake-charts">
+    <custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+let itemStyle = reactive({
+  itemStyle: { borderRadius: [8, 8, 0, 0] },
+});
+
+let legendList = reactive(['饮水量', '饲料量']);
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      show: true,
+      data: legendList,
+      left: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    barStyle: {
+      barWidth: 10,
+    },
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条型数据区域缩放组件
+        startValue: 0, // 数据窗口起始值的索引
+        endValue: 5, // 数据窗口结束值的索引
+      },
+      {
+        type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
+        startValue: 0,
+        endValue: 5,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: ' ',
+        axisLabel: {
+          formatter: '{value}',
+        },
+        splitLine: {
+          show: true, // 显示分割线
+          lineStyle: {
+            type: 'dashed', // 设置为虚线
+            width: 0.5, // 分割线宽度
+          },
+        },
+
+        itemStyle: { fontSize: 8 },
+      },
+    ],
+    grid: {
+      x: '10%',
+      x2: '15%',
+      y: '20%',
+      y2: '20%',
+    },
+  },
+  valData: [],
+});
+
+const randomVal = (num) => {
+  let list = [];
+  for (let i = 0; i < legendList.length; i++) {
+    let addNum = [10, 8, 2, 5];
+    let val = {
+      name: num + '月',
+      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
+      seriesType: 'bar',
+      type: legendList[i],
+      ...itemStyle,
+    };
+    list[i] = val;
+  }
+  return list;
+};
+let handelData = computed(() => {
+  let list = [];
+  let maxMouth = 12;
+  for (let i = 0; i < maxMouth; i++) {
+    let val = randomVal(i + 1);
+    list = [...list, ...val];
+  }
+
+  list.map((m) => {
+    return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
+  });
+  // console.info('handelData', list);
+  return list;
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.water-intake-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/breed/index.vue

@@ -4,15 +4,79 @@
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
-            <div class="left-charts-item"></div>
+            <div class="left-charts-item">
-            <div class="left-charts-item"></div>
+              <customBack top-title="存栏数据分析" :top-postion="'left'">
-            <div class="left-charts-item"></div>
+                <template #back>
+                  <InventoryCharts></InventoryCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="饲料与饮水量监测" :top-postion="'left'">
+                <template #back>
+                  <waterIntakeCharts></waterIntakeCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="生长指标监测" :top-postion="'left'">
+                <template #back>
+                  <growthIndexesCharts></growthIndexesCharts>
+                </template>
+              </customBack>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <el-row style="height: 67%">
+              <el-col :span="24" class="center-top">
+                <div class="notice">
+                  <noticeBar :height="'40px'"></noticeBar>
+                </div>
+                <div class="top">
+                  <environment></environment>
+                </div>
+                <div class="map-gis">
+                  <plantgs></plantgs>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row style="height: 33%" :gutter="30">
+              <el-col :span="12" style="height: 100%">
+                <customBack top-title="健康状况指标" :top-postion="'left'">
+                  <template #back>
+                    <healthStatusCharts></healthStatusCharts>
+                  </template>
+                </customBack>
+              </el-col>
+              <el-col :span="12" style="height: 100%">
+                <customBack top-title="智慧投喂控制" :top-postion="'right'">
+                  <template #back>
+                    <irrigationCharts></irrigationCharts>
+                  </template>
+                </customBack>
+              </el-col>
+            </el-row>
           </el-col>
-          <el-col :span="12"></el-col>
           <el-col :span="6" class="right-charts">
-            <div class="right-charts-item"></div>
+            <div class="right-charts-item">
-            <div class="right-charts-item"></div>
+              <customBack top-title="智慧监控" :top-postion="'right'">
-            <div class="right-charts-item"></div>
+                <template #back>
+                  <monitoringScreen></monitoringScreen>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="生产性能与效益数额" :top-postion="'right'">
+                <template #back>
+                  <benefitCharts></benefitCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="设备数据统计" :top-postion="'right'">
+                <template #back> </template>
+              </customBack>
+            </div>
           </el-col>
         </el-row>
       </template>
@@ -21,6 +85,17 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
+import customBack from '@/components/customBack.vue';
+import InventoryCharts from './components/InventoryCharts.vue';
+import waterIntakeCharts from './components/waterIntakeCharts.vue';
+import growthIndexesCharts from './components/growthIndexesCharts.vue';
+import environment from './components/environment.vue';
+import plantgs from './components/plantgs.vue';
+import noticeBar from './components/noticeBar.vue';
+import irrigationCharts from './components/irrigationCharts.vue';
+import healthStatusCharts from './components/healthStatusCharts.vue';
+import monitoringScreen from './components/monitoringScreen.vue';
+import benefitCharts from './components/benefitCharts.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
@@ -33,6 +108,7 @@ import baseBg from '@/components/baseBg.vue';
   }
   .left-charts-item {
     width: 100%;
+    height: calc((100% - 30px) / 3);
   }
 
   .right-charts {
@@ -46,5 +122,24 @@ import baseBg from '@/components/baseBg.vue';
     width: 100%;
     height: calc((100% - 30px) / 3);
   }
+
+  .center-top {
+    padding: 16px;
+    .notice,
+    .top,
+    .map-gis {
+      display: inline-block;
+      width: 100%;
+    }
+    .notice {
+      height: 40px;
+    }
+    .top {
+      height: 80px;
+    }
+    .map-gis {
+      height: calc(100% - 140px);
+    }
+  }
 }
 </style>

sub-government-screen-service/src/views/land/components/landuseCharts.vue

@@ -5,6 +5,17 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
+let seriesData = reactive([
+  { value: 205.6 },
+  { value: 308.7 },
+  { value: 359.6 },
+  { value: 452.6 },
+  { value: 388.9 },
+  { value: 508.7 },
+  { value: 369.5 },
+  { value: 610.8 },
+  { value: 754.3 },
+]);
 
 const chartsData = reactive({
   option: {
@@ -53,18 +64,46 @@ const chartsData = reactive({
         },
       },
     },
+    series: [
+      {
+        type: 'pictorialBar',
+        barCategoryGap: '40%',
+        barWidth: '100%',
+        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+        data: seriesData,
+        labelLine: { show: true },
+        z: 10,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#000001', // 起始颜色
+              },
+              {
+                offset: 1,
+                color: '#0175b6', // 结束颜色
+              },
+            ],
+            global: false, // 默认为 false
+          },
+        },
+        label: {
+          show: false,
+          position: 'top',
+          formatter: '{c}',
+          color: 'white',
+          fontSize: 14,
+        },
+      },
+    ],
   },
-  valData: [
+  valData: seriesData,
-    { value: 205.6 },
-    { value: 308.7 },
-    { value: 359.6 },
-    { value: 452.6 },
-    { value: 388.9 },
-    { value: 508.7 },
-    { value: 369.5 },
-    { value: 610.8 },
-    { value: 754.3 },
-  ],
 });
 </script>
 <style lang="scss" scoped>

sub-government-screen-service/src/views/plant/components/environment.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="plant-environment-warp">
+    <div class="data-item-row">
+      <div
+        v-for="(n, index) in datalist"
+        :key="index"
+        :style="{
+          'background-image': 'url(' + getAssetsFile('images/plant/bg3.png') + ')',
+          width: 'calc((100% - 30px) /' + datalist.length + ')',
+        }"
+        class="data-item"
+      >
+        <div class="data-warp">
+          <div class="data-pos">
+            <div class="data-pos-center">
+              <div class="pos-center">
+                <span class="label">{{ n.label }}</span>
+                <div class="value">
+                  <span>{{ n.value }}</span>
+                  <span class="unit">{{ n.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="small-bg">
+            <img :src="getAssetsFile('images/plant/bg6.png')" />
+            <img :src="getAssetsFile('images/plant/' + n.icon)" class="img-icon" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+
+const router = useRouter();
+const props = defineProps({
+  title: {
+    type: String,
+    default: '统计分析',
+  },
+  postion: {
+    type: String,
+    default: 'left',
+  },
+});
+
+let topTitle = ref('');
+let pos = ref('');
+
+const datalist = reactive([
+  { label: '空气温度', value: 28.6, unit: '℃', icon: 'icon4.png' },
+  { label: '空气湿度', value: 30, unit: '%', icon: 'icon3.png' },
+  { label: '光照强度', value: 1000, unit: 'lux', icon: 'icon1.png' },
+  { label: '降水量', value: 100, unit: 'mm', icon: 'icon2.png' },
+]);
+
+onMounted(() => {
+  if (datalist.length) {
+    datalist.forEach((m, index) => {
+      let num = 0;
+      switch (index) {
+        case 0:
+          num = 20;
+          break;
+        case 1:
+          num = 30;
+          break;
+        case 2:
+          num = 1000;
+          break;
+        case 3:
+          num = 100;
+          break;
+        default:
+          num = 10;
+          break;
+      }
+
+      m.value = (Math.random() + num).toFixed(2);
+    });
+  }
+});
+
+watch(
+  () => (props.title, props.postion),
+  () => {
+    topTitle.value = props.title;
+    pos.value = props.postion;
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+<style lang="scss" scoped>
+.plant-environment-warp {
+  height: 100%;
+  width: 100%;
+  .data-item-row {
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .data-item {
+    height: 100%;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .data-warp {
+    padding: 8px 0;
+    text-align: center;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    .small-bg,
+    .data-pos {
+      display: inline-flex;
+      vertical-align: middle;
+      .data-pos-center {
+        display: inline-flex;
+        justify-content: space-around;
+        flex-direction: column;
+        height: 100%;
+        .pos-center {
+        }
+      }
+    }
+    .small-bg {
+      width: 38px;
+      height: 38px;
+      position: relative;
+      margin-top: 10%;
+      .img-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 38%;
+        height: 38%;
+      }
+    }
+    .data-pos {
+      width: calc(100% - 54px);
+      .label,
+      .value {
+        display: inline-block;
+        width: 100%;
+      }
+      .label {
+        color: #fff;
+        font-size: 13px;
+      }
+      .value {
+        color: #6beff9;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 6px;
+      }
+      .unit {
+        font-size: 10px;
+      }
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/plant/components/irrigationCharts.vue

@@ -1,18 +1,41 @@
 <template>
   <div class="irrigation-charts">
-    <custom-echart-water-droplet height="100%" :option="option" />
+    <div class="charts-content">
+      <div class="water-droplet-bg" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg5.png') + ')' }">
+        <div class="water-droplet">
+          <custom-echart-water-droplet height="100%" :option="option" />
+        </div>
+      </div>
+      <div class="water-droplet-warp">
+        <template v-for="(n, index) in itemlist" :key="index">
+          <div class="water-droplet-item" :style="{ height: 'calc((100% - 20px) / ' + itemlist.length + ')' }">
+            <div class="title" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg1) + ')' }">
+              <div class="title-val" :style="{ color: n.color }">{{ n.title }}</div>
+            </div>
+            <div class="tips" :style="{ 'background-image': 'url(' + getAssetsFile(n.bg2) + ')' }">
+              <span class="tips-val">{{ n.tips }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
 let percent = ref(0.6);
+let itemlist = reactive([
+  { title: '智能灌溉', bg1: 'images/plant/bg8.png', bg2: 'images/plant/bg7.png', tips: '去浇水', color: '#4a90e2ff' },
+  { title: '智能施肥', bg1: 'images/plant/bg9.png', bg2: 'images/plant/bg7.png', tips: '去施肥', color: '#50e3c2ff' },
+]);
 const option = reactive({
   backgroundColor: 'transparent', //背景色
   series: [
     {
       name: '预估量',
       type: 'liquidFill',
-      radius: '42%',
+      radius: '80%',
       center: ['50%', '50%'],
       backgroundStyle: {
         color: 'transparent',
@@ -24,14 +47,14 @@ const option = reactive({
         position: ['50%', '45%'],
         formatter: percent.value * 100 + '%', //显示文本,
         textStyle: {
-          fontSize: '26px', //文本字号,
+          fontSize: '20px', //文本字号,
           color: '#fff',
         },
       },
       outline: {
         borderDistance: 3,
         itemStyle: {
-          borderWidth: 2,
+          borderWidth: 1,
           borderColor: {
             type: 'linear',
             x: 1,
@@ -41,15 +64,15 @@ const option = reactive({
             colorStops: [
               {
                 offset: 0,
-                color: '#007DFF',
+                color: 'rgba(255, 255, 255, 0.8)',
               },
               {
                 offset: 0.6,
-                color: 'rgba(45, 67, 114, 1)',
+                color: 'rgba(255, 255, 255, 0.8)',
               },
               {
                 offset: 1,
-                color: 'rgba(45, 67, 114, 1)',
+                color: 'rgba(255, 255, 255, 0.8)',
               },
             ],
             globalCoord: false,
@@ -79,5 +102,78 @@ onMounted(() => {});
 <style lang="scss" scoped>
 .irrigation-charts {
   height: 100%;
+  .charts-content {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    .water-droplet-bg {
+      display: inline-block;
+      width: 40%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+      position: relative;
+      .water-droplet {
+        position: absolute;
+        left: 50%;
+        top: 10%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .water-droplet-warp {
+      width: 60%;
+      padding: 0 10px;
+      display: inline-flex;
+      vertical-align: middle;
+      flex-direction: column;
+      .water-droplet-item {
+        width: 100%;
+      }
+      .title,
+      .tips {
+        display: inline-block;
+        color: #fff;
+        vertical-align: top;
+        .tips-val {
+          display: inline-flex;
+          line-height: 42px;
+          text-align: center;
+          font-size: 14px;
+          font-weight: bold;
+          transform: skewX(-13deg) translateY(-50%);
+          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+          -webkit-background-clip: text;
+          color: #fff;
+          letter-spacing: 2px;
+          text-shadow: -6px 0 0 1px #add8f1;
+          position: absolute;
+          left: 0;
+          top: 50%;
+        }
+      }
+      .title {
+        width: 40%;
+        height: 100%;
+        background-size: contain;
+        background-position: left bottom;
+        background-repeat: no-repeat;
+        .title-val {
+          width: 100%;
+          text-align: center;
+          line-height: 32px;
+        }
+      }
+      .tips {
+        width: 60%;
+        height: 100%;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: left center;
+        position: relative;
+      }
+    }
+  }
 }
 </style>

sub-government-screen-service/src/views/plant/components/monitoringScreen.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="monitoring-screen-warp">
+    <div class="monitoring-screen-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg2.png') + ')' }"></div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+</script>
+<style lang="scss" scoped>
+.monitoring-screen-warp {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  .monitoring-screen-content {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0;
+    div {
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/plant/components/noticeBar.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="notice-bar-warp" :style="{ height: height }">
+    <div class="notice-bar-pos">
+      <div class="notice-icon">
+        <img :src="getAssetsFile('images/plant/icon5.png')" />
+      </div>
+      <div class="notice-bar" :style="{ 'line-height': height }">
+        <div class="scrolling-text">
+          <span>{{ text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted } from 'vue';
+defineProps({
+  text: {
+    type: String,
+    required: true,
+    default: '这是一条滚动通知消息，请注意查看！',
+  },
+  height: {
+    type: String || Number,
+    default: '40px',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.notice-bar-warp {
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  .notice-bar-pos {
+    display: inline-flex;
+    width: 100%;
+  }
+  .notice-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 30px;
+    img {
+      width: 80%;
+      height: 80%;
+      margin: 10% 0;
+    }
+  }
+}
+.notice-bar {
+  display: inline-block;
+  overflow: hidden;
+  width: calc(100% - 30px);
+}
+
+.scrolling-text {
+  white-space: nowrap;
+  animation: scroll-left 10s linear infinite;
+  color: #fff;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>

sub-government-screen-service/src/views/plant/components/pathologyCharts.vue

@@ -113,7 +113,7 @@ let handelData = computed(() => {
   list.map((m, indexm) => {
     return { ...m, value: Number(Number(m.value) + Math.random() + indexm).toFixed(0) };
   });
-  console.info('handelData', list);
+  // console.info('handelData', list);
   return list;
 });
 

sub-government-screen-service/src/views/plant/components/plantgs.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="plant-gs-warp">
+    <div class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }"></div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+</script>
+<style lang="scss" scoped>
+.plant-gs-warp {
+  height: 100%;
+  padding: 10px 0;
+  width: 100%;
+  box-sizing: border-box;
+  .plant-gs-content {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

sub-government-screen-service/src/views/plant/components/waterdetectionCharts.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="water-detection-charts">
+    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+const legendData = ['矿物质', '钠元素'];
+
+let series = reactive([
+  {
+    name: legendData[0],
+    type: 'line',
+    symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
+    smooth: true,
+    lineStyle: {
+      normal: {
+        width: 1,
+        color: '#00e6fb', // 线条颜色
+      },
+    },
+    areaStyle: {
+      normal: {
+        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+        color: {
+          type: 'linear', // 线性渐变
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(2, 113, 146,1)' },
+            { offset: 0.4, color: 'rgba(2, 83, 111,1)' },
+            { offset: 0.7, color: 'rgba(2, 64, 77,1)' },
+            { offset: 1, color: 'rgba(1, 18, 43)' },
+          ],
+          global: false, // 默认为 false
+        },
+      },
+    },
+    data: [0.64, 0.34, 0.7, 0.44, 0.74, 0.12, 0.65, 0.41, 0.85, 0.96, 0.23, 0.16],
+    markLine: {
+      symbol: 'none',
+      silent: true,
+      lineStyle: {
+        color: 'red', // 确保颜色可见
+        width: 2, // 确保线条宽度足够
+        type: 'solid',
+      },
+      data: [
+        { yAxis: 0.5, name: '基准线1' },
+        { yAxis: 0.7, name: '基准线2' },
+      ],
+      label: {
+        show: true,
+        position: 'end',
+        formatter: '{b}: {c}',
+        color: '#fff',
+      },
+    },
+  },
+  {
+    name: legendData[1],
+    type: 'line',
+    symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
+    smooth: true,
+    lineStyle: {
+      normal: {
+        width: 1,
+        color: 'rgb(0, 254, 150)', // 线条颜色
+      },
+    },
+    areaStyle: {
+      normal: {
+        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+        color: {
+          type: 'linear', // 线性渐变
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgb(42, 140, 102)' },
+            { offset: 0.6, color: 'rgb(14, 82, 63)' },
+            { offset: 1, color: 'rgb(1, 18, 43)' },
+          ],
+          global: false, // 默认为 false
+        },
+      },
+    },
+    data: [0.14, 0.73, 0.38, 0.46, 0.65, 0.17, 0.89, 0.95, 0.47, 0.19, 0.86, 0.58],
+  },
+]);
+const currentMonth = ref(new Date().getMonth() + 1);
+const xPoint = computed(() => {
+  let list = [];
+  console.info('111', currentMonth.value);
+  for (let i = 1; i < 13; i++) {
+    let mouth = i < 10 ? i : i;
+    list.push(mouth + '月');
+  }
+  return list;
+});
+
+const chartsData = reactive({
+  option: {
+    backgroundColor: '#00001b',
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: '5%',
+      top: '20%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(33, 85, 154, .6)',
+      borderWidth: 1,
+      borderColor: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: 'rgba(85, 149, 233, .6)', // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(85, 149, 233, 0)', // 100% 处的颜色
+          },
+        ],
+        global: false, // 缺省为 false
+      },
+      padding: 8,
+      textStyle: {
+        color: '#fff',
+      },
+      axisPointer: {
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255, 255, 255, .6)',
+        },
+      },
+      extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
+      formatter: function (params) {
+        let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`;
+        if (Array.isArray(params)) {
+          for (let i = 0; i < params.length; i++) {
+            content += `
+                       <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
+                         <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
+                         <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
+                         <div style='font-size: 14px;'>${params[i].value}</div>
+                       </div>
+                     `;
+          }
+        }
+        return content;
+      },
+    },
+    legend: {
+      show: true,
+      data: Array.from(legendData),
+      left: 'center', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    // legend: [
+    //   {
+    //     data: [
+    //       {
+    //         name: legendData[0],
+    //         icon: 'rect',
+    //       },
+    //     ],
+    //     itemWidth: 10,
+    //     itemHeight: 2,
+    //     top: '2%',
+    //     left: '40%',
+    //     textStyle: {
+    //       color: '#ADD7FF',
+    //       fontSize: 12,
+    //     },
+    //   },
+    //   {
+    //     top: '2%',
+    //     left: '55%',
+    //     textStyle: {
+    //       color: '#ADD7FF',
+    //       fontSize: 14,
+    //     },
+    //     itemWidth: 18,
+    //     itemHeight: 2,
+    //     data: [
+    //       {
+    //         name: legendData[1],
+    //         icon: 'rect',
+    //       },
+    //     ],
+    //   },
+    // ],
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisLabel: {
+        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
+        textStyle: {
+          color: '#DEEBFF',
+          fontStyle: 'normal',
+          fontSize: 10,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        // 坐标轴轴线相关设置
+        lineStyle: {
+          color: 'rgba(77, 128, 254, 0.2)',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+      data: xPoint.value,
+    },
+    yAxis: {
+      type: 'value',
+      name: ' ',
+      nameTextStyle: {
+        color: '#DEEBFF',
+        fontSize: 14,
+        padding: [0, 0, 0, -30],
+      },
+      axisLabel: {
+        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
+        textStyle: {
+          color: '#DEEBFF',
+          fontStyle: 'normal',
+          fontSize: 12,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        // 坐标轴轴线相关设置
+        lineStyle: {
+          color: 'rgba(77, 128, 254, 0.2)',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    series: series,
+  },
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.water-detection-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/plant/components/yieldCharts.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="yield-charts">
+    <custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+let itemStyle = reactive({
+  itemStyle: { borderRadius: [8, 8, 0, 0] },
+});
+
+let legendList = reactive(['总产量', '种植面积']);
+const payload = {
+  id: '',
+  data: {
+    title: legendList,
+    unit: ['%'],
+    xAxis: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
+    data1: [20, 80, 100, 40, 34, 90, 60, 20, 80],
+    data2: [10, 100, 80, 30, 50, 100, 50, 10, 90],
+  },
+};
+
+const unit = payload.data.unit || [];
+const xAxis = payload.data.xAxis || [];
+const data1 = payload.data.data1 || [];
+const data2 = payload.data.data2 || [];
+const title = payload.data.title || [];
+
+const chartsData = reactive({
+  option: {
+    backgroundColor: 'transparent',
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '1%',
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      show: true,
+      data: Array.from(legendList),
+      left: 'center', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    tooltip: {
+      // 触发类型  经过轴触发axis  经过轴触发item
+      trigger: 'axis',
+      backgroundColor: 'rgba(9, 30, 60, 0.6)',
+      extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
+      borderWidth: 0,
+      confine: false,
+      appendToBody: true,
+      textStyle: {
+        color: '#fff',
+        fontSize: 10,
+      },
+      // 轴触发提示才有效
+      axisPointer: {
+        type: 'shadow',
+      },
+      shadowStyle: {
+        color: 'rgba(157, 168, 245, 0.1)',
+      },
+
+      formatter: (data) => {
+        var tip = '<h5 class="echarts-tip-h5">' + data[0].name + '</h5>';
+        data.forEach((item) => {
+          let unit = '';
+          if (item.seriesType === 'bar') {
+            tip += '<div class="echarts-tip-div">';
+            // tip += '<div class="left">' + item.marker + item.seriesName + '：</div>';
+            tip += '<div class="right">' + item.seriesName + '：' + item.value + unit + '</div>';
+            tip += '</div>';
+          }
+        });
+        return tip;
+      },
+    },
+    xAxis: {
+      data: xAxis,
+      axisLine: {
+        lineStyle: {
+          type: 'solid',
+          color: '#4176a3',
+          width: '0.5', //坐标线的宽度
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff', //底部文字颜色
+          fontSize: 12,
+        },
+      },
+    },
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条型数据区域缩放组件
+        startValue: 0, // 数据窗口起始值的索引
+        endValue: 5, // 数据窗口结束值的索引
+      },
+      {
+        type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
+        startValue: 0,
+        endValue: 5,
+      },
+    ],
+    yAxis: [
+      {
+        name: ' ',
+        nameTextStyle: {
+          align: 'left',
+          fontSize: 11,
+          color: '#4176a3',
+        },
+        type: 'value',
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'transparent', //左边框颜色
+          },
+        },
+        splitLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          show: true,
+          fontSize: 12,
+          textStyle: {
+            color: '#ADD6FF', //左文字颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: title[0],
+        type: 'bar',
+        barWidth: 10,
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(21,136,209,0.1)',
+        },
+        itemStyle: {
+          color: {
+            type: 'linear', // 线性渐变
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#45bfe9' },
+              { offset: 1, color: '#01589c' },
+            ],
+            global: false, // 默认为 false
+          },
+        },
+        data: data1,
+        z: 0,
+        zlevel: 0,
+      },
+      {
+        type: 'pictorialBar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#021C46', //数据的间隔颜色
+        },
+        symbolRepeat: 'true',
+        symbolMargin: 3,
+        symbol: 'rect',
+        symbolSize: [30, 4],
+        data: data1,
+        z: 1,
+        zlevel: 0,
+        label: {
+          show: false,
+          position: 'top',
+          fontSize: 14,
+          color: '#fff', //柱状顶部文字颜色
+          formatter: function (params) {
+            return params.data;
+          },
+        },
+      },
+      {
+        name: title[1],
+        type: 'bar',
+        barWidth: 10,
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(21,136,209,0.1)',
+        },
+        itemStyle: {
+          color: {
+            type: 'linear', // 线性渐变
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#6beff9' },
+              { offset: 1, color: '#2f888f' },
+            ],
+            global: false, // 默认为 false
+          },
+        },
+        data: data2,
+        z: 0,
+        zlevel: 0,
+      },
+      {
+        type: 'pictorialBar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#021C46', //数据的间隔颜色
+        },
+        symbolRepeat: 'true',
+        symbolMargin: 3,
+        symbol: 'rect',
+        symbolSize: [30, 4],
+        data: data2,
+        z: 1,
+        zlevel: 0,
+        label: {
+          show: false,
+          position: 'top',
+          fontSize: 14,
+          color: '#fff', //柱状顶部文字颜色
+          formatter: function (params) {
+            return params.data;
+          },
+        },
+      },
+    ],
+  },
+  valData: [
+    { name: '1月', value: 40, type: '蝗虫', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 30, type: '飞蛾', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 100, type: '其他', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 60, type: '蚜虫', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 20, type: '蝗虫', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 20, type: '飞蛾', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 80, type: '其他', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 40, type: '蚜虫', seriesType: 'bar', ...itemStyle },
+  ],
+});
+
+const randomVal = (num) => {
+  let list = [];
+  for (let i = 0; i < legendList.length; i++) {
+    let addNum = [10, 8, 2, 5];
+    let val = {
+      name: num + '月',
+      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
+      seriesType: 'bar',
+      type: legendList[i],
+      ...itemStyle,
+    };
+    list[i] = val;
+  }
+  return list;
+};
+let handelData = computed(() => {
+  let list = [];
+  let maxMouth = 12;
+  for (let i = 0; i < maxMouth; i++) {
+    let val = randomVal(i + 1);
+    list = [...list, ...val];
+  }
+
+  list.map((m) => {
+    return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
+  });
+  // console.info('handelData', list);
+  return list;
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.yield-charts {
+  height: 100%;
+  width: 100%;
+}
+</style>

sub-government-screen-service/src/views/plant/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data-home-index">
+  <div class="data-plant-index">
     <baseBg :name-val="'plant'" top-title="智慧种植管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
@@ -27,18 +27,28 @@
             </div>
           </el-col>
           <el-col :span="12">
-            <el-row style="height: 60%">
+            <el-row style="height: 67%">
-              <el-col :span="24"></el-col>
+              <el-col :span="24" class="center-top">
+                <div class="notice">
+                  <noticeBar :height="'40px'"></noticeBar>
+                </div>
+                <div class="top">
+                  <environment></environment>
+                </div>
+                <div class="map-gis">
+                  <plantgs></plantgs>
+                </div>
+              </el-col>
             </el-row>
-            <el-row style="height: 40%">
+            <el-row style="height: 33%" :gutter="30">
-              <el-col :span="12">
+              <el-col :span="12" style="height: 100%">
                 <customBack top-title="水肥检测分析" :top-postion="'left'">
                   <template #back>
                     <waterfertilizerCharts></waterfertilizerCharts>
                   </template>
                 </customBack>
               </el-col>
-              <el-col :span="12">
+              <el-col :span="12" style="height: 100%">
                 <customBack top-title="智慧水肥灌溉" :top-postion="'right'">
                   <template #back>
                     <irrigationCharts></irrigationCharts>
@@ -50,17 +60,23 @@
           <el-col :span="6" class="right-charts">
             <div class="right-charts-item">
               <customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
-                <template #back></template>
+                <template #back>
+                  <monitoringScreen></monitoringScreen>
+                </template>
               </customBack>
             </div>
             <div class="right-charts-item">
               <customBack top-title="种植产量分析" :top-postion="'right'">
-                <template #back></template>
+                <template #back>
+                  <yieldCharts></yieldCharts>
+                </template>
               </customBack>
             </div>
             <div class="right-charts-item">
               <customBack top-title="水质检测分析" :top-postion="'right'">
-                <template #back></template>
+                <template #back>
+                  <waterdetectionCharts></waterdetectionCharts>
+                </template>
               </customBack>
             </div>
           </el-col>
@@ -77,9 +93,15 @@ import insectPestsCharts from './components/insectPestsCharts';
 import pathologyCharts from './components/pathologyCharts.vue';
 import waterfertilizerCharts from './components/waterfertilizerCharts.vue';
 import irrigationCharts from './components/irrigationCharts.vue';
+import yieldCharts from './components/yieldCharts.vue';
+import waterdetectionCharts from './components/waterdetectionCharts.vue';
+import environment from './components/environment.vue';
+import plantgs from './components/plantgs.vue';
+import monitoringScreen from './components/monitoringScreen.vue';
+import noticeBar from './components/noticeBar.vue';
 </script>
 <style lang="scss" scoped>
-.data-home-index {
+.data-plant-index {
   .left-charts {
     display: flex;
     justify-content: space-around;
@@ -103,5 +125,24 @@ import irrigationCharts from './components/irrigationCharts.vue';
     width: 100%;
     height: calc((100% - 30px) / 3);
   }
+
+  .center-top {
+    padding: 16px;
+    .notice,
+    .top,
+    .map-gis {
+      display: inline-block;
+      width: 100%;
+    }
+    .notice {
+      height: 40px;
+    }
+    .top {
+      height: 80px;
+    }
+    .map-gis {
+      height: calc(100% - 140px);
+    }
+  }
 }
 </style>