内容更改

shuishen

2022-07-01 6be9c33a7c97c9672a5d12a216d0fa0791e591d3

内容更改

 public/img/jc.png

 public/img/qx.png

 public/img/sclt.png

 public/index.html

@@ -6,7 +6,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <title>南城县智慧农业综合监管平台</title>
    <style>
        html,
        body {

 src/components/map/index.vue

@@ -49,6 +49,78 @@
                })
            )

            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengyjjddom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengdom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )

            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
@@ -60,21 +132,21 @@
            //     })
            // )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.35381525, 27.95839468, 1950.0
                    116.56705776, 27.42386903, 1800.0
                ),
                orientation: {
                    // 指向
@@ -84,6 +156,8 @@
                    roll: 0.0
                }
            })

            // global.viewer.locationBar.enable = true
        }

        global.DC.ready(initViewer)

 src/components/time-box/index.vue

@@ -8,8 +8,11 @@

            <div class="num-unit">
                <div class="num">{{currentNum}}</div>
                <div class="unit decline">
                    <span>⬆</span>
                <div class="unit rise" v-if="upDown == 'up'">
                    <span>↑</span>
                </div>
                <div class="unit decline" v-if="upDown == 'down'">
                    <span>↓</span>
                </div>
            </div>
        </div>
@@ -28,7 +31,8 @@
        'title',
        'currentNum',
        'subTitle',
        'contrast'
        'contrast',
        'upDown'
    ]
}
</script>
@@ -79,6 +83,10 @@
                margin-left: 8px;
            }

            .unit.rise {
                color: #27d1ec;
            }

            .unit.decline {
                color: #ec7127;
            }

 src/router/axios.js

@@ -12,7 +12,7 @@
//   console.log(window.location);
//   console.log(url);
// }, 3000);
window.$apiUrls = 'http://http://182.106.212.58:8013/api'
window.$apiUrls = 'http://182.106.212.58:8013/api'
// window.$apiUrls = 'http://192.168.0.109:82'
const service = axios.create({
    //   baseURL: 'http://192.168.0.107:83',

 src/views/home/index.vue

@@ -1,268 +1,338 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-06-25 17:50:45
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-01 11:15:49
* 驾驶舱
*/
<template>
  <div class="container">
    <mapBox ref="modalForm"/>
    <div class="container">
        <mapBox ref="modalForm" />

    <div class="left-box">
      <div class="content">
        <div class="t">
          <div class="title-box">
            <div class="icon"></div>
            <div class="text">
              企业概况
              <div class="em"></div>
            </div>
        <div class="left-box">
            <div class="content">
                <div class="t">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            企业概况
                            <div class="em"></div>
                        </div>

            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box">
            <div class="nc-num">
              <div class="text">
                农场数量
                <span class="num">{{ncnum}}</span>
              </div>
              <div class="t-l"></div>
              <div class="b-l"></div>
              <div class="log"></div>
            </div>
                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="nc-num">
                            <div class="text">
                                农场数量
                                <!-- <span class="num">{{ncnum}}</span> -->
                                <span class="num">2</span>
                            </div>
                            <div class="t-l"></div>
                            <div class="b-l"></div>
                            <div class="log"></div>
                        </div>

            <div class="pel-num">
              <div class="text">
                人员数量
                <span class="num">{{rynum}}</span>
              </div>
              <div class="t-l"></div>
              <div class="b-l"></div>
              <div class="log"></div>
                        <div class="pel-num">
                            <div class="text">
                                人员数量
                                <!-- <span class="num">{{rynum}}</span> -->
                                <span class="num">36</span>
                            </div>
                            <div class="t-l"></div>
                            <div class="b-l"></div>
                            <div class="log"></div>
                        </div>
                    </div>
                </div>
                <div class="c">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            农田使用率
                            <div class="em"></div>
                        </div>

                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="being">
                            <div id="BeingEcharts" class="echarts-box"></div>
                            <div class="state">在使用</div>

                            <div class="text">
                                <div class="num">545.01</div>
                                <!-- <div class="num">{{ landsnum }}</div> -->
                                <div class="unit">亩</div>
                            </div>
                        </div>

                        <div class="leisure">
                            <div id="LeisureEcharts" class="echarts-box"></div>
                            <div class="state">空闲中</div>

                            <div class="text">
                                <div class="num">{{ landwnum }}</div>
                                <div class="unit">亩</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="b">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            种养品种
                            <div class="num">2</div>
                            <!-- <div class="num">{{ num }}</div> -->
                            <div class="unit">种</div>
                        </div>
                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        <ul>
                            <li>
                                <div class="l">
                                    <img
                                        src="http://61.131.136.25:2081/zhba/upload/picture/97ae6951541f46e1bb2468adb5d69403.png"
                                        class="img"
                                    />
                                    <div class="text">水稻</div>
                                </div>
                                <div class="r">
                                    <div class="num">545.01</div>
                                    <div class="unit">亩</div>
                                </div>
                            </li>
                            <li>
                                <div class="l">
                                    <img
                                        src="http://61.131.136.25:2081/zhba/upload/picture/71bdf3e48b0f45009dd670010224ef00.png"
                                        class="img"
                                    />
                                    <div class="text">玉米</div>
                                </div>
                                <div class="r">
                                    <div class="num">75.12</div>
                                    <div class="unit">亩</div>
                                </div>
                            </li>

                            <!-- <li v-for="(item, index) in farmPlanList" :key="index">
                                <div class="l">
                                    <img :src="item.url" class="img" />
                                    <div class="text">{{ item.strainName }}</div>
                                </div>
                                <div class="r">
                                    <div class="num">{{ item.area }}</div>
                                    <div class="unit">亩</div>
                                </div>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="c">
          <div class="title-box">
            <div class="icon"></div>
            <div class="text">
              农田使用率
              <div class="em"></div>
            </div>

            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box">
            <div class="being">
              <div id="BeingEcharts" class="echarts-box"></div>
              <div class="state">在使用</div>
        <div class="right-box">
            <div class="content">
                <div class="t">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            物联网设备在线情况
                            <div class="em"></div>
                        </div>

              <div class="text">
                <div class="num">{{ landsnum }}</div>
                <div class="unit">亩</div>
              </div>
            </div>
                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="equipment" id="EquipmentEcharts"></div>
                    </div>
                </div>
                <div class="c">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            本年农事操作
                            <!-- <div class="num">{{ total }}</div> -->
                            <div class="num">22</div>
                            <div class="unit">次</div>
                        </div>

            <div class="leisure">
              <div id="LeisureEcharts" class="echarts-box"></div>
              <div class="state">空闲中</div>
                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>

              <div class="text">
                <div class="num">{{ landwnum }}</div>
                <div class="unit">亩</div>
              </div>
                    <!-- <div class="content-box" :v-if="isFarmingDetail">
                        <div class="detail" v-for="(item, index) in farmingList" :key="index">
                            <div class="title">{{ item.name }}</div>
                            <div class="num-unit">
                                <div class="num">{{ item.value }}</div>
                                <div class="unit">次</div>
                            </div>
                        </div>
                    </div>-->

                    <div class="content-box">
                        <div class="detail">
                            <div class="title">施肥</div>
                            <div class="num-unit">
                                <div class="num">2</div>
                                <div class="unit">次</div>
                            </div>
                        </div>

                        <div class="detail">
                            <div class="title">除草</div>
                            <div class="num-unit">
                                <div class="num">3</div>
                                <div class="unit">次</div>
                            </div>
                        </div>

                        <div class="detail">
                            <div class="title">移栽</div>
                            <div class="num-unit">
                                <div class="num">7</div>
                                <div class="unit">次</div>
                            </div>
                        </div>

                        <div class="detail">
                            <div class="title">采收</div>
                            <div class="num-unit">
                                <div class="num">10</div>
                                <div class="unit">次</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="b">
                    <div class="title-box">
                        <div class="icon"></div>
                        <div class="text">
                            销售趋势
                            <div class="em"></div>
                        </div>

                        <div class="line">
                            <div class="l"></div>
                            <div class="r"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="total">
                            <div class="t-l"></div>
                            <div class="t-r"></div>
                            <div class="b-l"></div>
                            <div class="b-r"></div>
                            <div class="title">全年销售总额（元）</div>
                            <div class="price">
                                <div>
                                    <span>1</span>
                                </div>
                                <div>
                                    <span>6</span>
                                </div>
                                <div>
                                    <span>7</span>
                                </div>
                                <div>
                                    <span>8</span>
                                </div>
                                <div>
                                    <span>5</span>
                                </div>
                                <div>
                                    <span>2</span>
                                </div>
                                <div>
                                    <span>0</span>
                                </div>
                            </div>
                        </div>

                        <div class="trend" id="TrendEcharts"></div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="b">
          <div class="title-box">

        <div class="down-menu">
            <div class="nc">
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div class="jk">
                <span>监控设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div class="jc">
                <span>监测设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
        </div>

        <div class="city-flow" @click="cityFlowShow">
            <div class="icon"></div>
            <div class="text">
              种养品种
              <div class="num">{{ num }}</div>
              <div class="unit">种</div>
            <span>市场流通</span>
        </div>

        <div class="layers-box">
            <div class="sl">
                <div class="text">标准图</div>
            </div>
            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            <div class="yx on">
                <div class="text">卫星图</div>
            </div>
          </div>
          <div class="content-box">
        </div>

        <div class="lenged-box">
            <ul>
              <li v-for="(item, index) in farmPlanList" :key="index">
                <div class="l">
                  <img :src="item.url" class="img"/>
                  <div class="text">{{ item.strainName }}</div>
                </div>
                <div class="r">
                  <div class="num">{{ item.area }}</div>
                  <div class="unit">亩</div>
                </div>
              </li>
                <li>
                    <div class="icon"></div>
                    <div class="title">农场</div>
                </li>
                <li>
                    <div class="icon"></div>
                    <div class="title">地块</div>
                </li>
                <li>
                    <div class="icon"></div>
                    <div class="title">监控设备</div>
                </li>
                <li>
                    <div class="icon"></div>
                    <div class="title">土壤监测</div>
                </li>
                <li>
                    <div class="icon"></div>
                    <div class="title">气象监测</div>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="right-box">
      <div class="content">
        <div class="t">
          <div class="title-box">
            <div class="icon"></div>
            <div class="text">
              物联网设备在线情况
              <div class="em"></div>
        <div v-if="cityShow" class="popup">
            <div class="box">
                <img src="/img/sclt.png" alt />
            </div>

            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box">
            <div class="equipment" id="EquipmentEcharts"></div>
          </div>
        </div>
        <div class="c">
          <div class="title-box">
            <div class="icon"></div>
            <div class="text">
              本年农事操作
              <div class="num">{{ total }}</div>
              <div class="unit">次</div>
            </div>

            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box" :v-if="isFarmingDetail">
            <div class="detail" v-for="(item, index) in farmingList" :key="index">
              <div class="title">{{ item.name }}</div>
              <div class="num-unit">
                <div class="num">{{ item.value }}</div>
                <div class="unit">次</div>
              </div>
            </div>
          </div>
        </div>
        <div class="b">
          <div class="title-box">
            <div class="icon"></div>
            <div class="text">
              销售趋势
              <div class="em"></div>
            </div>

            <div class="line">
              <div class="l"></div>
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box">
            <div class="total">
              <div class="t-l"></div>
              <div class="t-r"></div>
              <div class="b-l"></div>
              <div class="b-r"></div>
              <div class="title">全年销售总额（元）</div>
              <div class="price">
                <div>
                  <span>1</span>
                </div>
                <div>
                  <span>1</span>
                </div>
                <div>
                  <span>2</span>
                </div>
                <div>
                  <span>3</span>
                </div>
                <div>
                  <span>4</span>
                </div>
                <div>
                  <span>5</span>
                </div>
                <div>
                  <span>6</span>
                </div>
                <div>
                  <span>7</span>
                </div>
              </div>
            </div>

            <div class="trend" id="TrendEcharts"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="down-menu">
      <div class="nc">
        <span>农场</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div class="jk">
        <span>监控设备</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div class="jc">
        <span>监测设备</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>

    <div class="city-flow">
      <div class="icon"></div>
      <span>市场流通</span>
    </div>

    <div class="layers-box">
      <div class="sl">
        <div class="text">标准图</div>
      </div>
      <div class="yx on">
        <div class="text">卫星图</div>
      </div>
    </div>

    <div class="lenged-box">
      <ul>
        <li>
          <div class="icon"></div>
          <div class="title">农场</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="title">地块</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="title">监控设备</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="title">土壤监测</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="title">气象监测</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
@@ -272,1154 +342,1189 @@
import { selectXCount } from '@/api/land/land'

export default {
  data () {
    return {
      farmingList: [],
      farmPlanList: [],
      isFarmingDetail: false,
      total: 0,
      num: 0,
      landsnum: 0,
      landwnum: 0,
      ncnum: 0,
      rynum: 0
    }
  },
  created () {
    // 本年农事操作记录
    this.getFarmingStatis()
    this.getFarmingCount()
    this.pagePalnt()
    this.selectXCount()
    this.SelectCount()
  },
  mounted () {
    this.initPie('BeingEcharts')
    this.initPie('LeisureEcharts')
    this.initRightPie('EquipmentEcharts')
    this.initLine('TrendEcharts')
  },
  methods: {
    initPie (dom) {
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)
    data () {
        return {
            farmingList: [],
            farmPlanList: [],
            isFarmingDetail: false,
            total: 0,
            num: 0,
            landsnum: 0,
            landwnum: 0,
            ncnum: 0,
            rynum: 0,
            cityShow: false
        }
    },
    created () {
        // 本年农事操作记录
        this.getFarmingStatis()
        this.getFarmingCount()
        this.pagePalnt()
        this.selectXCount()
        this.SelectCount()
    },
    mounted () {
        this.initPie('BeingEcharts', 100)
        this.initPie('LeisureEcharts', 0)
        this.initRightPie('EquipmentEcharts')
        this.initLine('TrendEcharts')
    },
    methods: {
        initPie (dom, val) {
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

      const option = {
        series: [
          {
            radius: '100%',
            type: 'gauge',
            detail: {
              formatter: '{value}%\n总占比',
              color: '#A9D1D7',
              fontSize: '16px',
              fontWeight: 'bold',
              offsetCenter: [0, '60%']
            },
            data: [{ value: 50 }],
            splitNumber: 25,
            axisLine: {
              show: true,
              width: 8,
              lineStyle: {
                color: [
                  [1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            const option = {
                series: [
                    {
                      offset: 0.1,
                      color: '#12FF90'
                    },
                    {
                      offset: 0.6,
                      color: '#00FFC2'
                    },
                    {
                      offset: 1,
                      color: '#05D4F5'
                        radius: '100%',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%\n总占比',
                            color: '#A9D1D7',
                            fontSize: '16px',
                            fontWeight: 'bold',
                            offsetCenter: [0, '60%']
                        },
                        data: [{ value: val }],
                        splitNumber: 25,
                        axisLine: {
                            show: true,
                            width: 8,
                            lineStyle: {
                                color: [
                                    [1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0.1,
                                            color: '#12FF90'
                                        },
                                        {
                                            offset: 0.6,
                                            color: '#00FFC2'
                                        },
                                        {
                                            offset: 1,
                                            color: '#05D4F5'
                                        }
                                    ])
                                    ]
                                ]

                            }
                        },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        splitLine: {
                            show: true,
                            distance: -8,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        }

                    }
                  ])
                  ]
                ]

              }
            },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: {
              show: true,
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            }

          }
        ]
      }

      option && myChart.setOption(option)
    },

    initRightPie (dom) {
      const that = this
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)

      const option = {
        title: {
          text: '400',
          subtext: '设备总数',
          top: '40%',
          left: 'center',
          textStyle: {
            color: '#69E2ED',
            fontSize: 34,
            fontWeight: 'bold',
            lineHeight: 12
          },
          subtextStyle: {
            color: '#A9D1D7',
            fontSize: 18,
            fontWeight: 'bold'
          }
            option && myChart.setOption(option)
        },
        series: [
          {
            type: 'pie',
            radius: ['52%', '80%'],
            center: ['50%', '50%'],
            data: [
              {
                value: 30,
                name: 'rose2',
                itemStyle: {
                  color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#F39302'
                  }, {
                    offset: 1,
                    color: '#E5F302'
                  }])
                },
                labelLine: {
                  show: false
                },
                label: {
                  show: false
                }
              },
              {
                value: 90,
                name: 'rose2',
                itemStyle: {
                  color: '#00F0FF'
                },
                labelLine: {
                  show: false
                },
                label: {
                  show: false
                }
              }
            ]
          },
          { // 指示线
            // 通过value 的值 调节lableLine的位置
            type: 'pie',
            radius: ['52%', '80%'],
            data: [
              {
                value: 30,
                itemStyle: {
                  color: 'transparent'
                },
                labelLine: {
                  show: true,
                  length: 42,
                  length2: 24,
                  color: '#fff',
                  lineStyle: {
                    color: '#fff'
                  }
                },
                label: {
                  color: '#A9D1D7',
                  fontSize: 16,
                  position: 'outside',
                  formatter: '{a|52}\n离线',
                  rich: {
                    a: {
                      color: '#EBC802',
                      fontSize: 22,
                      fontWeight: 'bold',
                      lineHeight: 30

        initRightPie (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            const option = {
                title: {
                    text: '28',
                    subtext: '设备总数',
                    top: '40%',
                    left: 'center',
                    textStyle: {
                        color: '#69E2ED',
                        fontSize: 34,
                        fontWeight: 'bold',
                        lineHeight: 12
                    },
                    subtextStyle: {
                        color: '#A9D1D7',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                  }
                }

              },
              {
                value: 90,
                itemStyle: {
                  color: 'transparent'
                }
              }
            ]
          },

          { // 指示线
            // 通过value 的值 调节lableLine的位置
            type: 'pie',
            radius: ['52%', '80%'],
            data: [
              {
                value: 30,
                itemStyle: {
                  color: 'transparent'
                }

              },
              {
                value: 90,
                itemStyle: {
                  color: 'transparent'
                },
                labelLine: {
                  show: true,
                  length: 42,
                  length2: 24,
                  color: '#fff',
                  lineStyle: {
                    color: '#fff'
                  }
                },
                label: {
                  color: '#A9D1D7',
                  fontSize: 16,
                  position: 'outside',
                  formatter: '{a|52}\n在线',
                  rich: {
                    a: {
                      color: '#38ADD7',
                      fontSize: 22,
                      fontWeight: 'bold',
                      lineHeight: 30
                series: [
                    {
                        type: 'pie',
                        radius: ['44%', '62%'],
                        center: ['50%', '50%'],
                        data: [
                            {
                                value: 2,
                                name: 'rose2',
                                itemStyle: {
                                    color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: '#F39302'
                                    }, {
                                        offset: 1,
                                        color: '#E5F302'
                                    }])
                                },
                                labelLine: {
                                    show: false
                                },
                                label: {
                                    show: false
                                }
                            },
                            {
                                value: 26,
                                name: 'rose2',
                                itemStyle: {
                                    color: '#00F0FF'
                                },
                                labelLine: {
                                    show: false
                                },
                                label: {
                                    show: false
                                }
                            }
                        ]
                    },
                    { // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: 'pie',
                        radius: ['44%', '62%'],
                        data: [
                            {
                                value: 2,
                                itemStyle: {
                                    color: 'transparent'
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: '#fff',
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                },
                                label: {
                                    color: '#A9D1D7',
                                    fontSize: 16,
                                    position: 'outside',
                                    formatter: '{a|52}\n离线',
                                    rich: {
                                        a: {
                                            color: '#EBC802',
                                            fontSize: 22,
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }

                            },
                            {
                                value: 26,
                                itemStyle: {
                                    color: 'transparent'
                                }
                            }
                        ]
                    },

                    { // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: 'pie',
                        radius: ['44%', '62%'],
                        data: [
                            {
                                value: 2,
                                itemStyle: {
                                    color: 'transparent'
                                }

                            },
                            {
                                value: 26,
                                itemStyle: {
                                    color: 'transparent'
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: '#fff',
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                },
                                label: {
                                    color: '#A9D1D7',
                                    fontSize: 16,
                                    position: 'outside',
                                    formatter: '{a|52}\n在线',
                                    rich: {
                                        a: {
                                            color: '#38ADD7',
                                            fontSize: 22,
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }
                            }
                        ]
                    }
                  }
                }
              }
            ]
          }
        ]
      }
                ]
            }

      option && myChart.setOption(option)
    },

    initLine (dom) {
      const that = this
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)

      const option = {
        tooltip: {},
        grid: {
          top: '16%',
          left: '6%',
          right: '6%',
          bottom: '12%',
          containLabel: true
            option && myChart.setOption(option)
        },
        xAxis: [
          {

            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#697B89'
              }
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#A9D1D7',
                margin: 8
              }
            },
            axisTick: { show: false },
            data: ['01', '02', '03', '04', '05', '06', '07']
          }
        ],
        yAxis: [
          {
            name: '（元）',
            nameTextStyle: {
              color: '#A9D1D7'
            },
            type: 'value',
            min: 0,
            max: 40,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#697B89'
              }
            },
            axisLabel: {
              margin: 8,
              textStyle: {
                color: '#A9D1D7'
              }
            },
            axisTick: { show: false }
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true, // 是否平滑曲线显示
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: '#66DDE9' // 线条颜色
              }
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#66DDE9'
                }, {
                  offset: 1,
                  color: 'rgba(102,221,233,0)'
                }]),
        initLine (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

                shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              }
            },
            data: [0, 25, 24, 35, 16, 30, 15]
          }
        ]
      }
            const option = {
                tooltip: {},
                grid: {
                    top: '16%',
                    left: '6%',
                    right: '6%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {

      option && myChart.setOption(option)
    },
    // 企业概况
    SelectCount () {
      var that = this
      SelectCount().then((res) => {
       that.ncnum = res.data.data.ncnum
       that.rynum = res.data.data.rynum
      })
    },
    getFarmingCount () {
      var that = this
      var deptId = '1123598813738675201'
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            // 坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#A9D1D7',
                                margin: 8
                            }
                        },
                        axisTick: { show: false },
                        data: ['01', '02', '03', '04', '05', '06', '07']
                    }
                ],
                yAxis: [
                    {
                        name: '（元）',
                        nameTextStyle: {
                            color: '#A9D1D7'
                        },
                        type: 'value',
                        min: 0,
                        max: 40,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            margin: 8,
                            textStyle: {
                                color: '#A9D1D7'
                            }
                        },
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true, // 是否平滑曲线显示
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                color: '#66DDE9' // 线条颜色
                            }
                        },
                        areaStyle: {
                            // 区域填充样式
                            normal: {
                                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#66DDE9'
                                }, {
                                    offset: 1,
                                    color: 'rgba(102,221,233,0)'
                                }]),

      getFarmingCount(deptId).then((res) => {
        that.total = res.data.data
        console.log(that.total, res.data.data)
        // that.total = 0;
        if (that.total > 0) {
          that.isFarmingDetail = true
                                shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                                shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: [0, 25, 24, 35, 16, 30, 15]
                    }
                ]
            }

            option && myChart.setOption(option)
        },
        // 企业概况
        SelectCount () {
            var that = this
            SelectCount().then((res) => {
                that.ncnum = res.data.data.ncnum
                that.rynum = res.data.data.rynum
            })
        },
        getFarmingCount () {
            var that = this
            var deptId = '1123598813738675201'

            getFarmingCount(deptId).then((res) => {
                that.total = res.data.data
                console.log(that.total, res.data.data)
                // that.total = 0;
                if (that.total > 0) {
                    that.isFarmingDetail = true
                }
            })
        },
        // 本年农事操作记录，分组统计
        getFarmingStatis () {
            var that = this
            var deptId = '1123598813738675201'
            getFarmingStatis(deptId).then((res) => {
                that.farmingList = res.data.data
            })
        },
        // 农场使用率
        selectXCount () {
            // eslint-disable-next-line no-unused-vars
            var that = this
            var deptId = '1123598813738675201'
            selectXCount(deptId).then((res) => {
                that.landsnum = res.data.data.snum
                that.landwnum = res.data.data.wnum
            })
        },
        pagePalnt () {
            var that = this
            var params = {
                status: 1
            }
            params.tenantId = '000000'
            params.deptId = '1123598813738675201'
            pagePalnt(1, 10, Object.assign(params)).then((res) => {
                const data = res.data.data
                that.num = data.num
                this.farmPlanList = data.page.records
            })
        },

        cityFlowShow () {
            this.cityShow = true
        }
      })
    },
    // 本年农事操作记录，分组统计
    getFarmingStatis () {
      var that = this
      var deptId = '1123598813738675201'
      getFarmingStatis(deptId).then((res) => {
        that.farmingList = res.data.data
      })
    },
    // 农场使用率
    selectXCount () {
      // eslint-disable-next-line no-unused-vars
      var that = this
      var deptId = '1123598813738675201'
      selectXCount(deptId).then((res) => {
        that.landsnum = res.data.data.snum
        that.landwnum = res.data.data.wnum
      })
    },
    pagePalnt () {
      var that = this
      var params = {
        status: 1
      }
      params.tenantId = '000000'
      params.deptId = '1123598813738675201'
      pagePalnt(1, 10, Object.assign(params)).then((res) => {
        const data = res.data.data
        that.num = data.num
        this.farmPlanList = data.page.records
      })
    }

  }
    }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'DS-Digital';
  src: url('/DS-Digital/DS-DIGI-1.ttf');
  src: url('/DS-Digital/DS-DIGIB-2.ttf');
  src: url('/DS-Digital/DS-DIGII-3.ttf');
  src: url('/DS-Digital/DS-DIGIT-4.ttf');
    font-family: 'DS-Digital';
    src: url('/DS-Digital/DS-DIGI-1.ttf');
    src: url('/DS-Digital/DS-DIGIB-2.ttf');
    src: url('/DS-Digital/DS-DIGII-3.ttf');
    src: url('/DS-Digital/DS-DIGIT-4.ttf');
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
    position: relative;
    width: 100%;
    height: 100%;

  .left-box {
    left: 0;
    background: linear-gradient(
    .left-box {
        left: 0;
        background: linear-gradient(
            270deg,
            rgba(4, 41, 64, 0) 0%,
            #042940 100%
    );
        );

    .content {
      display: flex;
      flex-direction: column;
      left: 0;

      .t {
        height: 244px;

        .content-box {
          display: flex;
          align-items: center;
          flex-direction: column;

          .nc-num {
            margin-top: 30px;
            background: linear-gradient(
                    88deg,
                    rgba(60, 118, 138, 0) 0%,
                    rgba(60, 118, 138, 0.5) 100%
            );

            .text {
              margin-left: 46px;

              .num {
                margin: 30px;
                color: #66dde9;
              }
            }

            .log {
              left: auto;
              right: 0;
              background: url(/img/icon/nc-num.png) no-repeat;
            }

            .t-l,
            .b-l {
              background: linear-gradient(
                      89deg,
                      rgba(102, 221, 233, 0) 0%,
                      #66dde9 51%,
                      rgba(102, 221, 233, 0) 100%
              );
            }
          }

          .pel-num {
            margin-top: 46px;
            background: linear-gradient(
                    88deg,
                    rgba(38, 89, 132, 0) 0%,
                    rgba(38, 89, 132, 0.5) 100%
            );

            .text {
              margin-left: 108px;

              .num {
                margin: 48px;
                color: #00b1ff;
              }
            }

            .log {
              left: 0;
              right: auto;
              background: url(/img/icon/pel-num.png) no-repeat;
            }

            .t-l,
            .b-l {
              background: linear-gradient(
                      89deg,
                      rgba(51, 98, 153, 0) 0%,
                      #508fd9 55%,
                      rgba(51, 98, 153, 0) 100%
              );
            }
          }

          .pel-num,
          .nc-num {
            display: flex;
            align-items: center;
            position: relative;

            width: 342px;
            height: 70px;
            border-radius: 35px 35px 35px 35px;

            .text {
              font-size: 21px;
              color: #a9d1d7;

              .num {
                font-size: 24px;
                font-weight: Bold;
              }
            }

            .t-l {
              top: 0;
              bottom: auto;
            }

            .b-l {
              top: auto;
              bottom: 0;
            }

            .log {
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto;
              width: 88px;
              height: 88px;
              background-size: 100% 100%;
            }

            .t-l,
            .b-l {
              margin: auto;
              position: absolute;
              left: 0;
              right: 0;
              width: 217px;
              height: 1px;
            }
          }
        }
      }

      .c {
        height: 288px;

        .content-box {
          display: flex;
          justify-content: space-around;

          .being {
            margin-top: 30px;
            width: 152px;

            .state {
              color: #69e2ed;
            }

            .text {
              .num {
                color: #69e2ed;
              }
            }
          }

          .leisure {
            margin-top: 30px;
            width: 152px;

            .state {
              color: #c1c1c1;
            }

            .text {
              .num {
                color: #c1c1c1;
              }
            }
          }

          .being,
          .leisure {
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            left: 0;

            .echarts-box {
              width: 152px;
              height: 152px;
            .t {
                height: 244px;

                .content-box {
                    display: flex;
                    align-items: center;
                    flex-direction: column;

                    .nc-num {
                        margin-top: 30px;
                        background: linear-gradient(
                            88deg,
                            rgba(60, 118, 138, 0) 0%,
                            rgba(60, 118, 138, 0.5) 100%
                        );

                        .text {
                            margin-left: 46px;

                            .num {
                                margin: 30px;
                                color: #66dde9;
                            }
                        }

                        .log {
                            left: auto;
                            right: 0;
                            background: url(/img/icon/nc-num.png) no-repeat;
                        }

                        .t-l,
                        .b-l {
                            background: linear-gradient(
                                89deg,
                                rgba(102, 221, 233, 0) 0%,
                                #66dde9 51%,
                                rgba(102, 221, 233, 0) 100%
                            );
                        }
                    }

                    .pel-num {
                        margin-top: 46px;
                        background: linear-gradient(
                            88deg,
                            rgba(38, 89, 132, 0) 0%,
                            rgba(38, 89, 132, 0.5) 100%
                        );

                        .text {
                            margin-left: 108px;

                            .num {
                                margin: 48px;
                                color: #00b1ff;
                            }
                        }

                        .log {
                            left: 0;
                            right: auto;
                            background: url(/img/icon/pel-num.png) no-repeat;
                        }

                        .t-l,
                        .b-l {
                            background: linear-gradient(
                                89deg,
                                rgba(51, 98, 153, 0) 0%,
                                #508fd9 55%,
                                rgba(51, 98, 153, 0) 100%
                            );
                        }
                    }

                    .pel-num,
                    .nc-num {
                        display: flex;
                        align-items: center;
                        position: relative;

                        width: 342px;
                        height: 70px;
                        border-radius: 35px 35px 35px 35px;

                        .text {
                            font-size: 21px;
                            color: #a9d1d7;

                            .num {
                                font-size: 24px;
                                font-weight: Bold;
                            }
                        }

                        .t-l {
                            top: 0;
                            bottom: auto;
                        }

                        .b-l {
                            top: auto;
                            bottom: 0;
                        }

                        .log {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                            width: 88px;
                            height: 88px;
                            background-size: 100% 100%;
                        }

                        .t-l,
                        .b-l {
                            margin: auto;
                            position: absolute;
                            left: 0;
                            right: 0;
                            width: 217px;
                            height: 1px;
                        }
                    }
                }
            }

            .state {
              margin-top: 15px;
              font-size: 16px;
              font-weight: 400;
            .c {
                height: 288px;

                .content-box {
                    display: flex;
                    justify-content: space-around;

                    .being {
                        margin-top: 30px;
                        width: 152px;

                        .state {
                            color: #69e2ed;
                        }

                        .text {
                            .num {
                                color: #69e2ed;
                            }
                        }
                    }

                    .leisure {
                        margin-top: 30px;
                        width: 152px;

                        .state {
                            color: #c1c1c1;
                        }

                        .text {
                            .num {
                                color: #c1c1c1;
                            }
                        }
                    }

                    .being,
                    .leisure {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .echarts-box {
                            width: 152px;
                            height: 152px;
                        }

                        .state {
                            margin-top: 15px;
                            font-size: 16px;
                            font-weight: 400;
                        }

                        .text {
                            display: flex;
                            align-items: baseline;
                            margin-top: 10px;
                            display: flex;

                            .num {
                                font-size: 27px;
                            }

                            .unit {
                                margin-left: 6px;
                                font-size: 16px;
                                font-weight: 400;
                                color: #a9d1d7;
                            }
                        }
                    }
                }
            }

            .text {
              display: flex;
              align-items: baseline;
              margin-top: 10px;
              display: flex;
            .b {
                flex: 1;

              .num {
                font-size: 27px;
              }
                .title-box {
                    .text {
                        display: flex;
                    }

              .unit {
                margin-left: 6px;
                font-size: 16px;
                font-weight: 400;
                color: #a9d1d7;
              }
                    .num {
                        margin-top: -3.5px;
                        margin-left: 10px;
                        margin-right: 10px;
                        padding: 0px 6px;
                        text-align: center;
                        height: 32px;
                        font-size: 32px;
                        font-weight: bold;
                        font-family: 'DS-Digital';
                        color: #e5f302;
                        background: rgba(102, 221, 233, 0.55);
                    }

                    .unit {
                        font-weight: 400px;
                        color: #ced3d6;
                    }
                }

                .content-box {
                    padding: 7px 30px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;

                    ul {
                        flex: 1;
                        height: 100%;
                        overflow-y: auto;
                        scrollbar-width: thin;

                        li {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 60px;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.2);

                            & > div {
                                display: flex;
                                align-items: center;

                                img {
                                    width: 40px;
                                    height: 40px;
                                }

                                .text {
                                    margin-left: 16px;
                                    font-size: 18px;
                                    font-weight: 400;
                                    color: #a9d1d7;
                                }

                                .num {
                                    font-size: 18px;
                                    color: #7ccfd6;
                                }

                                .unit {
                                    font-size: 18px;
                                    font-weight: 400;
                                    color: #a9d1d7;
                                }
                            }
                        }

                        li:last-child {
                            border: none;
                        }
                    }
                }
            }
          }
        }
      }

      .b {
        flex: 1;

        .title-box {
          .text {
            display: flex;
          }

          .num {
            margin-top: -3.5px;
            margin-left: 10px;
            margin-right: 10px;
            padding: 0px 6px;
            text-align: center;
            height: 32px;
            font-size: 32px;
            font-weight: bold;
            font-family: 'DS-Digital';
            color: #e5f302;
            background: rgba(102, 221, 233, 0.55);
          }

          .unit {
            font-weight: 400px;
            color: #ced3d6;
          }
        }

        .content-box {
          padding: 7px 30px;
          display: flex;
          align-items: center;
          box-sizing: border-box;

          ul {
            flex: 1;
            height: 100%;
            overflow-y: auto;
            scrollbar-width: thin;

            li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 60px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.2);

              & > div {
                display: flex;
                align-items: center;

                img {
                  width: 40px;
                  height: 40px;
                }

                .text {
                  margin-left: 16px;
                  font-size: 18px;
                  font-weight: 400;
                  color: #a9d1d7;
                }

                .num {
                  font-size: 18px;
                  color: #7ccfd6;
                }

                .unit {
                  font-size: 18px;
                  font-weight: 400;
                  color: #a9d1d7;
                }
              }
            }

            li:last-child {
              border: none;
            }
          }
        }
      }
    }
  }

  .right-box {
    right: 0;
    background: linear-gradient(
    .right-box {
        right: 0;
        background: linear-gradient(
            -270deg,
            rgba(4, 41, 64, 0) 0%,
            #042940 100%
    );
        );

    .content {
      display: flex;
      flex-direction: column;
      right: 0;

      .t {
        height: 310px;

        .content-box {
          display: flex;
          align-items: center;
          justify-content: center;

          .equipment {
            width: 382px;
            height: 100%;
          }
        }
      }

      .c {
        height: 214px;

        .title-box {
          .text {
        .content {
            display: flex;
          }
            flex-direction: column;
            right: 0;

          .num {
            margin-top: -3.5px;
            margin-left: 10px;
            margin-right: 10px;
            padding: 0px 6px;
            text-align: center;
            height: 32px;
            font-size: 32px;
            font-weight: bold;
            font-family: 'DS-Digital';
            color: #e5f302;
            background: rgba(102, 221, 233, 0.55);
          }
            .t {
                height: 310px;

          .unit {
            font-weight: 400px;
            color: #ced3d6;
          }
                .content-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .equipment {
                        width: 382px;
                        height: 100%;
                    }
                }
            }

            .c {
                height: 214px;

                .title-box {
                    .text {
                        display: flex;
                    }

                    .num {
                        margin-top: -3.5px;
                        margin-left: 10px;
                        margin-right: 10px;
                        padding: 0px 6px;
                        text-align: center;
                        height: 32px;
                        font-size: 32px;
                        font-weight: bold;
                        font-family: 'DS-Digital';
                        color: #e5f302;
                        background: rgba(102, 221, 233, 0.55);
                    }

                    .unit {
                        font-weight: 400px;
                        color: #ced3d6;
                    }
                }

                .content-box {
                    padding: 28px 10px 0px 10px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-content: flex-start;
                    box-sizing: border-box;

                    & > div {
                        padding: 0 8px;
                        margin: 4px 4px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 117px;
                        height: 40px;
                        border: 1px solid rgba(102, 221, 233, 0.6);
                        border-radius: 4px 4px 4px 4px;
                        background: rgba(102, 221, 233, 0.4);
                        box-sizing: border-box;
                        font-size: 14px;
                        font-weight: 400;
                        color: #a9d1d7;

                        .num-unit {
                            display: flex;

                            .num {
                                font-size: 18px;
                                font-weight: 500;
                                color: #69e2ed;
                            }
                        }
                    }
                }
            }

            .b {
                flex: 1;

                .content-box {
                    display: flex;
                    align-items: center;
                    flex-direction: column;

                    .total {
                        position: relative;
                        margin-top: 25px;
                        width: 340px;
                        height: 96px;
                        background: rgba(42, 113, 149, 0.37);

                        .t-l,
                        .t-r,
                        .b-l,
                        .b-r {
                            position: absolute;
                            width: 8px;
                            height: 8px;
                        }

                        .t-l {
                            top: -1px;
                            left: -1px;
                            border-top: 2px solid #7ccfd6;
                            border-left: 2px solid #7ccfd6;
                        }

                        .t-r {
                            top: -1px;
                            right: -1px;
                            border-top: 2px solid #7ccfd6;
                            border-right: 2px solid #7ccfd6;
                        }

                        .b-l {
                            bottom: -1px;
                            left: -1px;
                            border-bottom: 2px solid #7ccfd6;
                            border-left: 2px solid #7ccfd6;
                        }

                        .b-r {
                            bottom: -1px;
                            right: -1px;
                            border-bottom: 2px solid #7ccfd6;
                            border-right: 2px solid #7ccfd6;
                        }

                        .title {
                            margin-top: 10px;
                        }

                        .price {
                            margin-top: 10px;
                            display: flex;
                            justify-content: center;

                            & > div {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-left: 2px;
                                width: 32px;
                                height: 40px;
                                font-size: 32px;
                                font-weight: bold;
                                font-family: 'DS-Digital';
                                color: #e5f302;
                                background: rgba(102, 221, 233, 0.55);
                            }
                        }
                    }

                    .trend {
                        flex: 1;
                        margin-top: 20px;
                        width: 372px;
                    }
                }
            }
        }
    }

        .content-box {
          padding: 28px 10px 0px 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: space-between;
          box-sizing: border-box;
    .left-box,
    .right-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        width: 450px;
        height: 100%;

          & > div {
            padding: 0 10px;
        .content {
            position: absolute;
            top: 0;
            width: 396px;
            height: 100%;
            font-size: 18px;
            font-weight: bold;
            color: #6de9f3;

            & > div {
                position: relative;
                margin-top: 28px;

                .title-box {
                    position: absolute;
                    display: flex;
                    height: 34px;

                    .icon {
                        margin-top: 5px;
                        margin-left: 16px;
                        width: 10px;
                        height: 14px;
                        background: url(/img/icon/l-icon.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .text {
                        margin-left: 10px;
                    }

                    .em {
                        position: absolute;
                        top: 3px;
                        right: -54px;
                        width: 74px;
                        height: 19px;
                        background: url(/img/icon/r-icon.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .l {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 378px;
                        height: 5px;
                        background: url(/img/icon/line.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .r {
                        position: absolute;
                        left: 378px;
                        bottom: 0;
                        width: 20px;
                        height: 3px;
                        background: url(/img/icon/r-line.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .content-box {
                    position: absolute;
                    top: 34px;
                    width: 100%;
                    height: calc(100% - 34px);
                }
            }
        }
    }

    .down-menu {
        display: flex;
        // align-items: center;
        justify-content: space-around;
        flex-direction: column;
        position: absolute;
        top: 102px;
        left: 438px;
        width: 146px;
        height: 156px;

        & > div {
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 120px;
            height: 40px;
            border: 1px solid rgba(102, 221, 233, 0.6);
            border-radius: 4px 4px 4px 4px;
            background: rgba(102, 221, 233, 0.4);
            height: 46px;
            background: rgba(3, 50, 82, 0.4);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #69e2ed;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: 400;
            color: #a9d1d7;
            font-size: 18px;
            color: #6de9f3;

            .num-unit {
              display: flex;

              .num {
                font-size: 18px;
                font-weight: 500;
                color: #69e2ed;
              }
            i {
                font-size: 12px;
            }
          }
        }
      }

      .b {
        flex: 1;

        .content-box {
          display: flex;
          align-items: center;
          flex-direction: column;

          .total {
            position: relative;
            margin-top: 25px;
            width: 340px;
            height: 96px;
            background: rgba(42, 113, 149, 0.37);

            .t-l,
            .t-r,
            .b-l,
            .b-r {
              position: absolute;
              width: 8px;
              height: 8px;
            }

            .t-l {
              top: -1px;
              left: -1px;
              border-top: 2px solid #7ccfd6;
              border-left: 2px solid #7ccfd6;
            }

            .t-r {
              top: -1px;
              right: -1px;
              border-top: 2px solid #7ccfd6;
              border-right: 2px solid #7ccfd6;
            }

            .b-l {
              bottom: -1px;
              left: -1px;
              border-bottom: 2px solid #7ccfd6;
              border-left: 2px solid #7ccfd6;
            }

            .b-r {
              bottom: -1px;
              right: -1px;
              border-bottom: 2px solid #7ccfd6;
              border-right: 2px solid #7ccfd6;
            }

            .title {
              margin-top: 10px;
            }

            .price {
              margin-top: 10px;
              display: flex;
              justify-content: center;

              & > div {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 2px;
                width: 32px;
                height: 40px;
                font-size: 32px;
                font-weight: bold;
                font-family: 'DS-Digital';
                color: #e5f302;
                background: rgba(102, 221, 233, 0.55);
              }
            }
          }

          .trend {
            flex: 1;
            margin-top: 20px;
            width: 372px;
          }
        }
      }
    }
  }

  .left-box,
  .right-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 450px;
    height: 100%;

    .content {
      position: absolute;
      top: 0;
      width: 396px;
      height: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #6de9f3;

      & > div {
        position: relative;
        margin-top: 28px;

        .title-box {
          position: absolute;
          display: flex;
          height: 34px;

          .icon {
            margin-top: 5px;
            margin-left: 16px;
            width: 10px;
            height: 14px;
            background: url(/img/icon/l-icon.png) no-repeat;
            background-size: 100% 100%;
          }

          .text {
            margin-left: 10px;
          }

          .em {
            position: absolute;
            top: 3px;
            right: -54px;
            width: 74px;
            height: 19px;
            background: url(/img/icon/r-icon.png) no-repeat;
            background-size: 100% 100%;
          }

          .l {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 378px;
            height: 5px;
            background: url(/img/icon/line.png) no-repeat;
            background-size: 100% 100%;
          }

          .r {
            position: absolute;
            left: 378px;
            bottom: 0;
            width: 20px;
            height: 3px;
            background: url(/img/icon/r-line.png) no-repeat;
            background-size: 100% 100%;
          }
        }

        .content-box {
          position: absolute;
          top: 34px;
          width: 100%;
          height: calc(100% - 34px);
        }
      }
    }
  }

  .down-menu {
    display: flex;
    // align-items: center;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    top: 102px;
    left: 438px;
    width: 146px;
    height: 156px;

    & > div {
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 46px;
      background: rgba(3, 50, 82, 0.4);
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #69e2ed;
      box-sizing: border-box;
      font-size: 18px;
      color: #6de9f3;

      i {
        font-size: 12px;
      }
    }
  }

  .city-flow {
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 104px;
    right: 468px;
    width: 124px;
    height: 40px;
    background: rgba(3, 50, 82, 0.5);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #69e2ed;
    font-size: 14px;
    color: #6de9f3;
    box-sizing: border-box;

    .icon {
      width: 24px;
      height: 24px;
      background: url(/img/icon/city-flow.png) no-repeat;
      background-size: 100% 100%;
    }

    span {
      margin-left: 8px;
    }
  }

  .layers-box {
    display: flex;
    position: absolute;
    left: 438px;
    bottom: 16px;

    .sl {
      background: url(/img/icon/SL.jpg) no-repeat;
    }

    .yx {
      margin-left: 16px;
      background: url(/img/icon/YX.jpg) no-repeat;
    }

    .sl,
    .yx {
      position: relative;
      width: 80px;
      height: 80px;
      background-size: 100% 100%;
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;

      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: rgba(4, 41, 64, 0.36);
        font-size: 14px;
        color: #fff;
        line-height: 30px;
      }
    }

    & > div.on {
      .text {
        color: #08f4ff;
      }

      border: 1px solid #18fefe;
    }
  }

  .lenged-box {
    position: absolute;
    right: 422px;
    bottom: 96px;
    width: 150px;
    height: 242px;
    background: rgba(2, 26, 38, 0.8);

    ul {
      display: flex;
      // align-items: center;
      justify-content: space-around;
      flex-direction: column;
      width: 100%;
      height: 100%;

      li {
        font-size: 18px;
        color: #6de9f3;
    .city-flow {
        padding: 0 12px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 104px;
        right: 468px;
        width: 124px;
        height: 40px;
        background: rgba(3, 50, 82, 0.5);
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #69e2ed;
        font-size: 14px;
        color: #6de9f3;
        box-sizing: border-box;

        .icon {
          margin-left: 20px;
          width: 24px;
          height: 24px;
            width: 24px;
            height: 24px;
            background: url(/img/icon/city-flow.png) no-repeat;
            background-size: 100% 100%;
        }

        .title {
          margin-left: 20px;
        span {
            margin-left: 8px;
        }
      }

      li:nth-child(1) {
        .icon {
          background: url(/img/icon/nc.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      li:nth-child(2) {
        .icon {
          background: rgba(129, 255, 84, 0.2);
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #81ff54;
          box-sizing: border-box;
        }
      }

      li:nth-child(3) {
        .icon {
          background: url(/img/icon/jk.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      li:nth-child(4) {
        .icon {
          background: url(/img/icon/tr.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      li:nth-child(5) {
        .icon {
          background: url(/img/icon/qx.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

    .layers-box {
        display: flex;
        position: absolute;
        left: 438px;
        bottom: 16px;

        .sl {
            background: url(/img/icon/SL.jpg) no-repeat;
        }

        .yx {
            margin-left: 16px;
            background: url(/img/icon/YX.jpg) no-repeat;
        }

        .sl,
        .yx {
            position: relative;
            width: 80px;
            height: 80px;
            background-size: 100% 100%;
            border-radius: 4px;
            box-sizing: border-box;
            overflow: hidden;

            .text {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                background: rgba(4, 41, 64, 0.36);
                font-size: 14px;
                color: #fff;
                line-height: 30px;
            }
        }

        & > div.on {
            .text {
                color: #08f4ff;
            }

            border: 1px solid #18fefe;
        }
    }

    .lenged-box {
        position: absolute;
        right: 422px;
        bottom: 96px;
        width: 150px;
        height: 242px;
        background: rgba(2, 26, 38, 0.8);

        ul {
            display: flex;
            // align-items: center;
            justify-content: space-around;
            flex-direction: column;
            width: 100%;
            height: 100%;

            li {
                font-size: 18px;
                color: #6de9f3;
                display: flex;

                .icon {
                    margin-left: 20px;
                    width: 24px;
                    height: 24px;
                }

                .title {
                    margin-left: 20px;
                }
            }

            li:nth-child(1) {
                .icon {
                    background: url(/img/icon/nc.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            li:nth-child(2) {
                .icon {
                    background: rgba(129, 255, 84, 0.2);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #81ff54;
                    box-sizing: border-box;
                }
            }

            li:nth-child(3) {
                .icon {
                    background: url(/img/icon/jk.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            li:nth-child(4) {
                .icon {
                    background: url(/img/icon/tr.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            li:nth-child(5) {
                .icon {
                    background: url(/img/icon/qx.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }

    .popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(7, 7, 7, 0.4);

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 1208px;
            height: 708px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>

 src/views/lyout/index.vue

@@ -15,7 +15,7 @@
                        :data-path="'/lyout/monitor'"
                    >遥感监测</div>
                </div>
                <div class="c">智慧农业数据资源管控大屏</div>
                <div class="c">南城县智慧农业综合监管平台</div>
                <div class="r">
                    <div
                        class="nav"

 src/views/manage/index.vue

@@ -1,264 +1,265 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-06-28 16:54:18
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-01 12:00:07
* 经营主体监管
*/
<template>
  <div class="container">
    <div class="toggle-plot">
      选择农场
      <i class="el-icon-arrow-down"></i>
    <div class="container">
        <div class="toggle-plot">
            选择农场
            <i class="el-icon-arrow-down"></i>
        </div>
        <div class="main-content">
            <div class="t">
                <statistics-num
                    :className="'td'"
                    :totalRegion="545.01"
                    :imgUrl="'/img/icon/mj.png'"
                    :unit="'亩'"
                    :title="'土地面积'"
                    :subOneTitle="'使用面积'"
                    :subOneNum="545.01"
                    :subTwoTitle="'未使用面积'"
                    :subTwoNum="0"
                ></statistics-num>
                <statistics-num
                    :className="'kc'"
                    :totalRegion="652"
                    :imgUrl="'/img/icon/kc.png'"
                    :unit="'公斤'"
                    :title="'库存数量'"
                    :subOneTitle="'农产品'"
                    :subOneNum="652"
                    :subTwoTitle="'加工产品'"
                    :subTwoNum="0"
                ></statistics-num>
                <statistics-num
                    :className="'nz'"
                    :totalRegion="198"
                    :imgUrl="'/img/icon/syl.png'"
                    :unit="'公斤'"
                    :title="'农资年使用量'"
                    :subOneTitle="'去年使用'"
                    :subOneNum="232"
                    :subTwoTitle="'本月使用'"
                    :subTwoNum="0"
                ></statistics-num>
                <statistics-num
                    :className="'cl'"
                    :totalRegion="6256"
                    :imgUrl="'/img/icon/ncl.png'"
                    :unit="'公斤'"
                    :title="'年产量'"
                    :subOneTitle="'农产品'"
                    :subOneNum="4500"
                    :subTwoTitle="'加工产品'"
                    :subTwoNum="1756"
                ></statistics-num>
                <statistics-num
                    :className="'lt'"
                    :totalRegion="2678"
                    :imgUrl="'/img/icon/lt.png'"
                    :unit="'公斤'"
                    :title="'市场流通量'"
                    :subOneTitle="'去年流通量'"
                    :subOneNum="5280"
                    :subTwoTitle="'本月流通量'"
                    :subTwoNum="0"
                ></statistics-num>
            </div>
            <div class="c">
                <div class="time-box">
                    <time-box
                        :imgUrl="'/img/icon/current.png'"
                        :title="'溯源次数'"
                        :currentNum="34"
                        :subTitle="'昨日溯源次数对比'"
                        :contrast="28"
                        :upDown="'up'"
                    ></time-box>
                    <time-box
                        :imgUrl="'/img/icon/week.png'"
                        :title="'溯源次数'"
                        :currentNum="61"
                        :subTitle="'上周溯源次数对比'"
                        :contrast="36"
                        :upDown="'up'"
                    ></time-box>
                    <time-box
                        :imgUrl="'/img/icon/month.png'"
                        :title="'溯源次数'"
                        :currentNum="88"
                        :subTitle="'上月溯源次数对比'"
                        :contrast="96"
                        :upDown="'down'"
                    ></time-box>
                </div>
                <div class="task-box">
                    <div class="title">任务总数</div>

                    <date-select></date-select>

                    <div class="echarts-box" id="TaskNumEcharts"></div>
                </div>
                <div class="nz-ncp">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on: nzOrNcp == 'ncp'}">
                                <div @click="nzOrNcp = 'ncp'" class="title">农产品投入</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on: nzOrNcp == 'nz'}">
                                <div @click="nzOrNcp = 'nz'" class="title">农资投入</div>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <date-select></date-select>
                    <div v-if="nzOrNcp == 'ncp'" class="lists-box">
                        <div>
                            <div>1</div>
                            <div>水稻</div>
                            <div>545.01亩</div>
                        </div>
                        <div>
                            <div>2</div>
                            <div>玉米</div>
                            <div>75.12亩</div>
                        </div>
                    </div>
                    <div v-if="nzOrNcp == 'nz'" class="lists-box">
                        <div>
                            <div>1</div>
                            <div>有机肥料</div>
                            <div>120公斤</div>
                        </div>
                        <div>
                            <div>2</div>
                            <div>复合肥料</div>
                            <div>68公斤</div>
                        </div>
                    </div>
                </div>
                <div class="trp-ncp">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on: trpOrNcp == 'trp'}">
                                <div @click="trpOrNcp = 'trp'" class="title">投入品监管</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on: trpOrNcp == 'ncp'}">
                                <div @click="trpOrNcp = 'ncp'" class="title">农产品监管</div>
                                <span></span>
                            </div>
                        </div>

                        <div class="more">
                            明细
                            <img src="/img/icon/more.png" alt />
                        </div>
                    </div>

                    <div v-if="trpOrNcp == 'trp'" class="echarts-box" id="TrpEcharts"></div>
                    <div v-if="trpOrNcp == 'ncp'" class="echarts-box" id="NcpEcharts"></div>
                </div>
            </div>
            <div class="b">
                <div class="cl-sy">
                    <div class="title-box">
                        <div>
                            <div class="item on">
                                <div class="title">产量统计</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item">
                                <div class="title">溯源查询趋势图</div>
                                <span></span>
                            </div>
                        </div>

                        <div class="date">
                            <date-select></date-select>
                        </div>
                    </div>

                    <div class="echarts-box" id="ClSyEcharts"></div>
                </div>
                <div class="ns-nz">
                    <div class="title-box">
                        <div>
                            <div class="item on">
                                <div class="title">农事记录</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item">
                                <div class="title">农资出入库记录</div>
                                <span></span>
                            </div>
                        </div>

                        <div class="more">
                            更多
                            <img src="/img/icon/more.png" alt />
                        </div>
                    </div>

                    <div class="lists-box">
                        <div>
                            <div class="t-border"></div>
                            <div class="t-item">
                                <div>施肥</div>
                                <div>2022-06-31</div>
                            </div>
                            <div class="b-item">
                                <div>水稻</div>
                                <div>林术</div>
                                <div>株良镇田南村5号地块</div>
                            </div>
                            <div class="b-border"></div>
                        </div>

                        <div>
                            <div class="t-border"></div>
                            <div class="t-item">
                                <div>施肥</div>
                                <div>2022-06-31</div>
                            </div>
                            <div class="b-item">
                                <div>水稻</div>
                                <div>王刚</div>
                                <div>株良镇田南村3号地块</div>
                            </div>
                            <div class="b-border"></div>
                        </div>

                        <div>
                            <div class="t-border"></div>
                            <div class="t-item">
                                <div>施肥</div>
                                <div>2022-06-31</div>
                            </div>
                            <div class="b-item">
                                <div>玉米</div>
                                <div>李建国</div>
                                <div>株良镇田南村1号地块</div>
                            </div>
                            <div class="b-border"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-content">
      <div class="t">
        <statistics-num
            :className="'td'"
            :totalRegion=znum
            :imgUrl="'/img/icon/mj.png'"
            :unit="'亩'"
            :title="'土地面积'"
            :subOneTitle="'使用面积'"
            :subOneNum=landsnum
            :subTwoTitle="'未使用面积'"
            :subTwoNum=landwnum
        ></statistics-num>
        <statistics-num
            :className="'kc'"
            :totalRegion="'700'"
            :imgUrl="'/img/icon/kc.png'"
            :unit="'公斤'"
            :title="'库存数量'"
            :subOneTitle="'农产品'"
            :subOneNum="'300'"
            :subTwoTitle="'加工产品'"
            :subTwoNum="'300'"
        ></statistics-num>
        <statistics-num
            :className="'nz'"
            :totalRegion=jnStock
            :imgUrl="'/img/icon/syl.png'"
            :unit="'公斤'"
            :title="'农资年使用量'"
            :subOneTitle="'去年使用'"
            :subOneNum=qnStock
            :subTwoTitle="'本月使用'"
            :subTwoNum=byStock
        ></statistics-num>
        <statistics-num
            :className="'cl'"
            :totalRegion="'700'"
            :imgUrl="'/img/icon/ncl.png'"
            :unit="'公斤'"
            :title="'年产量'"
            :subOneTitle="'农产品'"
            :subOneNum="'300'"
            :subTwoTitle="'加工产品'"
            :subTwoNum="'300'"
        ></statistics-num>
        <statistics-num
            :className="'lt'"
            :totalRegion="'700'"
            :imgUrl="'/img/icon/lt.png'"
            :unit="'公斤'"
            :title="'市场流通量'"
            :subOneTitle="'去年流通量'"
            :subOneNum="'300'"
            :subTwoTitle="'本月流通量'"
            :subTwoNum="'300'"
        ></statistics-num>
      </div>
      <div class="c">
        <div class="time-box">
          <time-box
              :imgUrl="'/img/icon/current.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
              :subTitle="'昨日溯源次数对比'"
              :contrast="'25'"
          ></time-box>
          <time-box
              :imgUrl="'/img/icon/week.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
              :subTitle="'上周溯源次数对比'"
              :contrast="'25'"
          ></time-box>
          <time-box
              :imgUrl="'/img/icon/month.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
              :subTitle="'上月溯源次数对比'"
              :contrast="'25'"
          ></time-box>
        </div>
        <div class="task-box">
          <div class="title">任务总数</div>

          <date-select></date-select>

          <div class="echarts-box" id="TaskNumEcharts"></div>
        </div>
        <div class="nz-ncp">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">农产品投入</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">农资投入</div>
                <span></span>
              </div>
            </div>
          </div>
          <date-select></date-select>
          <div class="lists-box">
            <div>
              <div>1</div>
              <div>水稻</div>
              <div>1001亩</div>
            </div>
            <div>
              <div>2</div>
              <div>水稻</div>
              <div>1001亩</div>
            </div>
            <div>
              <div>3</div>
              <div>水稻</div>
              <div>1001亩</div>
            </div>
            <div>
              <div>4</div>
              <div>水稻</div>
              <div>1001亩</div>
            </div>
            <div>
              <div>5</div>
              <div>水稻</div>
              <div>1001亩</div>
            </div>
          </div>
        </div>
        <div class="trp-ncp">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">投入品监管</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">农产品监管</div>
                <span></span>
              </div>
            </div>

            <div class="more">
              明细
              <img src="/img/icon/more.png" alt/>
            </div>
          </div>

          <div class="echarts-box" id="TrpNcpEcharts"></div>
        </div>
      </div>
      <div class="b">
        <div class="cl-sy">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">产量统计</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">溯源查询趋势图</div>
                <span></span>
              </div>
            </div>

            <div class="date">
              <date-select></date-select>
            </div>
          </div>

          <div class="echarts-box" id="ClSyEcharts"></div>
        </div>
        <div class="ns-nz">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">农事记录</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">农资出入库记录</div>
                <span></span>
              </div>
            </div>

            <div class="more">
              更多
              <img src="/img/icon/more.png" alt/>
            </div>
          </div>

          <div class="lists-box">
            <div>
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
              </div>
              <div class="b-border"></div>
            </div>

            <div>
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
              </div>
              <div class="b-border"></div>
            </div>

            <div>
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
              </div>
              <div class="b-border"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
@@ -267,854 +268,949 @@
import { page, getStockCount, pagePalnt } from '@/api/farm/farmingrecord'

export default {
  data () {
    return {
      landsnum: 0,
      landwnum: 0,
      znum: 0,
      jnStock: 0,
      qnStock: 0,
      byStock: 0,
      farmPlanList: []
    }
  },
  created () {
    this.selectXCount()
    this.getStockCount()
    this.page()
  },
  mounted () {
    this.initBar('TaskNumEcharts')
    this.initTrpNcpBar('TrpNcpEcharts')
    this.initClSyBar('ClSyEcharts')
  },
  methods: {
    initBar (dom) {
      const that = this
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)
    data () {
        return {
            landsnum: 0,
            landwnum: 0,
            znum: 0,
            jnStock: 0,
            qnStock: 0,
            byStock: 0,
            farmPlanList: [],
            nzOrNcp: 'ncp',
            trpOrNcp: 'trp'
        }
    },
    created () {
        this.selectXCount()
        this.getStockCount()
        this.page()
    },
    mounted () {
        this.initBar('TaskNumEcharts')
        this.initTrpBar('TrpEcharts')
        // this.initNcpBar('NcpEcharts')
        this.initClSyBar('ClSyEcharts')
    },
    methods: {
        initBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

      const option = {
        grid: {
          top: '14%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [
            '2019-06',
            '2019-07',
            '2019-08'
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(153,153,153,.4)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255,255,255,.4)',
            rotate: 0
          }
        },
        yAxis: {
          max: 50,
          name: '（次）',
          nameTextStyle: {
            color: 'rgba(255,255,255,.4)'
          },
          axisLine: {
            lineStyle: {
              color: '#657CA8'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(62,81,97, .5)',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,.4)'
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 32,
            data: [30, 40, 20],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(255,255,255,.4)'
              }
            },
            itemStyle: {
              normal: {
                color:

                    function (params) {
                      var colorList = [
                        ['#24A5DF', '#01E2D2'],
                        ['#E59438', '#FEF880 '],
                        ['#E34C4C', '#E6945E']
                      ]
                      var index = params.dataIndex
                      if (params.dataIndex >= colorList.length) {
                        index = params.dataIndex - colorList.length
                      }
                      return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: colorList[index][0]
                        },
                        {
                          offset: 0.5,
                          color: colorList[index][0]
                        },
                        {
                          offset: 1,
                          color: colorList[index][1]
            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '2019-06',
                        '2019-07',
                        '2019-08'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                      ])
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 50,
                    name: '（次）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: [30, 40, 20],
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color:

              }
                                    function (params) {
                                        var colorList = [
                                            ['#24A5DF', '#01E2D2'],
                                            ['#E59438', '#FEF880 '],
                                            ['#E34C4C', '#E6945E']
                                        ]
                                        var index = params.dataIndex
                                        if (params.dataIndex >= colorList.length) {
                                            index = params.dataIndex - colorList.length
                                        }
                                        return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: colorList[index][0]
                                            },
                                            {
                                                offset: 0.5,
                                                color: colorList[index][0]
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[index][1]
                                            }
                                        ])
                                    }

                            }
                        }
                    }
                ]
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },

    initTrpNcpBar (dom) {
      const that = this
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)

      const option = {
        grid: {
          top: '14%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
            option && myChart.setOption(option)
        },
        xAxis: {
          type: 'category',
          data: [
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥'
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(153,153,153,.4)'

        initTrpBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '有机肥料',
                        '复合肥料'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 600,
                    name: '（公斤）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: [500, 60],
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color:

                                    new that.$echarts.graphic.LinearGradient(
                                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                        // 通过修改前4个参数，可以实现不同的渐变方向
                                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                          每项为一个对象，包含offset和color两个参数
                                        */
                                        0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                            offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                            color: '#24A5DF'
                                        }, // 柱图渐变色
                                        {
                                            offset: 1, // 指100%处的颜色
                                            color: '#01E2D2'
                                        }
                                    ]
                                    )

                            }
                        }
                    }
                ]
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255,255,255,.4)',
            rotate: 0
          }

            option && myChart.setOption(option)
        },
        yAxis: {
          max: 50,
          name: '（公斤）',
          nameTextStyle: {
            color: 'rgba(255,255,255,.4)'
          },
          axisLine: {
            lineStyle: {
              color: '#657CA8'

        initNcpBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '有机肥料',
                        '复合肥料'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 600,
                    name: '（公斤）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: [500, 60],
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color:

                                    new that.$echarts.graphic.LinearGradient(
                                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                        // 通过修改前4个参数，可以实现不同的渐变方向
                                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                          每项为一个对象，包含offset和color两个参数
                                        */
                                        0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                            offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                            color: '#24A5DF'
                                        }, // 柱图渐变色
                                        {
                                            offset: 1, // 指100%处的颜色
                                            color: '#01E2D2'
                                        }
                                    ]
                                    )

                            }
                        }
                    }
                ]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(62,81,97, .5)',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,.4)'
          }

            option && myChart.setOption(option)
        },
        series: [
          {
            type: 'bar',
            barWidth: 32,
            data: [23, 44, 34, 41, 16, 30, 40],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(255,255,255,.4)'
              }
            },
            itemStyle: {
              normal: {
                color:

                    new that.$echarts.graphic.LinearGradient(
                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                        // 通过修改前4个参数，可以实现不同的渐变方向
                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                        0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                          offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                          color: '#24A5DF'
                        }, // 柱图渐变色
                          {
                            offset: 1, // 指100%处的颜色
                            color: '#01E2D2'
                          }
                        ]
                    )
        initClSyBar (dom) {
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

              }
            var data = [
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12'
            ]
            var data1 = [
                '180',
                '320',
                '400',
                '200',
                '110',
                '180',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
            ]
            var data2 = [
                '0',
                '0',
                '0',
                '260',
                '0',
                '230',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
            ]

            const option = {
                grid: {
                    top: '10%',
                    right: '0%',
                    left: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    left: 'center',
                    data: ['加工产品', '农产品'],
                    textStyle: {
                        color: '#A9D1D7'
                    }
                },
                xAxis: {
                    data: data,
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: 'rgba(255,255,255,0.6)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#697B89',
                            width: 1
                        }
                    }
                },
                yAxis: [
                    {
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: '#B4B5BE'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '加工产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#E29646'
                            }
                        },
                        data: data1
                    },
                    {
                        name: '农产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#6AE081'
                            }
                        },
                        data: data2
                    }
                ]
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },

    initClSyBar (dom) {
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)

      var data = [
        '01',
      ]
      var data1 = [
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25',
        '25'
      ]
      var data2 = [
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30',
        '30'
      ]

      const option = {
        grid: {
          top: '10%',
          right: '0%',
          left: '0%',
          bottom: '0%',
          containLabel: true
            option && myChart.setOption(option)
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        // 农场使用率
        selectXCount () {
            // eslint-disable-next-line no-unused-vars
            var that = this
            var deptId = '1123598813738675201'
            selectXCount(deptId).then((res) => {
                that.landsnum = res.data.data.snum
                that.landwnum = res.data.data.wnum
                that.znum = res.data.data.num
            })
        },
        legend: {
          left: 'center',
          data: ['加工产品', '农产品'],
          textStyle: {
            color: '#A9D1D7'
          }
        // 农资使用概况
        getStockCount () {
            var that = this
            var deptId = '1123598813738675201'
            getStockCount(deptId).then((res) => {
                that.jnStock = res.data.data.jn
                that.qnStock = res.data.data.qn
                that.byStock = res.data.data.by
            })
        },
        xAxis: {
          data: data,
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.6)'
        // 农事记录
        page () {
            var params = {
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#697B89',
              width: 1
            }
          }
        },
        yAxis: [
          {
            min: 0,
            max: 50,
            type: 'value',
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: '#B4B5BE'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#697B89',
                width: 1
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(62,81,97, .5)',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '加工产品',
            type: 'bar',
            barWidth: 14,
            silent: true,
            itemStyle: {
              normal: {
                color: '#E29646'
              }
            },
            data: data1
          },
          {
            name: '农产品',
            type: 'bar',
            barWidth: 14,
            silent: true,
            itemStyle: {
              normal: {
                color: '#6AE081'
              }
            },
            data: data2
          }
        ]
      }
            params.tenantId = '000000'
            params.deptId = '1123598813738675201'
            page(1, 10, Object.assign(params)).then((res) => {
                this.farmPlanList = res.data.data.records
            })
        }

      option && myChart.setOption(option)
    },
    // 农场使用率
    selectXCount () {
      // eslint-disable-next-line no-unused-vars
      var that = this
      var deptId = '1123598813738675201'
      selectXCount(deptId).then((res) => {
        that.landsnum = res.data.data.snum
        that.landwnum = res.data.data.wnum
        that.znum = res.data.data.num
      })
    },
    // 农资使用概况
    getStockCount () {
      var that = this
      var deptId = '1123598813738675201'
      getStockCount(deptId).then((res) => {
        that.jnStock = res.data.data.jn
        that.qnStock = res.data.data.qn
        that.byStock = res.data.data.by
      })
    },
    // 农事记录
    page () {
      var params = {
      }
      params.tenantId = '000000'
      params.deptId = '1123598813738675201'
      page(1, 10, Object.assign(params)).then((res) => {
        this.farmPlanList = res.data.data.records
      })
    }

  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  background: #08192e;
  box-sizing: border-box;
    padding: 20px;
    position: relative;
    width: 100%;
    height: 100%;
    background: #08192e;
    box-sizing: border-box;

  .toggle-plot {
    text-align: left;
    height: 36px;
    line-height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
  }

  .main-content {
    margin-top: 10px;
    height: calc(100% - 46px);
    display: flex;
    flex-direction: column;

    .t {
      display: flex;
      justify-content: space-between;

      & > div:first-child {
        margin-left: 0;
      }
    .toggle-plot {
        text-align: left;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
    }

    .c {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      & > div {
        margin-left: 20px;
        width: calc((100% - 80px) / 5);
        height: 346px;
        border-radius: 8px 8px 8px 8px;
        background: rgba(0, 52, 85, 0.4);
      }

      & > div:first-child {
        margin-left: 0;
      }

      & > div:last-child {
        width: calc((100% - 80px) / 5 * 2 + 20px);
      }

      .time-box {
        padding: 0 25px;
    .main-content {
        margin-top: 10px;
        height: calc(100% - 46px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        & > div:last-child {
          border: none;
        }
      }

      .task-box {
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .title {
          text-align: left;
          font-size: 18px;
          font-weight: bold;
          color: #7ccfd6;
        }

        .echarts-box {
          margin-top: 16px;
          flex: 1;
        }
      }

      .nz-ncp {
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .title-box {
          display: flex;

          & > div {
        .t {
            display: flex;
            align-items: flex-start;
            font-size: 18px;
            color: #a9d1d7;

            .on {
              position: relative;
              font-weight: bold;
              color: #7ccfd6;

              span {
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 100%;
                height: 3px;
                border-radius: 3px;
                background: #66dde9;
              }
            }
          }

          & > div:nth-child(2) {
            margin-left: 60px;
          }
        }

        .lists-box {
          margin-top: 16px;
          flex: 1;
          overflow-y: auto;

          & > div:nth-child(even) {
            background: rgba(102, 221, 233, 0.1);
          }

          & > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 48px;
            font-size: 18px;
            color: #a9d1d7;

            & > div:first-child {
              margin-left: 16px;
                margin-left: 0;
            }
        }

        .c {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            & > div {
                margin-left: 20px;
                width: calc((100% - 80px) / 5);
                height: 346px;
                border-radius: 8px 8px 8px 8px;
                background: rgba(0, 52, 85, 0.4);
            }

            & > div:first-child {
                margin-left: 0;
            }

            & > div:last-child {
              margin-right: 18px;
              color: #66dde9;
                width: calc((100% - 80px) / 5 * 2 + 20px);
            }
          }
        }
      }

      .trp-ncp {
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
            .time-box {
                padding: 0 25px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

        .title-box {
          position: relative;
          display: flex;

          & > div {
            display: flex;
            align-items: flex-start;
            font-size: 18px;
            color: #a9d1d7;

            .on {
              position: relative;
              font-weight: bold;
              color: #7ccfd6;

              span {
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 100%;
                height: 3px;
                border-radius: 3px;
                background: #66dde9;
              }
                & > div:last-child {
                    border: none;
                }
            }
          }

          & > div:nth-child(2) {
            margin-left: 60px;
          }
            .task-box {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

          .more {
            position: absolute;
            top: 0;
            left: auto;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            font-size: 16px;
                .title {
                    text-align: left;
                    font-size: 18px;
                    font-weight: bold;
                    color: #7ccfd6;
                }

            img {
              margin-left: 6px;
              vertical-align: middle;
                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }
          }

            .nz-ncp {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }
                }

                .lists-box {
                    margin-top: 16px;
                    flex: 1;
                    overflow-y: auto;

                    & > div:nth-child(even) {
                        background: rgba(102, 221, 233, 0.1);
                    }

                    & > div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        line-height: 48px;
                        font-size: 18px;
                        color: #a9d1d7;

                        & > div:first-child {
                            margin-left: 16px;
                        }

                        & > div:last-child {
                            margin-right: 18px;
                            color: #66dde9;
                        }
                    }
                }
            }

            .trp-ncp {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .more {
                        position: absolute;
                        top: 0;
                        left: auto;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        font-size: 16px;

                        img {
                            margin-left: 6px;
                            vertical-align: middle;
                        }
                    }
                }

                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }
        }

        .echarts-box {
          margin-top: 16px;
          flex: 1;
        }
      }
    }

    .b {
      margin-top: 20px;
      flex: 1;
      display: flex;
      justify-content: space-between;

      & > div {
        margin-left: 20px;
        border-radius: 8px 8px 8px 8px;
        background: rgba(0, 52, 85, 0.4);
      }

      & > div:first-child {
        margin-left: 0;
        flex: 1;
      }

      & > div:last-child {
        width: 444px;
      }

      .cl-sy {
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .title-box {
          height: 34px;
          position: relative;
          display: flex;

          & > div {
            display: flex;
            align-items: flex-start;
            font-size: 18px;
            color: #a9d1d7;

            .on {
              position: relative;
              font-weight: bold;
              color: #7ccfd6;

              span {
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 100%;
                height: 3px;
                border-radius: 3px;
                background: #66dde9;
              }
            }
          }

          & > div:nth-child(2) {
            margin-left: 60px;
          }

          .date {
            position: absolute;
            top: -20px;
            left: auto;
            right: 0;
            bottom: auto;
            margin: auto;
            width: 320px;
          }
        }

        .echarts-box {
          margin-top: 16px;
          flex: 1;
        }
      }

      .ns-nz {
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .title-box {
          position: relative;
          display: flex;

          & > div {
            display: flex;
            align-items: flex-start;
            font-size: 18px;
            color: #a9d1d7;

            .on {
              position: relative;
              font-weight: bold;
              color: #7ccfd6;

              span {
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 100%;
                height: 3px;
                border-radius: 3px;
                background: #66dde9;
              }
            }
          }

          & > div:nth-child(2) {
            margin-left: 60px;
          }

          .more {
            position: absolute;
            top: 0;
            left: auto;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            font-size: 16px;

            img {
              margin-left: 6px;
              vertical-align: middle;
            }
          }
        }

        .lists-box {
          margin-top: 16px;
          flex: 1;

          display: flex;
          flex-direction: column;

          & > div {
            position: relative;
        .b {
            margin-top: 20px;
            flex: 1;
            margin-top: 10px;
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            background: rgba(102, 221, 233, 0.1);
            border-radius: 8px;
            font-size: 18px;
            color: #a9d1d7;

            & > .t-item {
              display: flex;
              align-items: center;
              justify-content: space-between;

              & > div:first-child {
                font-weight: bold;
                color: #66dde9;
              }
            & > div {
                margin-left: 20px;
                border-radius: 8px 8px 8px 8px;
                background: rgba(0, 52, 85, 0.4);
            }

            & > .b-item {
              display: flex;
              align-items: center;
              justify-content: space-between;

              & > div:first-child {
                color: #fff;
              }
            & > div:first-child {
                margin-left: 0;
                flex: 1;
            }

            .t-border {
              top: 0;
              bottom: auto;
            & > div:last-child {
                width: 444px;
            }

            .b-border {
              top: auto;
              bottom: 0;
            .cl-sy {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    height: 34px;
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .date {
                        position: absolute;
                        top: -20px;
                        left: auto;
                        right: 0;
                        bottom: auto;
                        margin: auto;
                        width: 320px;
                    }
                }

                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }

            .t-border,
            .b-border {
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              width: 80%;
              height: 1px;
              background: linear-gradient(
                      89deg,
                      rgba(102, 221, 233, 0) 0%,
                      #66dde9 51%,
                      rgba(102, 221, 233, 0) 100%
              );
            }
          }
            .ns-nz {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

          & > div:first-child {
            margin-top: 10px;
          }
                .title-box {
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .more {
                        position: absolute;
                        top: 0;
                        left: auto;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        font-size: 16px;

                        img {
                            margin-left: 6px;
                            vertical-align: middle;
                        }
                    }
                }

                .lists-box {
                    margin-top: 16px;
                    flex: 1;

                    display: flex;
                    flex-direction: column;

                    & > div {
                        position: relative;
                        flex: 1;
                        margin-top: 10px;
                        padding: 10px 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        background: rgba(102, 221, 233, 0.1);
                        border-radius: 8px;
                        font-size: 18px;
                        color: #a9d1d7;

                        & > .t-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            & > div:first-child {
                                font-weight: bold;
                                color: #66dde9;
                            }
                        }

                        & > .b-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            & > div:first-child {
                                color: #fff;
                            }
                        }

                        .t-border {
                            top: 0;
                            bottom: auto;
                        }

                        .b-border {
                            top: auto;
                            bottom: 0;
                        }

                        .t-border,
                        .b-border {
                            position: absolute;
                            left: 0;
                            right: 0;
                            margin: auto;
                            width: 80%;
                            height: 1px;
                            background: linear-gradient(
                                89deg,
                                rgba(102, 221, 233, 0) 0%,
                                #66dde9 51%,
                                rgba(102, 221, 233, 0) 100%
                            );
                        }
                    }

                    & > div:first-child {
                        margin-top: 10px;
                    }
                }
            }
        }
      }
    }
  }
}
</style>

 src/views/monitor/index.vue

@@ -2,13 +2,16 @@
 * @Author: Morpheus
 * @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-06-27 10:45:48
 * @Last Modified time: 2022-07-01 09:58:34
 * 农产品监管
 */
<template>
    <div class="container">
        <mapBox ref="modalForm" />
        <div class="l-echarts">
        <div class="popup">
            <img src="/img/jc.png" alt />
        </div>
        <!-- <div class="l-echarts">
            <div class="t-box">
                <div class="title">
                    <div class="text">占位</div>
@@ -35,7 +38,7 @@
                </div>
                <div class="content" id="RBBOX"></div>
            </div>
        </div>
        </div>-->
    </div>
</template>

@@ -51,6 +54,20 @@
    width: 100%;
    height: 100%;

    .popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .l-echarts {
        left: 0;
    }

 src/views/weather/index.vue

@@ -2,14 +2,17 @@
 * @Author: Morpheus
 * @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-05-13 15:15:09
 * @Last Modified time: 2022-07-01 10:04:06
 * 投入品监管
 */
<template>
    <div class="container">
        <div class="l-box"></div>
        <div class="popup">
            <img src="/img/qx.png" alt />
        </div>
        <!-- <div class="l-box"></div>
        <div class="c-box"></div>
        <div class="r-box"></div>
        <div class="r-box"></div>-->
    </div>
</template>

@@ -28,11 +31,28 @@
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    & > div {
        width: calc((100% - 52px) / 3);
        background: #074057bb;
        border: 2px solid #00d0da;
        border-radius: 10px;

    .popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        // width: 100%;
        // height: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    // & > div {
    //     width: calc((100% - 52px) / 3);
    //     background: #074057bb;
    //     border: 2px solid #00d0da;
    //     border-radius: 10px;
    // }
}
</style>

 vue.config.js

@@ -23,11 +23,11 @@
                {
                    from: './public/favicon.ico',
                    to: 'favicon.ico'
                },
                {
                    from: './public/DS-Digital',
                    to: 'DS-Digital'
                }
                // {
                //     from: './public/mx',
                //     to: 'mx'
                // },
                // {
                //     from: './public/wp',
                //     to: 'wp'