农场详情页面相关

shuishen

2022-07-08 5fa2b30b652350b0a1276d07160d408d15bd9e7d

农场详情页面相关

 src/components/remote/index.vue

@@ -1,7 +1,15 @@
/* eslint-disable camelcase */
<template>
    <div style="height: 100%; width: 100%; position: relative;">
        <div class="location-box">
        <div v-show="SelectTimeFlag">
            <select-time ref="leftRoller" :leftOrRight="'left'" class="l-time"></select-time>
        </div>

        <div v-show="SelectTimeFlag">
            <select-time ref="rightRoller" :leftOrRight="'right'" class="r-time"></select-time>
        </div>

        <div class="location-box" v-show="!rollerCloseShow && !screenShow">
            <el-input
                placeholder="请输入地点/经纬度：113.25，30.53"
                v-model="location"
@@ -12,21 +20,21 @@
        </div>

        <div class="tool-box">
            <div class="measure" v-show="screenShow">
            <!-- <div class="measure" v-show="screenShow">
                <div class="btn">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
                    标注
                </div>
            </div>
            </div>-->

            <div class="measure" v-show="!screenShow">
                <div class="btn">
                <div class="btn" @click="deactivate">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
                    标注
                    清除
                </div>
                <div class="line"></div>
                <div class="btn" @click="distanceSurface">
@@ -45,7 +53,7 @@
            </div>

            <div v-show="!rollerCloseShow && !screenShow" class="func">
                <div class="btn">
                <div class="btn" style="color: #fff; background: #469CF3; height: 100%;">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
@@ -95,6 +103,7 @@

    data () {
        return {
            SelectTimeFlag: false,
            rollerCloseShow: false,
            screenShow: false,
            location: ''
@@ -138,76 +147,6 @@
            )

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

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

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

            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(
@@ -354,12 +293,13 @@
            }
        },

        closeSplitScreen () {
            this.screenShow = false
        },

        splitScreen () {
            this.screenShow = true
            this.deactivate()
        },

        closeSplitScreen () {
            this.screenShow = false
        },

        distanceSurface () {
@@ -376,19 +316,27 @@
                    key: 'e9533f5acb2ac470b07f406a4d24b4f0'
                })
                global.viewer.mapSplit.enable = true

                global.viewer.mapSplit.addBaseLayer(baselayerElc)
            } else {
                global.viewer.mapSplit.enable = true
            }

            num++
            this.rollerCloseShow = true
            this.SelectTimeFlag = true
            this.deactivate()
            this.$refs.leftRoller.init()
            this.$refs.rightRoller.init()
        },

        closeRollerShutters () {
            global.viewer.mapSplit.enable = false
            this.rollerCloseShow = false
            this.SelectTimeFlag = false

            this.$refs.leftRoller.clearLayer()
            this.$refs.rightRoller.clearLayer()

            // global.viewer.imageryLayers.removeAll()
        }
    }
}
@@ -415,6 +363,22 @@
    width: 320px;
}

.l-time {
    position: absolute;
    top: 30px;
    left: 25%;
    transform: translate(-50%, 0);
    z-index: 99;
}

.r-time {
    position: absolute;
    top: 30px;
    right: 25%;
    transform: translate(50%, 0);
    z-index: 99;
}

.tool-box {
    display: flex;
    justify-content: space-between;

 src/components/selectTime/index.vue

New file
@@ -0,0 +1,307 @@
<template>
    <!--时间线-->
    <div>
        <div class="current-select" @click="listFlag = !listFlag">
            <div class="title">2019-2M第一季度</div>
            <i class="el-icon-caret-bottom"></i>
        </div>

        <div class="list-box" v-show="listFlag">
            <ul>
                <li
                    v-for="(item, index) in selectList"
                    :key="index"
                    @click="currentClick(item, index)"
                >{{item.title}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
let leftCurrentLayer = null
let rightCurrentLayer = null

window.splitScreenOneLayers = null
window.splitScreenTwoLayers = null
window.splitScreenThreeLayers = null
window.splitScreenFourLayers = null

export default {
    name: 'selectTime',
    props: ['leftOrRight', 'type'],
    data () {
        return {
            selectList: [{
                title: '2012-2M第一季度'
            }, {
                title: '2013-2M第一季度'
            }, {
                title: '2014-2M第一季度'
            }, {
                title: '2015-2M第一季度'
            }, {
                title: '2016-2M第一季度'
            }, {
                title: '2017-2M第一季度'
            }, {
                title: '2018-2M第一季度'
            }, {
                title: '2019-2M第一季度'
            }, {
                title: '2020-2M第一季度'
            }, {
                title: '2021-2M第一季度'
            }, {
                title: '2022-2M第一季度'
            }],
            listFlag: false,
            currentTitle: null,
            currentIndex: null
        }
    },
    mounted () {

    },

    methods: {
        init () {
            this.currentTitle = this.selectList[0].title
            this.currentIndex = 0

            if (this.leftOrRight == 'left') {
                this.leftAddLayer()
            } else {
                this.rightAddLayer()
            }
        },

        clearLayer () {
            if (this.leftOrRight == 'left') {
                this.removeLeftAddLayer()
            } else {
                this.removeRightAddLayer()
            }
        },

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

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

        removeLeftAddLayer () {
            if (leftCurrentLayer != null) {
                global.viewer.imageryLayers.remove(leftCurrentLayer)
                leftCurrentLayer = null
            }
        },

        removeRightAddLayer () {
            if (rightCurrentLayer != null) {
                global.viewer.imageryLayers.remove(rightCurrentLayer)
                rightCurrentLayer = null
            }
        },

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

        removeLayers (variable) {
            if (window[variable] != null) {
                window[this.type].imageryLayers.remove(window[variable])
                window[variable] = null
            }
        },

        currentClick (item, index) {
            if (this.currentIndex == index) {
                this.listFlag = false
                return
            }

            if (this.leftOrRight) {
                if (this.leftOrRight == 'left') {
                    this.removeLeftAddLayer()
                    this.leftAddLayer()
                } else {
                    this.removeRightAddLayer()
                    this.rightAddLayer()
                }

                this.listFlag = false
            } else {
                if (this.type == 'viewerOne') {
                    this.removeLayers('splitScreenOneLayers')
                    this.addLayers('splitScreenOneLayers')
                } else if (this.type == 'viewerTwo') {
                    this.removeLayers('splitScreenTwoLayers')
                    this.addLayers('splitScreenTwoLayers')
                } else if (this.type == 'viewerThree') {
                    this.removeLayers('splitScreenThreeLayers')
                    this.addLayers('splitScreenThreeLayers')
                } else if (this.type == 'viewerFour') {
                    this.removeLayers('splitScreenFourLayers')
                    this.addLayers('splitScreenFourLayers')
                }

                this.listFlag = false
            }
        }
    },

    destroyed () {
        if (this.type) {
            if (this.type == 'viewerOne') {
                this.removeLayers('splitScreenOneLayers')
                this.addLayers('splitScreenOneLayers')
            } else if (this.type == 'viewerTwo') {
                this.removeLayers('splitScreenTwoLayers')
                this.addLayers('splitScreenTwoLayers')
            } else if (this.type == 'viewerThree') {
                this.removeLayers('splitScreenThreeLayers')
                this.addLayers('splitScreenThreeLayers')
            } else if (this.type == 'viewerFour') {
                this.removeLayers('splitScreenFourLayers')
                this.addLayers('splitScreenFourLayers')
            }
        }
    }
}
</script>

<style  lang="scss" scoped>
.current-select {
    padding: 0 15px;
    width: 166px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #717171;
    cursor: pointer;
}

.list-box {
    position: absolute;
    top: 32px;
    width: 166px;
    height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #717171;

    li {
        line-height: 30px;
    }
}
</style>

 src/components/splitScreen/index.vue

@@ -1,10 +1,18 @@
/* eslint-disable camelcase */
<template>
    <div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
        <div class="map-box" id="viewer-container-one"></div>
        <div class="map-box" id="viewer-container-two"></div>
        <div class="map-box" id="viewer-container-three"></div>
        <div class="map-box" id="viewer-container-four"></div>
        <div class="map-box" id="viewer-container-one">
            <select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-two">
            <select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-three">
            <select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-four">
            <select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
        </div>

        <div class="line-row"></div>
        <div class="line-column"></div>
@@ -12,10 +20,10 @@
</template>

<script>
let viewerOne = null
let viewerTwo = null
let viewerThree = null
let viewerFour = null
window.viewerOne = null
window.viewerTwo = null
window.viewerThree = null
window.viewerFour = null

let handlerTL = null
let handlerTR = null
@@ -39,7 +47,7 @@

        this.$nextTick(() => {
            function initViewer () {
                viewerOne = new global.DC.Viewer('viewer-container-one', {
                window.viewerOne = new global.DC.Viewer('viewer-container-one', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -49,7 +57,7 @@
                    }
                })

                viewerTwo = new global.DC.Viewer('viewer-container-two', {
                window.viewerTwo = new global.DC.Viewer('viewer-container-two', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -59,7 +67,7 @@
                    }
                })

                viewerThree = new global.DC.Viewer('viewer-container-three', {
                window.viewerThree = new global.DC.Viewer('viewer-container-three', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -69,7 +77,7 @@
                    }
                })

                viewerFour = new global.DC.Viewer('viewer-container-four', {
                window.viewerFour = new global.DC.Viewer('viewer-container-four', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -80,25 +88,25 @@
                })

                if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                    viewerOne.setOptions({
                    window.viewerOne.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerTwo.setOptions({
                    window.viewerTwo.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerThree.setOptions({
                    window.viewerThree.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerFour.setOptions({
                    window.viewerFour.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })
                }

                // 影像
                viewerOne.imageryLayers.addImageryProvider(
                window.viewerOne.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -108,7 +116,7 @@
                    })
                )

                viewerTwo.imageryLayers.addImageryProvider(
                window.viewerTwo.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -118,7 +126,7 @@
                    })
                )

                viewerThree.imageryLayers.addImageryProvider(
                window.viewerThree.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -128,83 +136,13 @@
                    })
                )

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

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

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

@@ -229,9 +167,9 @@
                //     })
                // )

                that.initHandler(viewerOne, viewerTwo, viewerThree, viewerFour)
                that.initHandler(window.viewerOne, window.viewerTwo, window.viewerThree, window.viewerFour)

                viewerOne.camera.setView({
                window.viewerOne.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -246,7 +184,7 @@
                    }
                })

                viewerTwo.camera.setView({
                window.viewerTwo.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -261,7 +199,7 @@
                    }
                })

                viewerThree.camera.setView({
                window.viewerThree.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -276,7 +214,7 @@
                    }
                })

                viewerFour.camera.setView({
                window.viewerFour.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -376,15 +314,15 @@
        handlerBL = null
        handlerBR = null

        viewerOne.destroy()
        viewerTwo.destroy()
        viewerThree.destroy()
        viewerFour.destroy()
        window.viewerOne.destroy()
        window.viewerTwo.destroy()
        window.viewerThree.destroy()
        window.viewerFour.destroy()

        viewerOne = null
        viewerTwo = null
        viewerThree = null
        viewerFour = null
        window.viewerOne = null
        window.viewerTwo = null
        window.viewerThree = null
        window.viewerFour = null
    }
}
</script>
@@ -407,8 +345,17 @@
    flex-wrap: wrap;

    .map-box {
        position: relative;
        width: 50%;
        height: 50%;

        .time {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 99;
        }
    }

    .line-row {

 src/components/timeLine/index.vue

@@ -31,117 +31,97 @@
</template>

<script>
let currentYxOne = null
let currentYxTwo = null

export default {
    name: 'timeLine',
    data () {
        return {
            timeIndex: 2,
            timeLineList: [{
                timestamp: '2012',
                color: '#999',
                fontsize: 18,
                size: '28',
                bgcolor: '#e4e7ed',
                icon: 'el-iconprev',
                year: '2012',
                info: '2012第一季度'
            }, {
                timestamp: '2013年',
                color: '#999',
                fontsize: 18,
                size: '28',
                bgcolor: '#e4e7ed',
                year: '2013',
                info: '2012第二季度'
            }, {
                timestamp: '2014年',
                color: '#999',
                fontsize: 18,
                size: '28',
                bgcolor: '#e4e7ed',
                year: '2014',
                info: '2012第三季度'
            }, {
                timestamp: '2015年',
                color: '#999',
                fontsize: 18,
                year: '2015',
                size: '28',
                bgcolor: '#e4e7ed',
                info: '2012第四季度'
            }, {
                timestamp: '2016年',
                color: '#999',
                fontsize: 18,
                size: '28',
                year: '2016',
                bgcolor: '#e4e7ed',
                info: '2013第一季度'
            }, {
                timestamp: '2017年',
                color: '#999',
                fontsize: 18,
                size: '28',
                bgcolor: '#e4e7ed',
                year: '2017',
                info: '2013第二季度'
            }, {
                timestamp: '2018年',
                color: '#999',
                fontsize: 18,
                size: '28',
                bgcolor: '#e4e7ed',
                year: '2018',
                info: '2013第三季度'
            }, {
                timestamp: '2019年',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2013第四季度'
            }, {
                timestamp: '2019年',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2014第一季度'
            }, {
                timestamp: '2019年',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2014第二季度'
            }, {
                timestamp: '2019年',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2014第三季度'
            }, {
                timestamp: '2019年',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2014第四季度'
            }, {
                timestamp: '2019',
                color: '#999',
                fontsize: 18,
                year: '2019',
                bgcolor: '#e4e7ed',
                size: '28',
                info: '2015第一季度'
            }],
            timeLineList: [
                {
                    timestamp: '2012',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    bgcolor: '#e4e7ed',
                    icon: 'el-iconprev',
                    year: '2012',
                    info: '2012第一季度'
                }, {
                    timestamp: '2013年',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    bgcolor: '#e4e7ed',
                    year: '2013',
                    info: '2012第二季度'
                }, {
                    timestamp: '2014年',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    bgcolor: '#e4e7ed',
                    year: '2014',
                    info: '2012第三季度'
                }, {
                    timestamp: '2015年',
                    color: '#999',
                    fontsize: 18,
                    year: '2015',
                    size: '28',
                    bgcolor: '#e4e7ed',
                    info: '2012第四季度'
                }, {
                    timestamp: '2016年',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    year: '2016',
                    bgcolor: '#e4e7ed',
                    info: '2013第一季度'
                }, {
                    timestamp: '2017年',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    bgcolor: '#e4e7ed',
                    year: '2017',
                    info: '2013第二季度'
                }, {
                    timestamp: '2018年',
                    color: '#999',
                    fontsize: 18,
                    size: '28',
                    bgcolor: '#e4e7ed',
                    year: '2018',
                    info: '2013第三季度'
                }, {
                    timestamp: '2019年',
                    color: '#999',
                    fontsize: 18,
                    year: '2019',
                    bgcolor: '#e4e7ed',
                    size: '28',
                    info: '2013第四季度'
                }, {
                    timestamp: '2019年',
                    color: '#999',
                    fontsize: 18,
                    year: '2019',
                    bgcolor: '#e4e7ed',
                    size: '28',
                    info: '2014第一季度'
                }, {
                    timestamp: '2019年',
                    color: '#999',
                    fontsize: 18,
                    year: '2019',
                    bgcolor: '#e4e7ed',
                    size: '28',
                    info: '2014第二季度'
                }],
            currentObj: {
                timestamp: '2012',
                color: '#999',
@@ -157,8 +137,100 @@
            rightStart: true
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.addBaseLayer()
        })
    },

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

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

            if (currentYxTwo != null) {
                global.viewer.imageryLayers.remove(currentYxTwo)
                currentYxTwo = null
            }
        },
        selectTime (e, item, index) {
            if (this.currentInd == index) return

            this.removeBaseLayer()

            this.currentObj = item
            this.currentInd = index

@@ -166,66 +238,86 @@
                this.$refs.TimePointer.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) + 14 + 'px'
                this.$refs.TextPopup.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) - 38 + 'px'
            } else {
                if (e.target.offsetLeft <= 528) {
                if (e.target.offsetLeft <= 480) {
                    this.$refs.TimePointer.style.left = e.target.offsetLeft + 14 + 'px'
                    this.$refs.TextPopup.style.left = e.target.offsetLeft - 38 + 'px'
                }
            }

            this.addBaseLayer()
            // offsetX
        },
        changeActive (index) {
            this.timeIndex = index
        },
        moveLeft () {
            const leftWidth = parseInt(this.$refs.mytimeline.style.left)
            const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
            // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
            // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)

            if (this.leftStart == false) {
                return
            } else {
                this.rightStart = true
            }
            // if (this.leftStart == false) {
            //     return
            // } else {
            //     this.rightStart = true
            // }

            if (this.currentInd <= 0) return

            this.removeBaseLayer()

            this.currentInd = this.currentInd - 1
            this.currentObj = this.timeLineList[this.currentInd]

            if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
                if (leftWidth + 48 < 0) {
                    this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
                } else {
                    this.$refs.mytimeline.style.left = 0 + 'px'
            this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) - 48 + 'px'
            this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) - 48 + 'px'

                    this.leftStart = false
                }
            }
            this.addBaseLayer()

            // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
            //     if (leftWidth + 48 < 0) {
            //         this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
            //     } else {
            //         this.$refs.mytimeline.style.left = 0 + 'px'

            //         this.leftStart = false
            //     }
            // }
        },
        moveRight () {
            const leftWidth = parseInt(this.$refs.mytimeline.style.left)
            const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
            // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
            // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)

            if (this.rightStart == false) {
                return
            } else {
                this.leftStart = true
            }
            // if (this.rightStart == false) {
            //     return
            // } else {
            //     this.leftStart = true
            // }

            if (this.currentInd >= this.timeLineList.length - 1) return

            this.removeBaseLayer()

            this.currentInd = this.currentInd + 1
            this.currentObj = this.timeLineList[this.currentInd]

            if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
                if (Math.abs(leftWidth - 48) < boxWidth - 528) {
                    this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
                } else {
                    this.$refs.mytimeline.style.left = -(boxWidth - 528) + 'px'
            this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) + 48 + 'px'
            this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) + 48 + 'px'

                    this.rightStart = false
                }
            }
            this.addBaseLayer()

            // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
            //     if (Math.abs(leftWidth - 48) < boxWidth - 480) {
            //         this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
            //     } else {
            //         this.$refs.mytimeline.style.left = -(boxWidth - 480) + 'px'

            //         this.rightStart = false
            //     }
            // }
        }
    },

    destroyed () {
        this.removeBaseLayer()
    }
}
</script>
@@ -252,6 +344,7 @@

        img {
            width: 20px;
            cursor: pointer;
        }

        .year-box {
@@ -265,11 +358,11 @@

    .time-line-box {
        position: relative;
        width: 528px;
        width: 480px;
        height: 16px;
        .ul_box {
            position: relative;
            width: 528px;
            width: 480px;
            height: 16px;
            overflow-x: hidden;
            display: flex;

 src/styles/index.scss

@@ -1,5 +1,6 @@
@import "./element-ui.scss";
@import "./publicBox/arc-nav-bar.scss";
@import "./publicBox/trace-table.scss";

html,
body {

 src/styles/publicBox/trace-table.scss

New file
@@ -0,0 +1,141 @@
.public-trace-table {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1208px;

    background-color: transparent;
    z-index: 99;
    font-size: 14px;
    box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
    border: 1px solid #69E2ED;
    background: rgba(20, 66, 104, 0.8);

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 58px;
        line-height: 58px;
        background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        .logo {
            position: aboslute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
            background: #69E2ED;
        }

        .title {
            position: absolute;
            top: 0;
            left: 25px;
            font-size: 18px;
            font-weight: bold;
            color: #66DDE9;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 28px;
            height: 28px;
            cursor: pointer;
            opacity: 0.6;
        }
    }

    .content {
        clear: both;
        width: 100%;
        height: 500px;
        margin-top: 0px;
        text-align: center;
        overflow-y: auto;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 0 0 8px 8px;

        .farm-profiles {
            position: relative;

            .btn-grounp {
                position: absolute;
                top: 18px;
                right: 20px;

                .details {
                    text-align: right;
                    font-size: 18px;
                    color: #08F4FF;
                    cursor: pointer;
                }

                .scene {
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100px;
                    height: 30px;
                    background: rgba(102, 221, 233, 0.16);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #66DDE9;
                    box-sizing: border-box;

                    img {
                        // width: 70px;
                        height: 24px;
                    }
                }
            }

            .farm-content {

                padding: 30px 20px;
                font-size: 16px;
                color: #fff;

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

                    .l {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-end;
                        width: 100px;
                        height: 50px;
                        color: #A9D1D7;
                    }

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

                        img {
                            margin-right: 16px;
                            width: 102px;
                            height: 102px;
                            border-radius: 4px 4px 4px 4px;
                        }
                    }
                }

            }

        }


    }
}

 src/views/farm/index.vue

@@ -2,14 +2,14 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 14:08:30
 * @Last Modified time: 2022-07-08 20:01:42
* 驾驶舱
*/
<template>
    <div class="container">
        <mapBox ref="modalForm" />

        <div class="header">
        <div class="current-header">
            <div class="return">
                <span @click="prev">
                    <i class="el-icon-back"></i> 返回
@@ -23,6 +23,11 @@
        </div>

        <div class="l-content">
            <div class="t-l-border border-box"></div>
            <div class="t-r-border border-box"></div>
            <div class="b-l-border border-box"></div>
            <div class="b-r-border border-box"></div>

            <div class="tab-btn">
                <div>
                    <div class="item" :class="{on: ncjscz == 'ncjs'}">
@@ -38,17 +43,117 @@
                    </div>
                </div>
            </div>
            <div class="content"></div>
            <div v-show="ncjscz == 'ncjs'" class="detail-box">
                <div class="item">
                    <div class="name">农场名称：</div>
                    <div class="deserve">xx农场</div>
                </div>

                <div class="item">
                    <div class="name">农场名称：</div>
                    <div class="deserve">xx农场</div>
                </div>
            </div>

            <div v-show="ncjscz == 'cz'" class="lists-box nscz">
                <div>
                    <div class="t-border"></div>
                    <div class="t-item">
                        <div>施肥</div>
                        <div>有机肥料、有机肥</div>
                        <div>2022-06-31</div>
                    </div>
                    <div class="b-item">
                        <div>水稻</div>
                        <div>林术</div>
                        <div>株良镇田南村5号地块</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="r-content">
            <div class="t-l-border border-box"></div>
            <div class="t-r-border border-box"></div>
            <div class="b-l-border border-box"></div>
            <div class="b-r-border border-box"></div>

            <div class="tab-btn">
                <div>种养品种</div>
                <div>地块</div>
                <div>物联网设备</div>
                <div>
                    <div class="item" :class="{on: zydksb == 'zy'}">
                        <div @click="zydksb = 'zy'" class="title">种养品种</div>
                        <span></span>
                    </div>
                </div>

                <div>
                    <div class="item" :class="{on: zydksb == 'dk'}">
                        <div @click="zydksb = 'dk'" class="title">地块</div>
                        <span></span>
                    </div>
                </div>

                <div>
                    <div class="item" :class="{on: zydksb == 'sb'}">
                        <div @click="zydksb = 'sb'" class="title">物联网设备</div>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="content"></div>

            <div v-show="zydksb == 'zy'" class="lists-box dk">
                <div>
                    <div class="title">
                        <img src="/img/icon/list-img.png" alt />水稻
                    </div>
                    <div class="num-unit">
                        120
                        <span>亩</span>
                    </div>
                </div>
            </div>

            <div v-show="zydksb == 'dk'" class="lists-box dk">
                <div>
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />某某地块
                    </div>
                    <div class="num-unit">
                        0.24
                        <span>亩</span>
                    </div>
                </div>
            </div>

            <div v-show="zydksb =='sb'" class="lists-box sb">
                <div>
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />监控设备
                    </div>
                    <div class="type off">在线</div>
                </div>
            </div>
        </div>

        <public-box class="public-trace-table">
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农产品溯源码</div>
                <img
                    @click="farmProfiles = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar"></div>
                <div class="table-list">
                    <div class="t-header"></div>
                    <div class="t-body"></div>
                </div>
            </template>
        </public-box>
    </div>
</template>

@@ -57,7 +162,8 @@
export default {
    data () {
        return {
            ncjscz: 'cz'
            ncjscz: 'cz',
            zydksb: 'sb'
        }
    },
    created () {
@@ -87,7 +193,7 @@
    width: 100%;
    height: 100%;

    .header {
    .current-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
@@ -146,6 +252,8 @@

    .l-content,
    .r-content {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 248px;
        width: 440px;
@@ -194,6 +302,200 @@
                }
            }
        }

        .detail-box {
            margin: 20px;
            flex: 1;
            overflow-y: auto;

            .item {
                display: flex;
                align-items: center;
                margin-top: 14px;
                padding: 0 20px;
                height: 56px;
                background: #081e36;
                font-size: 16px;
                color: #84c3d2;

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

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

        .nscz.lists-box {
            margin: 20px;
            flex: 1;
            overflow-y: auto;

            & > div {
                position: relative;
                height: 84px;
                margin-top: 10px;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

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

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

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

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

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

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

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

        .zy.lists-box,
        .dk.lists-box,
        .sb.lists-box {
            margin: 20px;
            flex: 1;
            overflow-y: auto;

            & > div {
                position: relative;
                height: 60px;
                margin-top: 10px;
                padding: 0 20px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                font-size: 18px;
                color: #a9d1d7;

                .title {
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 18px;
                        width: 24px;
                        height: 24px;
                    }
                }

                .num-unit {
                    font-weight: bold;
                    color: #7ccfd6;

                    span {
                        font-size: 16px;
                        font-weight: 400;
                        color: #a9d1d7;
                    }
                }

                .type {
                    font-weight: bold;
                    color: #7ccfd6;
                }

                .off.type {
                    color: #d96b5a;
                }
            }

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

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

        .zy.lists-box {
            & > div {
                height: 80px;
            }
        }

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

        .t-l-border {
            top: -2px;
            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;
        }
    }

    .l-content {