部分修改

shuishen

2022-07-13 2a547086974c31dd7a1ebc3c85c5afc6bf4cc999

部分修改

 public/img/icon/3858.png

 src/api/farm/farmingrecord.js

@@ -2,28 +2,70 @@

export const getList = (current, size, params) => {
    return request({
        url: '/api/farmingRecord/page',
        url: '/farmingRecord/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
            size
        }
    })
}

// 获取农场
export const getFarmList = (current, size, params) => {
    return request({
        url: '/farm/getFarmList',
        method: 'get'
    })
}

// 获取地块
export const getLandList = (params) => {
    return request({
        url: '/land/land/getLandList',
        method: 'get',
        params: {
            ...params
        }
    })
}

// 获取农事操作记录
export const getFarmingRecordList = (params) => {
    return request({
        url: '/farmingRecord/getFarmingRecordList',
        method: 'get',
        params: {
            ...params
        }
    })
}

// 获取种植记录
export const getFarmPlantList = (params) => {
    return request({
        url: '/farmPlant/getFarmPlantList',
        method: 'get',
        params: {
            ...params
        }
    })
}

export const remove = (ids) => {
    return request({
        url: '/api/farmingRecord/remove',
        url: '/farmingRecord/remove',
        method: 'post',
        params: {
            ids,
            ids
        }
    })
}

export const save = (row) => {
    return request({
        url: '/api/farmingRecord/save',
        url: '/farmingRecord/save',
        method: 'post',
        data: row
    })
@@ -31,7 +73,7 @@

export const update = (row) => {
    return request({
        url: '/api/farmingRecord/update',
        url: '/farmingRecord/update',
        method: 'post',
        data: row
    })
@@ -39,14 +81,13 @@

export const getDetail = (id) => {
    return request({
        url: '/api/farmingRecord/detail',
        url: '/farmingRecord/detail',
        method: 'get',
        params: {
            id
        }
    })
}


export const getFarmingCount = (deptId) => {
    return request({

 src/api/farm/source.js

New file
@@ -0,0 +1,11 @@
import request from '@/router/axios'

export const getSourceList = (params) => {
    return request({
        url: '/traceability/getTraceabilityList',
        method: 'get',
        params: {
            ...params
        }
    })
}

 src/api/land/land.js

@@ -1,20 +1,20 @@
import request from '@/router/axios';
import request from '@/router/axios'

export const getList = (current, size, params) => {
    return request({
        url: '/api/land/land/page',
        url: '/land/land/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
            size
        }
    })
}

export const getDetail = (id) => {
    return request({
        url: '/api/land/land/details',
        url: '/land/land/details',
        method: 'get',
        params: {
            id
@@ -24,17 +24,17 @@

export const remove = (ids) => {
    return request({
        url: '/api/land/land/remove',
        url: '/land/land/remove',
        method: 'post',
        params: {
            ids,
            ids
        }
    })
}

export const add = (row) => {
    return request({
        url: '/api/land/land/save',
        url: '/land/land/save',
        method: 'post',
        data: row
    })
@@ -42,7 +42,7 @@

export const update = (row) => {
    return request({
        url: '/api/land/land/submit',
        url: '/land/land/submit',
        method: 'post',
        data: row
    })
@@ -50,7 +50,7 @@

export const getLandList = (userid) => {
    return request({
        url: '/api/land/land/selectLandList',
        url: '/land/land/selectLandList',
        method: 'get',
        params: {
            userid

 src/components/map/index.vue

@@ -2,7 +2,14 @@
<template>
    <div id="viewer-container" style="height: 100%; width: 100%"></div>
</template>

<script>

var farmRegionLayer = null
var plotRegionLayer = null
var farmLogoLayer = null
var addLayers = []
var addPlotLayers = []

export default {
    name: 'mapBox',
@@ -31,6 +38,15 @@
                    }
                }
            })

            farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
            global.viewer.addLayer(farmRegionLayer)

            plotRegionLayer = new global.DC.VectorLayer('plotRegionLayer')
            global.viewer.addLayer(plotRegionLayer)

            farmLogoLayer = new global.DC.HtmlLayer('farmLogoLayer')
            global.viewer.addLayer(farmLogoLayer)

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                global.viewer.setOptions({
@@ -163,7 +179,145 @@
        global.DC.ready(initViewer)
    },
    methods: {
        addPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)

            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(center[0], center[1], 0),
                `
                        <div class="farm-map-icon">
                            <img src="/img/icon/3858.png" alt="">
                            <div>${item.farmName}</div>
                        </div>
                        `
            )
            divIcon.attrParams = item
            farmLogoLayer.addOverlay(divIcon)

            divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.showDetailPopup(e.overlay.attrParams)
            })

            const polygon = new global.DC.Polygon(positions)
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    244, 157, 21,
                    200
                )
            })
            farmRegionLayer.addOverlay(polygon)
            addLayers.push({ center, name: item.farmName })
        },

        addPlotPolygon (positions, item) {
            // const that = this

            const center = this.getCenter(positions)

            // const divIcon = new global.DC.DivIcon(
            //     new global.DC.Position(center[0], center[1], 0),
            //     `
            //             <div class="farm-map-icon">
            //                 <img src="/img/icon/3858.png" alt="">
            //                 // <div>${item.farmName}</div>
            //             </div>
            //             `
            // )
            // divIcon.attrParams = item
            // farmLogoLayer.addOverlay(divIcon)

            // divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            //     that.$parent.showDetailPopup(e.overlay.attrParams)
            // })

            const polygon = new global.DC.Polygon(positions)
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    200
                )
            })
            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName })
        },

        setCenter (name) {
            let center
            addLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        setPlotCenter (name) {
            let center
            addPlotLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        // 经纬度测算中心位置
        getCenter (arr) {
            let centerLonLat = []
            if (arr.length) {
                const lon = []
                const lat = []
                const poly = []
                for (let i = 0, len = arr.length; i < len; i++) {
                    lon.push(arr[i][0])
                    lat.push(arr[i][1])
                }
                for (let i = 0, len = lon.length; i < len; i++) {
                    poly.push({
                        x: parseFloat(lon[i]),
                        y: parseFloat(lat[i]),
                        z: 0
                    })
                }
                const sortedLongitudeArray = poly.map(item => item.x).sort()
                const sortedLatitudeArray = poly.map(item => item.y).sort()
                const centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(14)
                const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(14)
                console.log(centerLongitude, centerLatitude)
                centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
            }
            return centerLonLat
        }
    }
}
</script>

 src/components/publicBox/index.vue

@@ -1,10 +1,12 @@
<template>
    <div ref="publicBox">
        <div class="header">
            <slot name="public-box-header"></slot>
        </div>
        <div class="content">
            <slot name="public-box-content"></slot>
    <div class="current-wrapper" @click="close">
        <div ref="publicBox" :class="className">
            <div class="header">
                <slot name="public-box-header"></slot>
            </div>
            <div class="content">
                <slot name="public-box-content"></slot>
            </div>
        </div>
    </div>
</template>
@@ -13,6 +15,7 @@

export default {
    name: 'PublicBox',
    props: ['className'],
    data () {
        return {
        }
@@ -20,10 +23,21 @@
    created () {
    },
    methods: {

        close () {
            this.$parent.closeCurrentPopup()
        }
    }
}
</script>

<style scoped lang='scss'>
.current-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
}
</style>

 src/router/axios.js

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


 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 10:54:29
 * @Last Modified time: 2022-07-12 19:39:31
 */

import Vue from 'vue'

 src/styles/index.scss

@@ -62,3 +62,17 @@
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}


.div-icon {
    background: transparent !important;
}

.farm-map-icon {
    font-weight: bold;
    color: rgb(252, 166, 7);

    img {
        width: 24px;
    }
}

 src/styles/publicBox/arc-nav-bar.scss

@@ -104,6 +104,7 @@
                color: #fff;

                .row {
                    margin-top: 30px;
                    display: flex;
                    justify-content: space-between;

@@ -112,14 +113,15 @@
                        align-items: flex-start;
                        justify-content: flex-end;
                        width: 100px;
                        height: 50px;
                        height: 24px;
                        color: #A9D1D7;
                    }

                    .r {
                        display: flex;
                        align-items: flex-start;
                        align-items: center;
                        justify-content: flex-start;
                        text-align: left;
                        margin-left: 24px;
                        flex: 1;

@@ -132,6 +134,10 @@
                    }
                }

                .row:first-child {
                    margin-top: 0;
                }

            }

        }

 src/views/farm/index.vue

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 20:01:42
 * @Last Modified time: 2022-07-13 15:45:17
* 驾驶舱
*/
<template>
@@ -15,7 +15,7 @@
                    <i class="el-icon-back"></i> 返回
                </span>
            </div>
            <div class="title">古田米庄</div>
            <div class="title">{{currentDetails.farmName}}</div>
            <div class="btn-grounp">
                <el-button type="primary" icon="el-icon-my-sb">物联网设备总览</el-button>
                <el-button type="primary" icon="el-icon-my-sy" @click="tracePopupFlag = true">农产品溯源</el-button>
@@ -46,27 +46,42 @@
            <div v-show="ncjscz == 'ncjs'" class="detail-box">
                <div class="item">
                    <div class="name">农场名称：</div>
                    <div class="deserve">xx农场</div>
                    <div class="deserve">{{this.currentDetails.farmName}}</div>
                </div>

                <div class="item">
                    <div class="name">农场名称：</div>
                    <div class="deserve">xx农场</div>
                    <div class="name">农场地址：</div>
                    <div class="deserve">{{this.currentDetails.farmAddress}}</div>
                </div>

                <div class="item">
                    <div class="name">土地流转面积：</div>
                    <div class="deserve">{{this.currentDetails.farmArea}}亩</div>
                </div>

                <div class="item">
                    <div class="name">口号：</div>
                    <div class="deserve">{{this.currentDetails.slogan}}</div>
                </div>

                <div class="item">
                    <div class="name">农场简介：</div>
                    <div class="deserve">{{this.currentDetails.introduce}}</div>
                </div>
            </div>

            <div v-show="ncjscz == 'cz'" class="lists-box nscz">
                <div>
                <div v-for="(item, index) in farmRecordList" :key="index">
                    <div class="t-border"></div>
                    <div class="t-item">
                        <div>施肥</div>
                        <div>有机肥料、有机肥</div>
                        <div>2022-06-31</div>
                        <div>{{item.typeName}}</div>
                        <div></div>
                        <div>{{item.createTime.substr(0,10)}}</div>
                    </div>
                    <div class="b-item">
                        <div>水稻</div>
                        <div>林术</div>
                        <div>株良镇田南村5号地块</div>
                        <div>{{item.strainName}}</div>
                        <div>{{item.realName}}</div>
                        <div>{{item.landName}}</div>
                    </div>
                </div>
            </div>
@@ -102,25 +117,27 @@
            </div>

            <div v-show="zydksb == 'zy'" class="lists-box dk">
                <div>
                <div v-for="(item, index) in farmPlantList" :key="index">
                    <div class="title">
                        <img src="/img/icon/list-img.png" alt />水稻
                        <img :src="item.url" alt />
                        {{item.strainName}}
                    </div>
                    <div class="num-unit">
                        120
                        <span>亩</span>
                        {{item.area}}
                        <span>{{item.landUnit == 0 ? '亩' : item.landUnit == 1 ? '分' : '平方米'}}</span>
                    </div>
                </div>
            </div>

            <div v-show="zydksb == 'dk'" class="lists-box dk">
                <div>
                <div v-for="(item, index) in plotLists" :key="index" @click="setCenter(item)">
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />某某地块
                        <img :src="item.url" alt />
                        {{item.landName}}
                    </div>
                    <div class="num-unit">
                        0.24
                        <span>亩</span>
                        {{item.landArea}}
                        <span>{{item.landUnit == 0 ? '亩' : item.landUnit == 1 ? '分' : '平方米'}}</span>
                    </div>
                </div>
            </div>
@@ -135,16 +152,11 @@
            </div>
        </div>

        <public-box v-show="tracePopupFlag" class="public-trace-table">
        <public-box v-show="tracePopupFlag" :className="'public-trace-table'">
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农产品溯源码</div>
                <img
                    @click="tracePopupFlag = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
                <img @click="closeCurrentPopup" src="/img/icon/public-close.png" alt class="close" />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
@@ -153,8 +165,8 @@
                            class="search-input"
                            size="small"
                            prefix-icon="el-icon-search"
                            placeholder="请输入内容"
                            v-model="input1"
                            placeholder="请输入溯源码编号"
                            v-model="sourceCode"
                        ></el-input>
                    </div>
                    <div class="btn-grounp">
@@ -181,7 +193,7 @@
                        <div>操作</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list">
                        <div class="table-list" v-for="(item, index) in sourceList" :key="index">
                            <div class="sym-style">
                                <div class="l">
                                    <img src="/img/icon/sym.png" alt />
@@ -191,9 +203,9 @@
                                    <div class="unit">5cm*3cm</div>
                                </div>
                            </div>
                            <div>193500000030</div>
                            <div>1/1</div>
                            <div>2022-06-10 15:50</div>
                            <div>{{item.code}}</div>
                            <div>{{item.bind == 0 ? 1 : 0}}/1</div>
                            <div>{{item.createTime}}</div>
                            <div>
                                <el-button
                                    @click="openPopup('/img/icon/sym.png')"
@@ -221,28 +233,120 @@

<script>

import { getSourceList } from '@/api/farm/source'
import {
    getLandList,
    getFarmingRecordList,
    getFarmPlantList
} from '@/api/farm/farmingrecord'

export default {
    data () {
        return {
            currentDetails: null,
            ncjscz: 'cz',
            zydksb: 'sb',
            dialogVisible: false,
            currentUrl: '',
            tracePopupFlag: false
            tracePopupFlag: false,
            sourceList: [],
            farmRecordList: [],
            farmPlantList: [],
            plotLists: [],
            // 溯源码编号
            sourceCode: ''
        }
    },
    created () {

        this.getParams()
    },
    mounted () {
        this.$nextTick(() => {
            this.setView()
            this.getSourceList()
            this.getFarmingRecordList()
            this.getFarmPlantList()
            this.getLandList()
        })
    },
    methods: {
        // 关闭弹框
        closeCurrentPopup () {
            this.tracePopupFlag = false
        },
        setCenter (item) {
            this.ncListShow = false
            this.$refs.modalForm.setPlotCenter(item.landName)
        },

        prev () {
            this.$router.go(-1)
        },

        openPopup (url) {
            this.currentUrl = url
            this.dialogVisible = true
        },

        getParams () {
            this.currentDetails = this.$route.query
        },

        setView () {
            let position

            position = this.currentDetails.position.replace(/POLYGON\(\(/g, '')
            position = position.replace(/\)\)/g, '')

            const arr = position.split(',')
            var brr = []

            arr.forEach(it => {
                brr.push(it.split(' '))
            })

            this.$refs.modalForm.addPolygon(brr, this.currentDetails)

            this.$refs.modalForm.setCenter(this.currentDetails.farmName)
        },

        getSourceList () {
            getSourceList({ farmId: this.currentDetails.id }).then(res => {
                this.sourceList = res.data.data
            })
        },

        getFarmingRecordList () {
            getFarmingRecordList({ farmId: this.currentDetails.id }).then(res => {
                this.farmRecordList = res.data.data
            })
        },

        getFarmPlantList () {
            getFarmPlantList({ farmId: this.currentDetails.id }).then(res => {
                this.farmPlantList = res.data.data
            })
        },

        getLandList () {
            getLandList({ farmId: this.currentDetails.id }).then(res => {
                res.data.data.forEach(item => {
                    if (item.landRange != '' || item.landRange != null) {
                        item.landRange = item.landRange.replace(/POLYGON\(\(/g, '')
                        item.landRange = item.landRange.replace(/\)\)/g, '')

                        const arr = item.landRange.split(',')
                        var brr = []
                        arr.forEach(it => {
                            brr.push(it.split(' '))
                        })

                        console.log(brr, 5555)
                        this.$refs.modalForm.addPlotPolygon(brr, item)
                    }
                })
                this.plotLists = res.data.data
            })
        }
    }
}
@@ -328,7 +432,6 @@
        width: 440px;
        height: 640px;
        background: #06344e;
        border-radius: 30px 30px 30px 30px;

        .tab-btn {
            display: flex;
@@ -382,15 +485,22 @@
                align-items: center;
                margin-top: 14px;
                padding: 0 20px;
                height: 56px;
                background: #081e36;
                font-size: 16px;
                color: #84c3d2;

                .name {
                    margin-right: 8px;
                    height: 56px;
                    line-height: 56px;
                    font-weight: bold;
                    color: #abebf7;
                }

                .deserve {
                    flex: 1;
                    text-align: left;
                    line-height: 32px;
                }
            }

@@ -424,9 +534,18 @@
                    align-items: center;
                    justify-content: space-between;

                    & > div {
                        flex: 1;
                    }

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

                    & > div:last-child {
                        text-align: right;
                    }
                }

@@ -435,8 +554,17 @@
                    align-items: center;
                    justify-content: space-between;

                    & > div {
                        flex: 1;
                    }

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

                    & > div:last-child {
                        text-align: right;
                    }
                }

@@ -524,6 +652,12 @@
            }
        }

        .dk.lists-box {
            & > div {
                cursor: pointer;
            }
        }

        .zy.lists-box {
            & > div {
                height: 80px;
@@ -532,8 +666,8 @@

        .border-box {
            position: absolute;
            width: 72px;
            height: 56px;
            width: 18px;
            height: 18px;
            z-index: 0;
        }

@@ -542,28 +676,24 @@
            left: -2px;
            border-top: 3px solid #09e2ef;
            border-left: 3px solid #09e2ef;
            border-top-left-radius: 30px;
        }
        .t-r-border {
            top: -2px;
            right: -2px;
            border-top: 3px solid #09e2ef;
            border-right: 3px solid #09e2ef;
            border-top-right-radius: 30px;
        }
        .b-l-border {
            bottom: -2px;
            left: -2px;
            border-bottom: 3px solid #09e2ef;
            border-left: 3px solid #09e2ef;
            border-bottom-left-radius: 30px;
        }
        .b-r-border {
            bottom: -2px;
            right: -2px;
            border-bottom: 3px solid #09e2ef;
            border-right: 3px solid #09e2ef;
            border-bottom-right-radius: 30px;
        }
    }


 src/views/home/index.vue

@@ -1,13 +1,13 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-07-08 10:58:39
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-13 09:28:02
* 驾驶舱
*/
<template>
    <div class="container">
        <mapBox ref="modalForm"/>
        <mapBox ref="modalForm" />

        <div class="left-box">
            <div class="content">
@@ -98,7 +98,7 @@
                        <ul>
                            <li v-for="(item, index) in farmPlanList" :key="index">
                                <div class="l">
                                    <img :src="item.url" class="img"/>
                                    <img :src="item.url" class="img" />
                                    <div class="text">{{ item.strainName }}</div>
                                </div>
                                <div class="r">
@@ -190,7 +190,7 @@
        </div>

        <div class="down-menu">
            <div class="nc" @click="farmProfiles = true">
            <div class="nc" @click="ncListShow = !ncListShow">
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
@@ -201,6 +201,20 @@
            <div class="jc">
                <span>监测设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>

            <div v-show="ncListShow" class="nc-list">
                <div class="title" @click="ncListShow = false">
                    农场
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in farmNumArray"
                    :key="index"
                    class="box"
                    :class="{first: index == 0}"
                    @click="setCenter(item)"
                >{{item.farmName}}</div>
            </div>
        </div>

@@ -247,25 +261,19 @@
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">市场流通</div>
                <img
                        @click="cityShow = false"
                        src="/img/icon/public-close.png"
                        alt
                        class="close"
                />
                <img @click="cityShow = false" src="/img/icon/public-close.png" alt class="close" />
            </template>
            <template slot="public-box-content">
                <div class="market-title">
                    <el-select placeholder="请选择农场">
                    </el-select>
                    <el-select placeholder="请选择农场"></el-select>
                    <div class="date">
                        <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间">
                        </el-date-picker>
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                        ></el-date-picker>
                    </div>
                    <div class="query-button">
                        <el-button type="primary" icon="el-icon-search">查询</el-button>
@@ -276,7 +284,11 @@
                <div class="market-content">
                    <div id="marketChartQx" class="market-chart"></div>
                    <div class="market-list">
                        <div class="market-list-item" v-for="(item,index) in marketDistrict" :key="index">
                        <div
                            class="market-list-item"
                            v-for="(item,index) in marketDistrict"
                            :key="index"
                        >
                            <div>
                                <div class="t-border"></div>
                                <div class="t-item">
@@ -294,50 +306,47 @@
        <public-box v-if="farmProfiles" class="public-org-nav-bar">
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">123</div>
                <div class="title">{{this.farmDetails.farmName}}</div>
                <img
                        @click="farmProfiles = false"
                        src="/img/icon/public-close.png"
                        alt
                        class="close"
                    @click="farmProfiles = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="farm-profiles">
                    <div class="btn-grounp">
                        <div class="details" @click="goPath('/farmDetails')">
                        <div class="details" @click="goPath">
                            进入农场
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="scene">
                            <img src="/img/icon/360.png" alt/>
                            <img src="/img/icon/360.png" alt />
                        </div>
                    </div>

                    <div class="farm-content">
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                            <div class="l">地址</div>
                            <div class="r">{{this.farmDetails.farmAddress}}</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                            <div class="l">土地流转面积</div>
                            <div class="r">{{this.farmDetails.farmArea}}</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                            <div class="l">口号</div>
                            <div class="r">{{this.farmDetails.slogan}}</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                            <div class="l">农场介绍</div>
                            <div class="r" style="line-height: 32px;">{{this.farmDetails.introduce}}</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="l">环境图片</div>
                            <div class="r">
                                <img src="/img/icon/yx.jpg" alt/>
                                <img src="/img/icon/yx.jpg" alt/>
                                <img src="/img/icon/yx.jpg" alt/>
                                <img src="/img/icon/yx.jpg" alt/>
                                <img :src="this.farmDetails.picture" alt />
                            </div>
                        </div>
                    </div>
@@ -348,1428 +357,1531 @@
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import {
        getFarmingCount,
        getFarmingStatis,
        pagePalnt,
        SelectCount,
        selctSaletCount,
        selctSaletZ,
        selectMarketDistrict
    } from '@/api/farm/farmingrecord'
    // eslint-disable-next-line no-unused-vars
    import { selectXCount } from '@/api/land/land'
// eslint-disable-next-line no-unused-vars
import {
    getFarmingCount,
    getFarmingStatis,
    pagePalnt,
    SelectCount,
    selctSaletCount,
    selctSaletZ,
    selectMarketDistrict,
    getFarmList,
    getLandList
} from '@/api/farm/farmingrecord'
// eslint-disable-next-line no-unused-vars
import { selectXCount } from '@/api/land/land'

    import chinaJSON from '@/assets/china.json'
import chinaJSON from '@/assets/china.json'

    export default {
        data () {
            return {
                farmingList: [],
                farmPlanList: [],
                isFarmingDetail: false,
                total: 0,
                num: 0,
                landsnum: 0,
                landwnum: 0,
                ncnum: 0,
                rynum: 0,
                cityShow: false,
                // 销售总额
                salaNum: [],
                // 每月销售统计
                salaNumY: [],
                // 市场流通
                marketDistrict: [],
                farmProfiles: false
            }
export default {
    data () {
        return {
            farmingList: [],
            farmPlanList: [],
            isFarmingDetail: false,
            total: 0,
            num: 0,
            landsnum: 0,
            landwnum: 0,
            ncnum: 0,
            rynum: 0,
            cityShow: false,
            // 销售总额
            salaNum: [],
            // 每月销售统计
            salaNumY: [],
            // 市场流通
            marketDistrict: [],
            ncListShow: false,
            farmProfiles: false,
            farmNumArray: [],
            plotNumArray: [],
            farmDetails: null
        }
    },
    created () {
        // 本年农事操作记录
        this.getFarmingStatis()
        this.getFarmingCount()
        this.pagePalnt()
        this.selectXCount()
        this.SelectCount()
        this.selctSaletCount()
        this.selctSaletZ()
        this.selectMarketDistrict()

        this.getFarmList()
        this.getLandList()
    },
    mounted () {
        this.initRightPie('EquipmentEcharts')
    },
    methods: {
        showDetailPopup (params) {
            console.log(params)
            this.farmDetails = params
            this.farmProfiles = true
        },
        created () {
            // 本年农事操作记录
            this.getFarmingStatis()
            this.getFarmingCount()
            this.pagePalnt()
            this.selectXCount()
            this.SelectCount()
            this.selctSaletCount()
            this.selctSaletZ()
            this.selectMarketDistrict()

        setCenter (item) {
            this.ncListShow = false
            this.$refs.modalForm.setCenter(item.farmName)
        },
        mounted () {
            this.initRightPie('EquipmentEcharts')

        getFarmList () {
            getFarmList().then(res => {
                res.data.data.forEach(item => {
                    item.position = item.position.replace(/POLYGON\(\(/g, '')
                    item.position = item.position.replace(/\)\)/g, '')

                    const arr = item.position.split(',')
                    var brr = []
                    arr.forEach(it => {
                        brr.push(it.split(' '))
                    })
                    this.$refs.modalForm.addPolygon(brr, item)
                })
                this.farmNumArray = res.data.data
            })
        },
        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: 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'
                                            }
                                        ])
                                        ]
                                    ]
        getLandList () {
            getLandList().then(res => {
                console.log(res.data.data, 456)

                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { show: false },
                            splitLine: {
                                show: true,
                                distance: -8,
                                length: 8,
                                lineStyle: {
                                    color: '#fff',
                                    width: 2
                                }
                            }
                res.data.data.forEach(item => {
                    if (item.landRange != '' || item.landRange != null) {
                        item.landRange = item.landRange.replace(/POLYGON\(\(/g, '')
                        item.landRange = item.landRange.replace(/\)\)/g, '')

                        }
                    ]
                }
                        const arr = item.landRange.split(',')
                        var brr = []
                        arr.forEach(it => {
                            brr.push(it.split(' '))
                        })

                option && myChart.setOption(option)
            },
                        console.log(brr, 5555)
                        this.$refs.modalForm.addPlotPolygon(brr, item)
                    }
                })
                this.plotNumArray = res.data.data
            })
        },

            initRightPie (dom) {
                const that = this
                const chartDom = document.getElementById(dom)
                const myChart = this.$echarts.init(chartDom)
        initPie (dom, val) {
            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: {
            const option = {
                series: [
                    {
                        radius: '100%',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%\n总占比',
                            color: '#A9D1D7',
                            fontSize: 18,
                            fontWeight: 'bold'
                        }
                    },
                    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
                                    }
                                }
                            ]
                            fontSize: '16px',
                            fontWeight: 'bold',
                            offsetCenter: [0, '60%']
                        },
                        { // 指示线
                            // 通过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|2}\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|26}\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)

                var x = []
                var y = []
                for (let i = 1; i <= 12; i++) {
                    x.push(i)
                    y.push(that.salaNumY[i])
                }

                const option = {
                    tooltip: {},
                    grid: {
                        top: '16%',
                        left: '6%',
                        right: '6%',
                        bottom: '12%',
                        containLabel: true
                    },
                    xAxis: [
                        {

                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#697B89'
                                }
                            },
                            axisLabel: {
                                // 坐标轴刻度标签的相关设置
                                textStyle: {
                                    color: '#A9D1D7',
                                    margin: 8
                                }
                            },
                            axisTick: { show: false },
                            data: x
                        }
                    ],
                    yAxis: [
                        {
                            name: '（元）',
                            nameTextStyle: {
                                color: '#A9D1D7'
                            },
                            type: 'value',
                            min: 0,
                            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,
                        data: [{ value: val }],
                        splitNumber: 25,
                        axisLine: {
                            show: true,
                            width: 8,
                            lineStyle: {
                                normal: {
                                    color: '#66DDE9' // 线条颜色
                                }
                            },
                            areaStyle: {
                                // 区域填充样式
                                normal: {
                                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                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
                            }
                        }

                    }
                ]
            }

            option && myChart.setOption(option)
        },

        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'
                    }
                },
                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: '#66DDE9'
                                        color: '#F39302'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(102,221,233,0)'
                                    }]),

                                    shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                                    shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                                        color: '#E5F302'
                                    }])
                                },
                                labelLine: {
                                    show: false
                                },
                                label: {
                                    show: false
                                }
                            },
                            data: y
                        }
                    ]
                }

                option && myChart.setOption(option)
            },
            // 企业概况
            SelectCount () {
                var that = this
                SelectCount().then((res) => {
                    that.ncnum = res.data.data.ncnum
                    that.rynum = res.data.data.rynum
                })
            },
            // 大屏销售统计
            selctSaletCount () {
                var that = this
                selctSaletCount().then((res) => {
                    that.salaNumY = res.data.data
                    this.initLine('TrendEcharts')
                })
            },
            // 按行政区统计市场流通
            selectMarketDistrict () {
                var that = this
                selectMarketDistrict().then((res) => {
                    that.marketDistrict = res.data.data
                })
            },
            // 统计今年和去年的销售总额
            selctSaletZ () {
                var that = this
                selctSaletZ().then((res) => {
                    that.salaNum = res.data.data[0].num.toString().split('')
                })
            },
            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

                    var znum = res.data.data.num
                    // 使用率
                    var syl = (that.landsnum / znum * 100).toFixed(1)
                    // 未使用率
                    var wsyl = (that.landwnum / znum * 100).toFixed(1)

                    this.initPie('BeingEcharts', syl)
                    this.initPie('LeisureEcharts', wsyl)
                })
            },
            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
                this.setMarketChart('marketChartQx')
            },
            goPath (path) {
                this.$router.push(path)
            },
            setMarketChart (dom) {
                const chartDom = document.getElementById(dom)
                console.log(chartDom, 456)
                const myChart = this.$echarts.init(chartDom)
                var marketData = this.marketDistrict
                var geoCoordMap = {}
                var GZData = []
                geoCoordMap['出发地'] = [115.17473025869447, 27.407869370774904]
                for (let i = 0; i < marketData.length; i++) {
                    var xy = []
                    var xs = {}
                    var fram = {}
                    var framList = []
                    xy.push(marketData[i].lat)
                    xy.push(marketData[i].lng)
                    xs = {
                        name: marketData[i].name,
                        value: marketData[i].num
                    }
                    fram = {
                        name: '出发地'
                    }
                    framList.push(fram)
                    framList.push(xs)
                    GZData.push(framList)
                    geoCoordMap[marketData[i].name] = xy
                }

                var seriesMap = [['出发地', GZData]]

                // 初始化数据
                // var geoCoordMap = data.result.geoCoordMap;
                //
                // var seriesMap = data.result.seriesMap;
                var convertData = function (data) {
                    var res = []
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i]
                        var fromCoord = geoCoordMap[dataItem[0].name]
                        var toCoord = geoCoordMap[dataItem[1].name]
                        if (fromCoord && toCoord) {
                            // cnt定义数量，这里面随意增加自定义属性
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                cnt: dataItem[1].value,
                                coords: [fromCoord, toCoord]
                            })
                        }
                    }
                    return res
                }
                // 初始化series
                var color = ['#a6c84c', '#ffa022', '#46bee9']
                var series = []

                seriesMap.forEach(function (item, i) {
                    series.push({
                            name: item[0],
                            type: 'lines',
                            zlevel: 1,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0,
                                symbol: 'triangle', // 箭头方式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                                symbolSize: 20
                                // loop: false
                            },
                            tooltip: {
                                formatter: function (params, ticket, callback) {
                                    // 鼠标悬浮提示信息获取自定义的结果
                                    // var htm = `<div><span>出发地：${params.data.fromName}</span>
                                    // <br><span>目的地：${params.data.toName}</span>
                                    // <br><span>订单量：${params.data.cnt}</span>
                                    // </div>`
                                    // return htm
                            {
                                value: 26,
                                name: 'rose2',
                                itemStyle: {
                                    color: '#00F0FF'
                                },
                                labelLine: {
                                    show: false
                                },
                                label: {
                                    show: false
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: color[i],
                                    width: 1,
                                    opacity: 0.4,
                                    curveness: 0.2
                                }
                            },
                            data: convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            tooltip: {
                                formatter: function (params, ticket, callback) {
                                    return params.data.name
                                }
                            },
                            label: {
                                normal: {
                            }
                        ]
                    },
                    { // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: 'pie',
                        radius: ['44%', '62%'],
                        data: [
                            {
                                value: 2,
                                itemStyle: {
                                    color: 'transparent'
                                },
                                labelLine: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}'
                                    length: 24,
                                    length2: 16,
                                    color: '#fff',
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                },
                                label: {
                                    color: '#A9D1D7',
                                    fontSize: 16,
                                    position: 'outside',
                                    formatter: '{a|2}\n离线',
                                    rich: {
                                        a: {
                                            color: '#EBC802',
                                            fontSize: 22,
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }
                            },
                            symbolSize: function (val) {
                                return 16
                            },
                            itemStyle: {
                                normal: {
                                    color: color[i]
                                }
                            },
                            data: item[1].map(function (dataItem) {
                                return {
                                    name: dataItem[1].name,
                                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                                }
                            })
                        })
                })

                var option = {
                    backgroundColor: '#404a59',
                    tooltip: {
                        trigger: 'item'
                            },
                            {
                                value: 26,
                                itemStyle: {
                                    color: 'transparent'
                                }
                            }
                        ]
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'bottom',
                        left: 'right',
                        data: [''],
                        textStyle: {
                            color: '#fff'

                    { // 指示线
                        // 通过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|26}\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)

            var x = []
            var y = []
            for (let i = 1; i <= 12; i++) {
                x.push(i)
                y.push(that.salaNumY[i])
            }

            const option = {
                tooltip: {},
                grid: {
                    top: '16%',
                    left: '6%',
                    right: '6%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {

                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        selectedMode: 'single'
                        axisLabel: {
                            // 坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#A9D1D7',
                                margin: 8
                            }
                        },
                        axisTick: { show: false },
                        data: x
                    }
                ],
                yAxis: [
                    {
                        name: '（元）',
                        nameTextStyle: {
                            color: '#A9D1D7'
                        },
                        type: 'value',
                        min: 0,
                        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)'
                                }]),

                                shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                                shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: y
                    }
                ]
            }

            option && myChart.setOption(option)
        },
        // 企业概况
        SelectCount () {
            var that = this
            SelectCount().then((res) => {
                that.ncnum = res.data.data.ncnum
                that.rynum = res.data.data.rynum
            })
        },
        // 大屏销售统计
        selctSaletCount () {
            var that = this
            selctSaletCount().then((res) => {
                that.salaNumY = res.data.data
                this.initLine('TrendEcharts')
            })
        },
        // 按行政区统计市场流通
        selectMarketDistrict () {
            var that = this
            selectMarketDistrict().then((res) => {
                that.marketDistrict = res.data.data
            })
        },
        // 统计今年和去年的销售总额
        selctSaletZ () {
            var that = this
            selctSaletZ().then((res) => {
                that.salaNum = res.data.data[0].num.toString().split('')
            })
        },
        getFarmingCount () {
            var that = this
            var deptId = '1123598813738675201'

            getFarmingCount(deptId).then((res) => {
                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

                var znum = res.data.data.num
                // 使用率
                var syl = (that.landsnum / znum * 100).toFixed(1)
                // 未使用率
                var wsyl = (that.landwnum / znum * 100).toFixed(1)

                this.initPie('BeingEcharts', syl)
                this.initPie('LeisureEcharts', wsyl)
            })
        },
        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
            this.setMarketChart('marketChartQx')
        },
        goPath () {
            this.$router.push({
                path: '/farmDetails',
                query: {
                    ...this.farmDetails
                }
            })
        },
        setMarketChart (dom) {
            const chartDom = document.getElementById(dom)
            console.log(chartDom, 456)
            const myChart = this.$echarts.init(chartDom)
            var marketData = this.marketDistrict
            var geoCoordMap = {}
            var GZData = []
            geoCoordMap['出发地'] = [115.17473025869447, 27.407869370774904]
            for (let i = 0; i < marketData.length; i++) {
                var xy = []
                var xs = {}
                var fram = {}
                var framList = []
                xy.push(marketData[i].lat)
                xy.push(marketData[i].lng)
                xs = {
                    name: marketData[i].name,
                    value: marketData[i].num
                }
                fram = {
                    name: '出发地'
                }
                framList.push(fram)
                framList.push(xs)
                GZData.push(framList)
                geoCoordMap[marketData[i].name] = xy
            }

            var seriesMap = [['出发地', GZData]]

            // 初始化数据
            // var geoCoordMap = data.result.geoCoordMap;
            //
            // var seriesMap = data.result.seriesMap;
            var convertData = function (data) {
                var res = []
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i]
                    var fromCoord = geoCoordMap[dataItem[0].name]
                    var toCoord = geoCoordMap[dataItem[1].name]
                    if (fromCoord && toCoord) {
                        // cnt定义数量，这里面随意增加自定义属性
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            cnt: dataItem[1].value,
                            coords: [fromCoord, toCoord]
                        })
                    }
                }
                return res
            }
            // 初始化series
            var color = ['#a6c84c', '#ffa022', '#46bee9']
            var series = []

            seriesMap.forEach(function (item, i) {
                series.push({
                    name: item[0],
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: 'triangle', // 箭头方式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                        symbolSize: 20
                        // loop: false
                    },
                    geo: {
                        map: 'china',
                        center: [109.525404, 32.949728],
                    tooltip: {
                        formatter: function (params, ticket, callback) {
                            // 鼠标悬浮提示信息获取自定义的结果
                            // var htm = `<div><span>出发地：${params.data.fromName}</span>
                            // <br><span>目的地：${params.data.toName}</span>
                            // <br><span>订单量：${params.data.cnt}</span>
                            // </div>`
                            // return htm
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.4,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                    {
                        name: item[0],
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        tooltip: {
                            formatter: function (params, ticket, callback) {
                                return params.data.name
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: '{a}',
                                // position: 'inside',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#777'
                            },
                            emphasis: {}
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        selectedMode: 'single',
                        zoom: 1.5,
                        roam: true,
                        symbolSize: function (val) {
                            return 16
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#404a59'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                                color: color[i]
                            }
                        }
                        },
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                            }
                        })
                    })
            })

            var option = {
                backgroundColor: '#404a59',
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    data: [''],
                    textStyle: {
                        color: '#fff'
                    },
                    series: series
                }
                this.$echarts.registerMap('china', chinaJSON)
                myChart.setOption(option)
                    selectedMode: 'single'
                },
                geo: {
                    map: 'china',
                    center: [109.525404, 32.949728],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{a}',
                            // position: 'inside',
                            backgroundColor: '#fff',
                            padding: [3, 5],
                            borderRadius: 3,
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0.5)',
                            color: '#777'
                        },
                        emphasis: {}
                    },
                    selectedMode: 'single',
                    zoom: 1.5,
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: series
            }
            this.$echarts.registerMap('china', chinaJSON)
            myChart.setOption(option)
        }
    }
}
</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-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');
}

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

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

        .content {
            display: flex;
            flex-direction: column;
            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;

                .t {
                    height: 244px;
                .content-box {
                    display: flex;
                    align-items: center;
                    flex-direction: column;

                    .content-box {
                    .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 {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .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%
                                );
                            }
                        .echarts-box {
                            width: 152px;
                            height: 152px;
                        }

                        .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%
                                );
                            }
                        .state {
                            margin-top: 15px;
                            font-size: 16px;
                            font-weight: 400;
                        }

                        .pel-num,
                        .nc-num {
                        .text {
                            display: flex;
                            align-items: center;
                            position: relative;
                            align-items: baseline;
                            margin-top: 10px;
                            display: flex;

                            width: 342px;
                            height: 70px;
                            border-radius: 35px 35px 35px 35px;
                            .num {
                                font-size: 27px;
                            }

                            .text {
                                font-size: 21px;
                            .unit {
                                margin-left: 6px;
                                font-size: 16px;
                                font-weight: 400;
                                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;
            .b {
                flex: 1;

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

                        .being {
                            margin-top: 30px;
                            width: 152px;
                    .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);
                    }

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

                            .text {
                                .num {
                                    color: #69e2ed;
                                }
                            }
                        }
                .content-box {
                    padding: 7px 30px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;

                        .leisure {
                            margin-top: 30px;
                            width: 152px;
                    ul {
                        flex: 1;
                        height: 100%;
                        overflow-y: auto;
                        scrollbar-width: thin;

                            .state {
                                color: #c1c1c1;
                            }

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

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

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

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

                            .text {
                            & > div {
                                display: flex;
                                align-items: baseline;
                                margin-top: 10px;
                                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: 27px;
                                    font-size: 18px;
                                    color: #7ccfd6;
                                }

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

                .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;
                            }
                        li:last-child {
                            border: none;
                        }
                    }
                }
            }
        }
    }

        .right-box {
            right: 0;
            background: linear-gradient(
                            -270deg,
                            rgba(4, 41, 64, 0) 0%,
                            #042940 100%
            );
    .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 {
                            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;
                        }
                    }
                }
            }
        }

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

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

                & > div {
                    position: relative;
                    margin-top: 28px;
                .content-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .title-box {
                        position: absolute;
                    .equipment {
                        width: 382px;
                        height: 100%;
                    }
                }
            }

            .c {
                height: 214px;

                .title-box {
                    .text {
                        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%;
                    .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;
                            }
                        }
                    }
                }
            }

                        .text {
                            margin-left: 10px;
                        }
            .b {
                flex: 1;

                        .em {
                .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;
                            top: 3px;
                            right: -54px;
                            width: 74px;
                            height: 19px;
                            background: url(/img/icon/r-icon.png) no-repeat;
                            background-size: 100% 100%;
                            width: 8px;
                            height: 8px;
                        }

                        .l {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 378px;
                            height: 5px;
                            background: url(/img/icon/line.png) no-repeat;
                            background-size: 100% 100%;
                        .t-l {
                            top: -1px;
                            left: -1px;
                            border-top: 2px solid #7ccfd6;
                            border-left: 2px solid #7ccfd6;
                        }

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

                    .content-box {
                        position: absolute;
                        top: 34px;
                        width: 100%;
                        height: calc(100% - 34px);
                    .trend {
                        flex: 1;
                        margin-top: 20px;
                        width: 372px;
                    }
                }
            }
        }
    }

        .down-menu {
    .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;
            cursor: pointer;

            i {
                font-size: 12px;
            }
        }

        .nc-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: absolute;
            top: 0;
            left: 172px;
            width: 144px;
            height: 224px;
            overflow-x: hidden;
            overflow-y: auto;
            background: rgba(6, 28, 29, 0.8);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #69e2ed;
            box-sizing: border-box;

            .title {
                width: 100%;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 20px;
            }

            .box {
                margin-top: 16px;
                padding-left: 20px;
                width: 100%;
                height: 24px;
                text-align: left;
            }

            .box.first {
                margin-top: 0 !important;
            }
        }
    }

    .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;
            position: absolute;
            top: 102px;
            left: 438px;
            width: 146px;
            height: 156px;
            width: 100%;
            height: 100%;

            & > 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;
            li {
                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;
                    display: flex;

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

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

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

                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(1) {
                .icon {
                    background: url(/img/icon/nc.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

                li:nth-child(3) {
                    .icon {
                        background: url(/img/icon/jk.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(4) {
                    .icon {
                        background: url(/img/icon/tr.png) no-repeat;
                        background-size: 100% 100%;
                    }
            li:nth-child(3) {
                .icon {
                    background: url(/img/icon/jk.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

                li:nth-child(5) {
                    .icon {
                        background: url(/img/icon/qx.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 {
    .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;
            background: rgba(7, 7, 7, 0.4);
            width: 1208px;
            height: 708px;

            .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%;
                }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>