RudongPC/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue

<template>
  <div class="three-box">
    <el-row class="row-one">
      <div class="search">
        <div class="content">
          时间范围：
          <div class="time-query">
            <div class="interval-select">
              <div class="star-time">
                <el-time-picker
                  v-model="queryTime.fromTime"
                  align="right"
                  :clearable="false"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  placeholder="开始时间"
                >
                </el-time-picker>
              </div>
              <div class="symbol">~</div>
              <div class="end-time">
                <el-time-picker
                  v-model="queryTime.toTime"
                  align="right"
                  :clearable="false"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  placeholder="结束时间"
                >
                </el-time-picker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="searchBtn">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="searchList"
          >查询</el-button
        >
        <el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo"
          >重置</el-button
        >
      </div>
    </el-row>
    <el-row style="margin-top: 20px;">
      <div style="display: flex;">
        <div>轨迹地图：</div>
        <div id="gjMap">
          <el-amap
            ref="map"
            map-style="amap://styles/normal"
            :center="center"
            :zoom="zoom"
            :zooms="zooms"
            v-loading="mapLoading"
            @init="init"
            :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
            class="amap-demo"
          ></el-amap>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
export default {
  name:"tabThree",
  data() {
    return {
      activities: [],
      loading:false,
      queryTime:{
        fromTime:"",
        toTime:""
      },
      zoom: 12,
      zooms:[10,16],
      center: [121.298563, 32.451807],
      mapLoading:false,
      map:null,
      layers:{
        layer:null,
      },
    }
  },
  mounted(){
  },
  methods:{
    // 查询
    searchList() {
      console.log(this.queryTime);
    },
    // 重置
    resetTwo() {
      this.queryTime = {
        fromTime:"",
        toTime:""
      }
    },
    getList() {
    },
    // 地图初始化
    init(map){
      // console.log(map);
      this.map = map;
      map.setMapStyle("amap://styles/normal");
      this.layers.layer = new AMap.OverlayGroup();
      this.$nextTick(() => {
        var geojson1 = new AMap.Polygon({
          path:changshazhen.features[0].geometry.coordinates[0][0],
          strokeColor: '#F44444', 
          fillColor: '#F44444',
          fillOpacity: 0.2,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var geojson2 = new AMap.Polygon({
          path:changshazhen.features[1].geometry.coordinates[0][0],
          strokeColor: '#F44444', 
          fillColor: '#F44444',
          fillOpacity: 0.2,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var showLine = new AMap.Polyline({
          path: line.features[0].geometry.coordinates,
          strokeWeight: 6,
          strokeColor: '#F44444',
          strokeOpacity: 1,
          // 开启箭头
          // showDir: true,
        })
        this.layers.layer.addOverlay(geojson1);
        this.layers.layer.addOverlay(geojson2);
        this.layers.layer.addOverlay(showLine);
        this.map.add(this.layers.layer);
        map.setFitView();
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.three-box {
  padding: 10px 20px;
  .row-one {
    display: flex;
    align-items: center;
  }
  .content {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    // line-height: 20px;
    margin-right: 40px;
    .time-query {
      height: 30px;
      background-size: 100% 100%;
      .interval-select {
        display: flex;
        align-items: center;
        ::v-deep .el-input__prefix {
          display: none;
        }
        .star-time,
        .end-time {
          position: relative;
          .data_icon {
            position: absolute;
            right: 5px;
            top: 8px;
            width: 20px;
          }
          ::v-deep .el-date-editor {
            // background-color: transparent;
            width: 150px;
            .el-input__inner {
              // background-color: transparent;
              // border: none;
              width: 100%;
              height: 30px;
              font-size: 14px;
              font-weight: 500;
              text-align: center;
            }
            // .el-input__inner::placeholder {
            //   /* 在这里添加你想要修改的 placeholder 样式 */
            //   font-size: 14px;
            //   font-family: "Source Han Sans CN-Regular";
            //   font-weight: 400;
            //   color: #d3eef2;
            //   -webkit-background-clip: text;
            //   -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
            // }
          }
        }
        .symbol {
          width: 14px;
          // height: 6px;
          line-height: 15px;
          margin: 0 5px;
          background-size: 100% 100%;
        }
      }
    }
    .btns {
      width: 92px;
      height: 35px;
      background-image: url("../../../../../../assets/images/inquirebg.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: 24px;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
    .reset {
      background-image: url("../../../../../../assets/images/resetbg.png");
      margin: 0 20px;
    }
  }
}
#gjMap {
  width: 700px;
  height: 400px;
}
</style>