代码提交

src/assets/images/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6.401" height="11.373" viewBox="0 0 6.401 11.373"><defs><style>.a{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.429px;}</style></defs><path class="a" d="M9.353,0,4.676,4.676,0,0" transform="translate(5.391 1.01) rotate(90)"/></svg>

src/assets/images/button-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42"><defs><style>.a{fill:#fff;}.b{filter:url(#a);}</style><filter id="a" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse"><feOffset dy="1" input="SourceAlpha"/><feGaussianBlur stdDeviation="2" result="b"/><feFlood flood-opacity="0.078"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g class="b" transform="matrix(1, 0, 0, 1, 0, 0)"><path class="a" d="M17.857,32.857a15,15,0,1,0-15-15A15,15,0,0,0,17.857,32.857Z" transform="translate(3.14 2.14)"/></g></svg>

src/assets/images/classify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:#666;}.b{clip-path:url(#a);}.c{fill:none;stroke:#333;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.06px;}</style><clipPath id="a"><rect class="a" width="18" height="18" transform="translate(1870 106)"/></clipPath></defs><g class="b" transform="translate(-1870 -106)"><g transform="translate(1867.975 104.2)"><path class="c" d="M18.593,4.5H15.975" transform="translate(-0.151 0.192)"/><path class="c" d="M12.375,2.7V6.19" transform="translate(-0.041 0.247)"/><path class="c" d="M12.073,4.5h-9.6" transform="translate(0.261 0.192)"/><path class="c" d="M5.965,10.8H2.475" transform="translate(0.261 0)"/><path class="c" d="M9.675,9v3.49" transform="translate(0.041 0.055)"/><path class="c" d="M19.273,10.8h-9.6" transform="translate(0.041 0)"/><path class="c" d="M18.593,17.1H15.975" transform="translate(-0.151 -0.192)"/><path class="c" d="M12.375,15.3v3.49" transform="translate(-0.041 -0.137)"/><path class="c" d="M12.073,17.1h-9.6" transform="translate(0.261 -0.192)"/></g></g></svg>

src/assets/images/cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.762px;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 349)"/></clipPath></defs><g class="b" transform="translate(-1872 -349)"><g transform="translate(1870.857 349.571)"><path class="c" d="M3.6,11.807A5.314,5.314,0,0,1,1.524,7.575a5.243,5.243,0,0,1,5.195-5.29,5.214,5.214,0,0,1,5.015,3.906,3.4,3.4,0,0,1,1.565-.38,3.538,3.538,0,0,1,1.385,6.759"/><path class="c" d="M8.473,6A2.286,2.286,0,1,0,5.241,9.235"/></g></g></svg>

src/assets/images/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6.401" height="11.373" viewBox="0 0 6.401 11.373"><defs><style>.a{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.429px;}</style></defs><path class="a" d="M9.353,4.676,4.676,0,0,4.676" transform="translate(5.687 1.01) rotate(90)"/></svg>

src/assets/images/humidity.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c,.d{fill:none;stroke:#007aff;stroke-linejoin:round;stroke-width:0.762px;}.c{stroke-linecap:round;fill-rule:evenodd;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 235)"/></clipPath></defs><g class="b" transform="translate(-1872 -235)"><g transform="translate(1870.857 233.857)"><path class="c" d="M9.143,16.762a5.714,5.714,0,0,0,5.714-5.714c0-5.333-5.714-9.524-5.714-9.524s-5.714,4.19-5.714,9.524A5.714,5.714,0,0,0,9.143,16.762Z"/><path class="d" d="M3.429,11.048a5.714,5.714,0,1,0,11.429,0s-3.429,1.143-5.714,0S3.429,11.048,3.429,11.048Z"/></g></g></svg>

src/assets/images/phenomenon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.744px;}.d{fill:#007aff;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 425)"/></clipPath></defs><g class="b" transform="translate(-1872 -425)"><g transform="translate(1870.884 424.382)"><path class="c" d="M11.454,9.141A2.524,2.524,0,1,0,8.967,6.183"/><path class="d" d="M12.279,2.6a.744.744,0,1,0-.744-.744A.744.744,0,0,0,12.279,2.6Z"/><path class="d" d="M15.628,4.465a.744.744,0,1,0-.744-.744A.744.744,0,0,0,15.628,4.465Z"/><path class="d" d="M16.372,7.814a.744.744,0,1,0-.744-.744A.744.744,0,0,0,16.372,7.814Z"/><path class="d" d="M8.186,3.721a.744.744,0,1,0-.744-.744A.744.744,0,0,0,8.186,3.721Z"/><path class="c" d="M3.518,14.882a5.19,5.19,0,0,1-2.03-4.134A5.121,5.121,0,0,1,6.562,5.581a5.092,5.092,0,0,1,4.9,3.815,3.319,3.319,0,0,1,1.528-.371,3.455,3.455,0,0,1,1.353,6.6"/><path class="c" d="M8.276,9.212a2.233,2.233,0,1,0-3.157,3.157"/></g></g></svg>

src/assets/images/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.929" height="10" viewBox="0 0 8.929 10"><defs><style>.a{fill:rgba(0,0,0,0);stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.429px;}</style></defs><g transform="translate(-13.393 -12.857)"><path class="a" d="M13.571,12.857v8.571" transform="translate(0.536 0.714)"/><path class="a" d="M20.714,12.857v8.571" transform="translate(0.893 0.714)"/></g></svg>

src/assets/images/pressure.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.762px;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 197)"/></clipPath></defs><g class="b" transform="translate(-1872 -197)"><g transform="translate(1870.561 195.857)"><path class="c" d="M9.439,2.667A7.619,7.619,0,0,0,1.82,10.286a7.934,7.934,0,0,0,1.9,5.333H15.153a7.934,7.934,0,0,0,1.9-5.333A7.619,7.619,0,0,0,9.439,2.667Z"/><circle class="c" cx="1.524" cy="1.524" r="1.524" transform="translate(7.915 9.905)"/><path class="c" d="M9.439,7.619V9.9"/><path class="c" d="M9.439,4.571v.762"/><path class="c" d="M3.725,10.667h.762"/><path class="c" d="M5.249,6.857l.539.539"/><path class="c" d="M14.392,10.667h.762"/><path class="c" d="M13.249,7.4l.539-.539"/></g></g></svg>

src/assets/images/rainfall.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.762px;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 311)"/></clipPath></defs><g class="b" transform="translate(-1872 -311)"><g transform="translate(1870.857 309.857)"><path class="c" d="M3.6,11.807A5.314,5.314,0,0,1,1.524,7.575a5.243,5.243,0,0,1,5.195-5.29,5.214,5.214,0,0,1,5.015,3.906,3.4,3.4,0,0,1,1.565-.38,3.538,3.538,0,0,1,1.385,6.759"/><path class="c" d="M6.1,10.667v3.81"/><path class="c" d="M9.143,12.19V16"/><path class="c" d="M12.19,10.667v3.81"/></g></g></svg>

src/assets/images/selected.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <defs>
-    <style>.a{fill:#007aff;}.b{fill:#fff;}</style>
-  </defs><g transform="translate(9389 16754)">
-  <path class="a" d="M20,0V14a6,6,0,0,1-6,6H0Z" transform="translate(-9389 -16754)"/>
-  <path class="b" d="M5.15,9.054a.578.578,0,0,1-.407-.162L2.316,6.526a.548.548,0,0,1,0-.788.586.586,0,0,1,.809,0L5.15,7.712l4.725-4.6a.584.584,0,0,1,.809,0,.549.549,0,0,1,0,.79L5.558,8.892A.584.584,0,0,1,5.15,9.054Z" transform="translate(-9382.148 -16745.945)"/>
-</g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20.002" viewBox="0 0 20 20.002"><defs><style>.a{fill:#007aff;}</style></defs><g transform="translate(9389.001 16754.001)"><path class="a" d="M-11191,866h-14l20-20v14A6.007,6.007,0,0,1-11191,866Zm-4.429-6.369a.576.576,0,0,0-.4.16.547.547,0,0,0-.166.394.553.553,0,0,0,.166.4l2.429,2.365a.58.58,0,0,0,.405.163.583.583,0,0,0,.408-.163l5.126-4.994a.539.539,0,0,0,.169-.394.551.551,0,0,0-.169-.4.576.576,0,0,0-.405-.163.586.586,0,0,0-.4.163l-4.725,4.6-2.024-1.974A.58.58,0,0,0-11195.429,859.632Z" transform="translate(1816 -17600)"/></g></svg>

src/assets/images/stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.571" height="9.897" viewBox="0 0 8.571 9.897"><defs><style>.a{fill:#007aff;}</style></defs><path class="a" d="M14.286,17.143V12.194l4.286,2.474,4.286,2.474-4.286,2.474-4.286,2.474Z" transform="translate(-14.286 -12.194)"/></svg>

src/assets/images/temperature.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c,.d{fill:none;stroke:#007aff;stroke-linejoin:round;stroke-width:0.762px;}.d{stroke-linecap:round;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1856 170)"/></clipPath></defs><g class="b" transform="translate(-1856 -170)"><g transform="translate(1854.857 168.857)"><path class="c" d="M6.857,9.9V3.81a2.286,2.286,0,0,1,4.571,0V9.9a3.81,3.81,0,1,1-4.571,0Z"/><path class="d" d="M9.143,6.476v4.952"/><path class="c" d="M9.143,14.476a1.524,1.524,0,1,0-1.524-1.524A1.524,1.524,0,0,0,9.143,14.476Z"/></g></g></svg>

src/assets/images/visibility.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linejoin:round;stroke-width:0.762px;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 387)"/></clipPath></defs><g class="b" transform="translate(-1872 -387)"><g transform="translate(1870.857 385.857)"><path class="c" d="M9.143,13.714c4.208,0,7.619-4.571,7.619-4.571S13.351,4.571,9.143,4.571,1.524,9.143,1.524,9.143,4.935,13.714,9.143,13.714Z"/><path class="c" d="M9.143,11.048a1.9,1.9,0,1,0-1.9-1.9A1.9,1.9,0,0,0,9.143,11.048Z"/></g></g></svg>

src/assets/images/wind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;stroke:#007aff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.842px;}</style><clipPath id="a"><rect class="a" width="16" height="16" transform="translate(1872 273)"/></clipPath></defs><g class="b" transform="translate(-1872 -273)"><g transform="translate(1869.895 270.895)"><path class="c" d="M5.053,7.158H4.211A1.684,1.684,0,0,0,2.526,8.842h0a1.684,1.684,0,0,0,1.684,1.684h.842"/><path class="c" d="M9.263,13.895H8a1.684,1.684,0,0,0-1.684,1.684h0A1.684,1.684,0,0,0,8,17.263H9.263"/><path class="c" d="M11.368,2.947H10.105A1.684,1.684,0,0,0,8.421,4.632h0a1.684,1.684,0,0,0,1.684,1.684h1.263"/><path class="c" d="M10.105,6.316h6.737"/><path class="c" d="M5.053,10.526H17.684"/><path class="c" d="M9.263,13.895h5.053"/></g></g></svg>

src/styles/common.scss

@@ -165,6 +165,8 @@
     position: absolute;
     right: 0px;
     bottom: 0px;
+    transform: translateY(-10000px);
+    filter: drop-shadow(var(--el-color-primary) 0 10000px);
   }
 
 
@@ -334,4 +336,134 @@
     flex: 0 1 auto;
     position: relative;
   }
+
+  .lan-state{
+    background: #007AFF10;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 12px;
+    color: #007AFF;
+  }
+
+  .lv-state{
+    background: #3BA27210;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 12px;
+    color: #3BA272;
+  }
+
+  .hong-state{
+    background: #DB000010;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 12px;
+    color: #DB0000;
+  }
+
+  .cheng-state{
+    background: #FC845210;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 12px;
+    color: #FC8452;
+  }
+
+  .hei-state{
+   border: #333333 solid 1px;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 10px;
+    line-height: 28px;
+    color: #333333;
+    cursor:pointer;
+  }
+
+  .hei-state-primary{
+    border: var(--el-color-primary) solid 1px;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 10px;
+    line-height: 28px;
+    color: var(--el-color-primary);
+    cursor:pointer;
+  }
+
+  .gis-c{
+    display: flex;
+    align-items: center;
+    height: 100%;width: 100%;
+    justify-content: right
+  }
+
+  .gis-icon{
+    margin-left: 5px;
+    transform: translateY(-1000px);
+    filter: drop-shadow(var(--el-color-primary) 0 1000px);
+    margin-bottom: 2px;
+  }
+
+  .gis-icon-type1{
+    transform: translateY(-1000px);
+    filter: drop-shadow(var(--el-menu-hover-text-color) 0 1000px);
+    margin-top: 5px;
+    height: 20px;
+    width: 20px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+
+  .gis-icon-type2{
+    transform: translateY(-1000px);
+    filter: drop-shadow(var(--el-color-primary) 0 1000px);
+    margin-top: 5px;
+    height: 20px;
+    width: 20px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+
+  .el-tabs .el-tabs__item.is-active {
+    margin-left: 5px;
+  }
+
+  .gis-bottom-box{
+    height:80px;
+    display: flex;
+    justify-content: center
+  }
+
+  .gis-bottom-item{
+    margin-right: 30px;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    flex-direction: column
+  }
+
+  .gis-bottom-text{
+   color: #333333;
+    font-size: 14px;
+  }
+
+  .gis-bottom-hei-state{
+    border: var(--el-border-color-hover) solid 1px;
+    border-radius: 2px 2px 2px 2px;
+    padding: 0px 40px 0px 10px;
+    width: 170px;
+    line-height: 28px;
+    color: var(--el-text-color-regular);
+    background-color: var(--el-fill-color-blank);
+  }
+
+  .button-bg{
+    width: 42px;
+    height: 42px;
+    background-image: url("@/assets/images/button-bg.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .button-bg-c{
+    transform: translateY(-10000px);
+    filter: drop-shadow(var(--el-color-primary) 0 10000px);
+  }
 }

src/views/alarm/gis/index.vue

@@ -1,13 +1,237 @@
 <template>
+  <div class="table-box">
+    <div class="card table-search" style="overflow: hidden;display: flex;justify-content: space-between;">
+      <el-form :inline="true" label-width="auto">
+        <el-form-item label="自动站：" prop="station">
+          <el-select v-model="searchParam.station" placeholder="请选择" style="width: 200px">
+            <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属基地：" prop="base">
+          <el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
+            <el-option v-for="item in baseOptions" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div class="lan-state">台站总数5</div>
+        </el-form-item>
+        <el-form-item>
+          <div class="lv-state">设备正常3</div>
+        </el-form-item>
+        <el-form-item>
+          <div class="hong-state">设备故障2</div>
+        </el-form-item>
+        <el-form-item>
+          <div class="cheng-state">危险天气1</div>
+        </el-form-item>
+        <el-form-item>
+          <el-popover
+            v-model="visible"
+            @show="handleShowChange"
+            @hide="handleHideChange"
+            placement="bottom"
+            :width="200"
+            trigger="click">
+            <el-checkbox-group v-model="checkList">
+              <el-checkbox label="街道地图" value="街道地图" style="width: 100%"/>
+              <el-checkbox label="站名" value="站名" style="width: 100%"/>
+              <el-checkbox label="框选" value="框选" style="width: 100%"/>
+              <el-checkbox label="九宫格" value="九宫格" style="width: 100%"/>
+            </el-checkbox-group>
+            <template #reference>
+              <div :class="visible?'hei-state-primary':'hei-state'">基本信息</div>
+            </template>
+          </el-popover>
+        </el-form-item>
+      </el-form>
+      <div class="header-button-ri">
+        <el-popover
+          class="tab-pane"
+          :width="400"
+          v-model="visible2"
+          @show="handleShowChange2"
+          @hide="handleHideChange2"
+          placement="bottom-start"
+          trigger="click">
+          <el-tabs tab-position="right" class="demo-tabs">
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>气温</span>
+                  <img class="gis-icon" src="../../../assets/images/temperature.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>气压</span>
+                  <img class="gis-icon" src="../../../assets/images/pressure.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>湿度</span>
+                  <img class="gis-icon" src="../../../assets/images/humidity.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>风</span>
+                  <img class="gis-icon" src="../../../assets/images/wind.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>降雨</span>
+                  <img class="gis-icon" src="../../../assets/images/rainfall.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>云量</span>
+                  <img class="gis-icon" src="../../../assets/images/cloud.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>能见度</span>
+                  <img class="gis-icon" src="../../../assets/images/visibility.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="gis-c">
+                  <span>天气现象</span>
+                  <img class="gis-icon" src="../../../assets/images/phenomenon.svg">
+                </div>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+          <template #reference>
+            <slot name="toolButton">
+              <div style="cursor: pointer">
+                <img :class="visible2?'gis-icon-type2':'gis-icon-type1'"  src="@/assets/images/classify.svg"/>
+              </div>
+            </slot>
+          </template>
+        </el-popover>
 
+      </div>
+    </div>
+    <div style="flex-grow: 1;">
+
+    </div>
+    <div class="gis-bottom-box">
+      <div class="gis-bottom-item">
+        <div class="button-bg" @click="isPlay=!isPlay">
+          <img v-if="isPlay" class="button-bg-c" style="margin-left: 3px"  src="../../../assets/images/stop.svg"/>
+          <img v-else class="button-bg-c"  src="../../../assets/images/play.svg"/>
+        </div>
+        <div style="margin-left: 2px" class="gis-bottom-text">{{isPlay?'暂停':'播放'}}</div>
+      </div>
+      <div class="gis-bottom-item">
+        <div class="button-bg">
+          <img class="button-bg-c"  src="../../../assets/images/back.svg"/>
+        </div>
+        <div style="margin-left: 2px" class="gis-bottom-text">上一个</div>
+      </div>
+      <div class="gis-bottom-item">
+        <el-date-picker
+          style="margin-top: 5px"
+          v-model="value1"
+          type="date"
+          placeholder="请选择时间"
+        />
+      </div>
+      <div class="gis-bottom-item">
+        <el-slider
+          :min="0"
+          :max="1439"
+          :step="10"
+          :format-tooltip="formatTooltip"
+          v-model="value2"
+          style="width: 720px;margin: 0px 0px 0px 10px" />
+        <img src="../../../assets/images/scale.svg" style="width: 720px;margin-top: -10px"/>
+      </div>
+      <div class="gis-bottom-item">
+        <div class="button-bg">
+          <img class="button-bg-c"  src="../../../assets/images/forward.svg"/>
+        </div>
+        <div style="margin-left: 2px" class="gis-bottom-text">下一个</div>
+      </div>
+      <div class="gis-bottom-item">
+        <div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
+<script setup lang="ts" name="gis">
+import {reactive, ref} from "vue";
+const value1 = ref('')
+const value2 = ref(0)
+const visible = ref(false)
+const visible2 = ref(false)
+const checkList = ref(['Value selected and disabled', 'Value A'])
+const isPlay = ref(true)
+const handleShowChange = () => {
+  visible.value = true
+};
+
+const formatTooltip = (value) => {
+  const hours = Math.floor(value / 60);
+  const minutes = value % 60;
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+};
+
+const handleHideChange = () => {
+  visible.value = false
+};
+const handleShowChange2 = () => {
+  visible2.value = true
+};
+const handleHideChange2 = () => {
+  visible2.value = false
+};
+const searchParam = reactive({
+  base: undefined,
+  station: undefined,
+})
+
+interface Mark {
+  label: string
 }
+
+const baseOptions = ref([{
+  value: 0,
+  label: '基地1',
+},
+  {
+    value: 1,
+    label: '基地2',
+  }])
+
+const stationOptions = ref([{
+  value: 0,
+  label: 'M1986',
+},
+  {
+    value: 1,
+    label: 'M1987',
+  }])
 </script>
 
 <style scoped>
-
 </style>