下拉框样式修改，监测数据加载动画

guanqb

2022-08-19 88116dfde5e113f88530f102a545ad8b6b52119e

下拉框样式修改，监测数据加载动画

 src/components/map/index.vue

@@ -269,14 +269,14 @@
                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)
            // const polygon = new global.DC.Polygon(positions)
            // polygon.setStyle({
            //     material: global.DC.Namespace.Cesium.Color.fromBytes(
            //         244, 157, 21,
            //         200
            //     )
            // })
            // farmRegionLayer.addOverlay(polygon)

            if (item.position != '') {
                addLayers.push({ center, name: item.farmName })
@@ -359,7 +359,11 @@
            })

            label.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
                if (item.dictTypeNum == 0) {
                    that.$parent.goToJkDetail(e.overlay.attrParams)
                } else {
                    that.$parent.goToDetail(e.overlay.attrParams)
                }
            })

            const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
@@ -367,7 +371,11 @@
            billboard.attrParams = item

            billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
                if (item.dictTypeNum == 0) {
                    that.$parent.goToJkDetail(e.overlay.attrParams)
                } else {
                    that.$parent.goToDetail(e.overlay.attrParams)
                }
            })
            if (!item.dictTypeNum) {
                siteEntitylayers.addOverlay(label)
@@ -429,6 +437,7 @@
         * 设置地块中心点
         * @param {*} name 对应站点（地块范围）的中心点 --- 对应的名字
         */

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

 src/styles/element-ui.css

@@ -27,6 +27,39 @@
  visibility: hidden;
}

.el-icon-my-nc-menu {
  background: url("/img/icon/nc-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-nc-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.el-icon-my-jksb-menu {
  background: url("/img/icon/jksb-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-jksb-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.el-icon-my-jcsb-menu {
  background: url("/img/icon/jcsb-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-jcsb-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.dialog-fixed {
  margin: 0 !important;
  position: fixed;
@@ -55,13 +88,4 @@
  font-weight: bold;
  background: transparent !important;
  border: none !important;
}

.manage-select {
  background-color: #05243e !important;
}

.manage-option {
  background-color: #05243e !important;
  color: #a5cacc;
}

 src/styles/element-ui.min.css

@@ -1 +1 @@
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-nc-menu{background:url("/img/icon/nc-menu.png") center no-repeat}.el-icon-my-nc-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jksb-menu{background:url("/img/icon/jksb-menu.png") center no-repeat}.el-icon-my-jksb-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jcsb-menu{background:url("/img/icon/jcsb-menu.png") center no-repeat}.el-icon-my-jcsb-menu:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}

 src/styles/element-ui.scss

@@ -102,17 +102,7 @@
    }
}

.manage-select {
    background-color: #05243e!important;
}

// .manage-option:hover {
//     background-color: #0e7894!important;
// }
.manage-option {
    background-color: #05243e!important;
    color: #a5cacc;
}




 src/styles/publicBox/farm-oper-table.css

New file
@@ -0,0 +1,193 @@
.el-scrollbar {
  position: relative;
}

.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.public-farm-oper-table {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1208px;
  background-color: transparent;
  z-index: 99;
  font-size: 16px;
  box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.16);
  border: 1px solid #69E2ED;
  background: rgba(20, 66, 104, 0.8);
}

.public-farm-oper-table .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+ */
}

.public-farm-oper-table .header .logo {
  position: aboslute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: #69E2ED;
}

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

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

.public-farm-oper-table .content {
  display: flex;
  flex-direction: column;
  clear: both;
  width: 100%;
  height: 600px;
  margin-top: 0px;
  text-align: center;
  overflow: hidden;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0 0 8px 8px;
}

.public-farm-oper-table .content .action-bar {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.public-farm-oper-table .content .action-bar > .search .search-input input {
  color: #fff;
  background: rgba(33, 186, 196, 0.2);
  border-color: #21BAC4;
}

.public-farm-oper-table .content .action-bar > .search .select-type input {
  color: #fff;
  background: rgba(33, 186, 196, 0.2);
  border-color: #21BAC4;
}

.public-farm-oper-table .content .action-bar > .search .select-plot {
  margin-left: 30px;
}

.public-farm-oper-table .content .action-bar > .search .select-plot input {
  color: #fff;
  background: rgba(33, 186, 196, 0.2);
  border-color: #21BAC4;
}

.public-farm-oper-table .content .action-bar .btn-grounp .search {
  color: #fff;
  background: #21BAC4;
  border-color: #21BAC4;
}

.public-farm-oper-table .content .action-bar .btn-grounp .reset {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.public-farm-oper-table .content .table-list {
  height: calc(100% - 74px);
  display: flex;
  flex-direction: column;
}

.public-farm-oper-table .content .table-list .t-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, rgba(49, 137, 153, 0.5) 0%, rgba(49, 161, 168, 0.5) 44%, rgba(49, 137, 153, 0.5) 100%);
}

.public-farm-oper-table .content .table-list .t-body {
  height: calc(100% - 56px);
  overflow-y: auto;
}

.public-farm-oper-table .content .table-list .table-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  border-bottom: 1px solid #E8ECEF;
  color: #fff;
}

.public-farm-oper-table .content .table-list .table-list:last-child {
  border: none;
}

.public-farm-oper-table .content .table-list .t-header > div:first-child,
.public-farm-oper-table .content .table-list .table-list > div:first-child {
  width: 132px;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(2),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(2) {
  width: 124px;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(3),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(3) {
  width: 172px;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(4),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(4) {
  width: 144px;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(5),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(5) {
  width: 132px;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(6),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(6) {
  flex: 1;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(7),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(7) {
  flex: 1;
}

.public-farm-oper-table .content .table-list .t-header > div:nth-child(8),
.public-farm-oper-table .content .table-list .table-list > div:nth-child(8) {
  width: 120px;
}

 src/styles/publicBox/farm-oper-table.min.css

New file
@@ -0,0 +1 @@
.el-scrollbar{position:relative}.el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.public-farm-oper-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-farm-oper-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-farm-oper-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-farm-oper-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-farm-oper-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-farm-oper-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-farm-oper-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-farm-oper-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-type input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-plot{margin-left:30px}.public-farm-oper-table .content .action-bar>.search .select-plot input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-farm-oper-table .content .table-list{height:calc(100% - 74px);display:flex;flex-direction:column}.public-farm-oper-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-farm-oper-table .content .table-list .t-body{height:calc(100% - 56px);overflow-y:auto}.public-farm-oper-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:65px;border-bottom:1px solid #E8ECEF;color:#fff}.public-farm-oper-table .content .table-list .table-list:last-child{border:none}.public-farm-oper-table .content .table-list .t-header>div:first-child,.public-farm-oper-table .content .table-list .table-list>div:first-child{width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(2),.public-farm-oper-table .content .table-list .table-list>div:nth-child(2){width:124px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(3),.public-farm-oper-table .content .table-list .table-list>div:nth-child(3){width:172px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(4),.public-farm-oper-table .content .table-list .table-list>div:nth-child(4){width:144px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(5),.public-farm-oper-table .content .table-list .table-list>div:nth-child(5){width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(6),.public-farm-oper-table .content .table-list .table-list>div:nth-child(6){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(7),.public-farm-oper-table .content .table-list .table-list>div:nth-child(7){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(8),.public-farm-oper-table .content .table-list .table-list>div:nth-child(8){width:120px}

 src/styles/publicBox/farm-oper-table.scss

@@ -80,7 +80,6 @@
            height: 74px;

            &>.search {

                .search-input {

                    input {

 src/views/equipment/index.vue

@@ -212,6 +212,7 @@
} from '@/api/equipment/equipment'
import flvjs from 'flv.js'
import dateUtils from '@/utils/dateUtils' // 1.先引入
import { Loading } from 'element-ui'

export default {
    data () {
@@ -420,7 +421,13 @@
        // 点击获取对应监测设备数据
        getStaList (index, id) {
            this.isChoose = index
            let loadingInstance = Loading.service({ fullscreen: false, target: '.nape-boxs', text: '正在加载数据...', background: '#091a2b' })
            this.getStationDateByStcd(id)
            this.$nextTick(() => {
                setTimeout(() => {
                    loadingInstance.close()
                }, 2000)
            })
        },
        // 根据设备号获取监测数据
        getStationDateByStcd (stcd) {
@@ -498,7 +505,7 @@
                        isLive: true,
                        hasAudio: false,
                        stashInitialSize: 128,
                        url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                        url: arr[index].wssFlv
                        // url: arr[index].wssFlv
                        // url: 'https://www.ainfo.top:700/rtp/34020000001110000301_34020000001320000001.flv'

@@ -677,6 +684,7 @@
                            text-align: center;
                            line-height: 32px;
                            padding: 0 15px;
                            box-sizing: border-box;
                        }
                        li.activity {
                            background: rgba(0, 131, 143, 1);

 src/views/farm/index.vue

@@ -749,7 +749,8 @@
            this.vidInfo = item
            this.JkDetail = true
            this.$nextTick(() => {
                this.playFlvVideo('wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv')
                console.log('gggggggg55555', item)
                this.playFlvVideo(item.wssFlv)
            })
        },
        // echart

 src/views/home/index.vue

@@ -464,12 +464,13 @@
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                    <div class="search elestyle">
                        <el-select
                            class="select-type"
                            size="small"
                            v-model="farmOperType"
                            placeholder="选择农事类型"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="(item, index) in farmingList"
@@ -484,6 +485,7 @@
                            size="small"
                            v-model="farmPlotId"
                            placeholder="选择地块"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="(item, index) in plotNumArray"
@@ -661,7 +663,6 @@
        },

        showDetailPopup (params) {
            console.log('989898', params)
            this.farmDetails = params
            this.farmProfiles = true
        },
@@ -1359,7 +1360,6 @@
            getStationAndVideoList({ type: 'ALL' }).then((res) => {
                if (JSON.stringify(res.data) != '{}' && res.data.data) {
                    that.equipmentList = res.data.data

                    that.equipmentList.staList.forEach(item => {
                        // 气象
                        if (item.dictTypeNum == 1) {
@@ -2265,7 +2265,40 @@
            }
        }
    }
    .action-bar {
        .elestyle {
            /deep/.el-input__inner {
                background-color: #0e3960;
                color: #66dde9;
                border: 1px solid #00f5fe;
            }

            /deep/.popper__arrow::after {
                border-bottom-color: #00f5fe;
                top: 0px;
            }
            /deep/.el-select-dropdown {
                background-color: #05243e;
                border: 1px solid #00f5fe;
            }
            /deep/.el-icon-arrow-up:before {
                color: #00f5fe;
            }
            /deep/.el-select-dropdown__item:hover,
            /deep/.el-select-dropdown__item.hover {
                color: #fff;
                background-color: #00f5fe !important;
            }
            /deep/.el-select-dropdown__item {
                background-color: #05243e !important;
                color: rgb(134, 134, 117);
            }
            /deep/.el-popper[x-placement^='bottom'] {
                margin-top: -128px;
                margin-left: -571px;
            }
        }
    }
    .popup {
        position: absolute;
        top: 0;

 src/views/manage/index.vue

@@ -9,7 +9,6 @@
    <div class="container">
        <div class="toggle-plot">
            <el-select
                popper-class="manage-select"
                v-model="farmValue"
                @change="farmSelectChange"
                placeholder="请选择农场"
@@ -20,7 +19,7 @@
                    :key="item.id"
                    :label="item.farmName"
                    :value="item.id"
                    class=".manage-option"
                    class="manage-option"
                ></el-option>
            </el-select>
        </div>
@@ -495,12 +494,13 @@
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                    <div class="search elestyle">
                        <el-select
                            class="select-type"
                            size="small"
                            v-model="farmOperType"
                            placeholder="选择农事类型"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="(item, index) in farmingList"
@@ -515,6 +515,7 @@
                            size="small"
                            v-model="farmPlotId"
                            placeholder="选择地块"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="(item, index) in plotNumArray"
@@ -1547,15 +1548,19 @@
            top: 0px;
        }
        /deep/.el-select-dropdown {
            //   background-color: transparent;
            background-color: #05243e;
            border: 1px solid #00f5fe;
        }
        /deep/.el-icon-arrow-up:before {
            color: #00f5fe;
        }
        .el-select-dropdown__item:hover,
        .el-select-dropdown__item.hover {
        /deep/.el-select-dropdown__item:hover,
        /deep/.el-select-dropdown__item.hover {
            background-color: #00f5fe;
            color: #fff;
        }
        /deep/.el-select-dropdown__item {
            background-color: #05243e;
        }
    }

@@ -1972,5 +1977,40 @@
            }
        }
    }

    .action-bar {
        .elestyle {
            /deep/.el-input__inner {
                background-color: #0e3960;
                color: #66dde9;
                border: 1px solid #00f5fe;
            }

            /deep/.popper__arrow::after {
                border-bottom-color: #00f5fe;
                top: 0px;
            }
            /deep/.el-select-dropdown {
                background-color: #05243e;
                border: 1px solid #00f5fe;
            }
            /deep/.el-icon-arrow-up:before {
                color: #00f5fe;
            }
            /deep/.el-select-dropdown__item:hover,
            /deep/.el-select-dropdown__item.hover {
                color: #fff;
                background-color: #00f5fe !important;
            }
            /deep/.el-select-dropdown__item {
                background-color: #05243e !important;
                color: rgb(134, 134, 117);
            }
            /deep/.el-popper[x-placement^='bottom'] {
                margin-top: -128px;
                margin-left: -571px;
            }
        }
    }
}
</style>