内容更改

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

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-06-25 17:50:45
 * @Last Modified time: 2022-07-01 11:15:49
* 驾驶舱
*/
<template>
@@ -28,7 +28,8 @@
            <div class="nc-num">
              <div class="text">
                农场数量
                <span class="num">{{ncnum}}</span>
                                <!-- <span class="num">{{ncnum}}</span> -->
                                <span class="num">2</span>
              </div>
              <div class="t-l"></div>
              <div class="b-l"></div>
@@ -38,7 +39,8 @@
            <div class="pel-num">
              <div class="text">
                人员数量
                <span class="num">{{rynum}}</span>
                                <!-- <span class="num">{{rynum}}</span> -->
                                <span class="num">36</span>
              </div>
              <div class="t-l"></div>
              <div class="b-l"></div>
@@ -65,7 +67,8 @@
              <div class="state">在使用</div>

              <div class="text">
                <div class="num">{{ landsnum }}</div>
                                <div class="num">545.01</div>
                                <!-- <div class="num">{{ landsnum }}</div> -->
                <div class="unit">亩</div>
              </div>
            </div>
@@ -86,7 +89,8 @@
            <div class="icon"></div>
            <div class="text">
              种养品种
              <div class="num">{{ num }}</div>
                            <div class="num">2</div>
                            <!-- <div class="num">{{ num }}</div> -->
              <div class="unit">种</div>
            </div>
            <div class="line">
@@ -96,7 +100,34 @@
          </div>
          <div class="content-box">
            <ul>
              <li v-for="(item, index) in farmPlanList" :key="index">
                            <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>
@@ -105,7 +136,7 @@
                  <div class="num">{{ item.area }}</div>
                  <div class="unit">亩</div>
                </div>
              </li>
                            </li>-->
            </ul>
          </div>
        </div>
@@ -136,7 +167,8 @@
            <div class="icon"></div>
            <div class="text">
              本年农事操作
              <div class="num">{{ total }}</div>
                            <!-- <div class="num">{{ total }}</div> -->
                            <div class="num">22</div>
              <div class="unit">次</div>
            </div>

@@ -145,11 +177,46 @@
              <div class="r"></div>
            </div>
          </div>
          <div class="content-box" :v-if="isFarmingDetail">

                    <!-- <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>
@@ -180,25 +247,22 @@
                  <span>1</span>
                </div>
                <div>
                  <span>1</span>
                                    <span>6</span>
                </div>
                <div>
                  <span>2</span>
                                    <span>7</span>
                </div>
                <div>
                  <span>3</span>
                </div>
                <div>
                  <span>4</span>
                                    <span>8</span>
                </div>
                <div>
                  <span>5</span>
                </div>
                <div>
                  <span>6</span>
                                    <span>2</span>
                </div>
                <div>
                  <span>7</span>
                                    <span>0</span>
                </div>
              </div>
            </div>
@@ -224,7 +288,7 @@
      </div>
    </div>

    <div class="city-flow">
        <div class="city-flow" @click="cityFlowShow">
      <div class="icon"></div>
      <span>市场流通</span>
    </div>
@@ -262,6 +326,12 @@
        </li>
      </ul>
    </div>

        <div v-if="cityShow" class="popup">
            <div class="box">
                <img src="/img/sclt.png" alt />
            </div>
        </div>
  </div>
</template>

@@ -282,7 +352,8 @@
      landsnum: 0,
      landwnum: 0,
      ncnum: 0,
      rynum: 0
            rynum: 0,
            cityShow: false
    }
  },
  created () {
@@ -294,13 +365,13 @@
    this.SelectCount()
  },
  mounted () {
    this.initPie('BeingEcharts')
    this.initPie('LeisureEcharts')
        this.initPie('BeingEcharts', 100)
        this.initPie('LeisureEcharts', 0)
    this.initRightPie('EquipmentEcharts')
    this.initLine('TrendEcharts')
  },
  methods: {
    initPie (dom) {
        initPie (dom, val) {
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)

@@ -316,7 +387,7 @@
              fontWeight: 'bold',
              offsetCenter: [0, '60%']
            },
            data: [{ value: 50 }],
                        data: [{ value: val }],
            splitNumber: 25,
            axisLine: {
              show: true,
@@ -368,7 +439,7 @@

      const option = {
        title: {
          text: '400',
                    text: '28',
          subtext: '设备总数',
          top: '40%',
          left: 'center',
@@ -387,11 +458,11 @@
        series: [
          {
            type: 'pie',
            radius: ['52%', '80%'],
                        radius: ['44%', '62%'],
            center: ['50%', '50%'],
            data: [
              {
                value: 30,
                                value: 2,
                name: 'rose2',
                itemStyle: {
                  color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
@@ -410,7 +481,7 @@
                }
              },
              {
                value: 90,
                                value: 26,
                name: 'rose2',
                itemStyle: {
                  color: '#00F0FF'
@@ -427,17 +498,17 @@
          { // 指示线
            // 通过value 的值 调节lableLine的位置
            type: 'pie',
            radius: ['52%', '80%'],
                        radius: ['44%', '62%'],
            data: [
              {
                value: 30,
                                value: 2,
                itemStyle: {
                  color: 'transparent'
                },
                labelLine: {
                  show: true,
                  length: 42,
                  length2: 24,
                                    length: 24,
                                    length2: 16,
                  color: '#fff',
                  lineStyle: {
                    color: '#fff'
@@ -460,7 +531,7 @@

              },
              {
                value: 90,
                                value: 26,
                itemStyle: {
                  color: 'transparent'
                }
@@ -471,24 +542,24 @@
          { // 指示线
            // 通过value 的值 调节lableLine的位置
            type: 'pie',
            radius: ['52%', '80%'],
                        radius: ['44%', '62%'],
            data: [
              {
                value: 30,
                                value: 2,
                itemStyle: {
                  color: 'transparent'
                }

              },
              {
                value: 90,
                                value: 26,
                itemStyle: {
                  color: 'transparent'
                },
                labelLine: {
                  show: true,
                  length: 42,
                  length2: 24,
                                    length: 24,
                                    length2: 16,
                  color: '#fff',
                  lineStyle: {
                    color: '#fff'
@@ -664,6 +735,10 @@
        that.num = data.num
        this.farmPlanList = data.page.records
      })
        },

        cityFlowShow () {
            this.cityShow = true
    }

  }
@@ -1046,16 +1121,17 @@
          padding: 28px 10px 0px 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: space-between;
                    justify-content: flex-start;
                    align-content: flex-start;
          box-sizing: border-box;

          & > div {
            padding: 0 10px;
                        padding: 0 8px;
                        margin: 4px 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 120px;
                        width: 117px;
            height: 40px;
            border: 1px solid rgba(102, 221, 233, 0.6);
            border-radius: 4px 4px 4px 4px;
@@ -1421,5 +1497,34 @@
      }
    }
  }

    .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

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-06-28 16:54:18
 * @Last Modified time: 2022-07-01 12:00:07
* 经营主体监管
*/
<template>
@@ -15,58 +15,58 @@
      <div class="t">
        <statistics-num
            :className="'td'"
            :totalRegion=znum
                    :totalRegion="545.01"
            :imgUrl="'/img/icon/mj.png'"
            :unit="'亩'"
            :title="'土地面积'"
            :subOneTitle="'使用面积'"
            :subOneNum=landsnum
                    :subOneNum="545.01"
            :subTwoTitle="'未使用面积'"
            :subTwoNum=landwnum
                    :subTwoNum="0"
        ></statistics-num>
        <statistics-num
            :className="'kc'"
            :totalRegion="'700'"
                    :totalRegion="652"
            :imgUrl="'/img/icon/kc.png'"
            :unit="'公斤'"
            :title="'库存数量'"
            :subOneTitle="'农产品'"
            :subOneNum="'300'"
                    :subOneNum="652"
            :subTwoTitle="'加工产品'"
            :subTwoNum="'300'"
                    :subTwoNum="0"
        ></statistics-num>
        <statistics-num
            :className="'nz'"
            :totalRegion=jnStock
                    :totalRegion="198"
            :imgUrl="'/img/icon/syl.png'"
            :unit="'公斤'"
            :title="'农资年使用量'"
            :subOneTitle="'去年使用'"
            :subOneNum=qnStock
                    :subOneNum="232"
            :subTwoTitle="'本月使用'"
            :subTwoNum=byStock
                    :subTwoNum="0"
        ></statistics-num>
        <statistics-num
            :className="'cl'"
            :totalRegion="'700'"
                    :totalRegion="6256"
            :imgUrl="'/img/icon/ncl.png'"
            :unit="'公斤'"
            :title="'年产量'"
            :subOneTitle="'农产品'"
            :subOneNum="'300'"
                    :subOneNum="4500"
            :subTwoTitle="'加工产品'"
            :subTwoNum="'300'"
                    :subTwoNum="1756"
        ></statistics-num>
        <statistics-num
            :className="'lt'"
            :totalRegion="'700'"
                    :totalRegion="2678"
            :imgUrl="'/img/icon/lt.png'"
            :unit="'公斤'"
            :title="'市场流通量'"
            :subOneTitle="'去年流通量'"
            :subOneNum="'300'"
                    :subOneNum="5280"
            :subTwoTitle="'本月流通量'"
            :subTwoNum="'300'"
                    :subTwoNum="0"
        ></statistics-num>
      </div>
      <div class="c">
@@ -74,23 +74,26 @@
          <time-box
              :imgUrl="'/img/icon/current.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
                        :currentNum="34"
              :subTitle="'昨日溯源次数对比'"
              :contrast="'25'"
                        :contrast="28"
                        :upDown="'up'"
          ></time-box>
          <time-box
              :imgUrl="'/img/icon/week.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
                        :currentNum="61"
              :subTitle="'上周溯源次数对比'"
              :contrast="'25'"
                        :contrast="36"
                        :upDown="'up'"
          ></time-box>
          <time-box
              :imgUrl="'/img/icon/month.png'"
              :title="'溯源次数'"
              :currentNum="'50'"
                        :currentNum="88"
              :subTitle="'上月溯源次数对比'"
              :contrast="'25'"
                        :contrast="96"
                        :upDown="'down'"
          ></time-box>
        </div>
        <div class="task-box">
@@ -103,58 +106,55 @@
        <div class="nz-ncp">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">农产品投入</div>
                            <div class="item" :class="{on: nzOrNcp == 'ncp'}">
                                <div @click="nzOrNcp = 'ncp'" class="title">农产品投入</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">农资投入</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 class="lists-box">
                    <div v-if="nzOrNcp == 'ncp'" class="lists-box">
            <div>
              <div>1</div>
              <div>水稻</div>
              <div>1001亩</div>
                            <div>545.01亩</div>
            </div>
            <div>
              <div>2</div>
              <div>水稻</div>
              <div>1001亩</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>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>2</div>
                            <div>复合肥料</div>
                            <div>68公斤</div>
            </div>
          </div>
        </div>
        <div class="trp-ncp">
          <div class="title-box">
            <div>
              <div class="item on">
                <div class="title">投入品监管</div>
                            <div class="item" :class="{on: trpOrNcp == 'trp'}">
                                <div @click="trpOrNcp = 'trp'" class="title">投入品监管</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="title">农产品监管</div>
                            <div class="item" :class="{on: trpOrNcp == 'ncp'}">
                                <div @click="trpOrNcp = 'ncp'" class="title">农产品监管</div>
                <span></span>
              </div>
            </div>
@@ -165,7 +165,8 @@
            </div>
          </div>

          <div class="echarts-box" id="TrpNcpEcharts"></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">
@@ -217,12 +218,12 @@
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
                                <div>2022-06-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
                                <div>林术</div>
                                <div>株良镇田南村5号地块</div>
              </div>
              <div class="b-border"></div>
            </div>
@@ -231,12 +232,12 @@
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
                                <div>2022-06-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
                                <div>王刚</div>
                                <div>株良镇田南村3号地块</div>
              </div>
              <div class="b-border"></div>
            </div>
@@ -245,12 +246,12 @@
              <div class="t-border"></div>
              <div class="t-item">
                <div>施肥</div>
                <div>2022-05-31</div>
                                <div>2022-06-31</div>
              </div>
              <div class="b-item">
                <div>水稻</div>
                <div>某某人员</div>
                <div>某某地块</div>
                                <div>玉米</div>
                                <div>李建国</div>
                                <div>株良镇田南村1号地块</div>
              </div>
              <div class="b-border"></div>
            </div>
@@ -275,7 +276,9 @@
      jnStock: 0,
      qnStock: 0,
      byStock: 0,
      farmPlanList: []
            farmPlanList: [],
            nzOrNcp: 'ncp',
            trpOrNcp: 'trp'
    }
  },
  created () {
@@ -285,7 +288,8 @@
  },
  mounted () {
    this.initBar('TaskNumEcharts')
    this.initTrpNcpBar('TrpNcpEcharts')
        this.initTrpBar('TrpEcharts')
        // this.initNcpBar('NcpEcharts')
    this.initClSyBar('ClSyEcharts')
  },
  methods: {
@@ -398,7 +402,7 @@
      option && myChart.setOption(option)
    },

    initTrpNcpBar (dom) {
        initTrpBar (dom) {
      const that = this
      const chartDom = document.getElementById(dom)
      const myChart = this.$echarts.init(chartDom)
@@ -414,13 +418,8 @@
        xAxis: {
          type: 'category',
          data: [
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥',
            '化肥'
                        '有机肥料',
                        '复合肥料'
          ],
          axisLine: {
            lineStyle: {
@@ -436,7 +435,7 @@
          }
        },
        yAxis: {
          max: 50,
                    max: 600,
          name: '（公斤）',
          nameTextStyle: {
            color: 'rgba(255,255,255,.4)'
@@ -464,7 +463,106 @@
          {
            type: 'bar',
            barWidth: 32,
            data: [23, 44, 34, 41, 16, 30, 40],
                        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'
                                        }
                                    ]
                                    )

                            }
                        }
                    }
                ]
            }

            option && myChart.setOption(option)
        },

        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',
@@ -508,58 +606,45 @@

      var data = [
        '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12'
      ]
      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'
                '180',
                '320',
                '400',
                '200',
                '110',
                '180',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
      ]
      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'
                '0',
                '0',
                '0',
                '260',
                '0',
                '230',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
      ]

      const option = {
@@ -606,7 +691,6 @@
        yAxis: [
          {
            min: 0,
            max: 50,
            type: 'value',
            axisLabel: {
              interval: 0,
@@ -796,6 +880,10 @@
            font-size: 18px;
            color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

            .on {
              position: relative;
              font-weight: bold;
@@ -862,6 +950,10 @@
            align-items: flex-start;
            font-size: 18px;
            color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

            .on {
              position: relative;
@@ -1001,6 +1093,10 @@
            font-size: 18px;
            color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

            .on {
              position: relative;
              font-weight: bold;

 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'