样式修改

ruoyi-ui/src/assets/styles/picture-common.scss

@@ -2456,3 +2456,16 @@ text-align: center;
 .p-l-super {
   padding-left: $p-spacer-super !important;
 }
+
+.el-input__inner::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color:#0d1c2d!important;
+}
+.el-input__inner::-moz-placeholder { /* Firefox 19+ */
+  color:#0d1c2d!important;
+}
+.el-input__inner:-ms-input-placeholder { /* IE 10+ */
+  color:#0d1c2d!important;
+}
+.el-input__inner:-moz-placeholder { /* Firefox 18- */
+  color:#0d1c2d!important;
+}

ruoyi-ui/src/views/picture/scenic-flow/index.vue

@@ -1,12 +1,44 @@
 <template>
   <!-- 景区客流分析 入口文件-->
   <div class="p-pages-box p-pages-bg">
+    <div class="filter">分析</div>
+    <div class="p-filter">
+      <div class="p-filter-title">客流分析筛选</div>
+      <div class="p-filter-box">
+        <div class="filter-box-item">
+          <el-select v-model="city" placeholder="请选择市">
+            <el-option
+              v-for="item in cityOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="filter-box-item">
+          <el-select v-model="scenic" placeholder="请选择景区">
+            <el-option
+              v-for="item in scenicOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="filter-box-item">
+          <div class="button">进客流</div>
+        </div>
+        <div class="filter-box-item">
+          <div class="button">出客流</div>
+        </div>
+      </div>
+
+    </div>
     <!-- 页面头部 -->
     <base-header title="景区客流分析"></base-header>
     <!-- 页面主体 -->
     <div class="p-pages-main p-container">
       <el-row :gutter="20">
-
         <el-col :span="8">
           <!-- 实时客流统计 -->
           <base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 28vh">
@@ -106,11 +138,61 @@ import ScenicRing from "@/views/picture/scenic-flow/scenic-ring";
 import baseRank from "@/views/components/p-rank/BaseRank";
 import {getSelectTouristSource} from "@/api/picture/scenic-monitor/scenicMonitor";
 import map from "@/views/dashboard/json/china.json";
+
 export default {
   name: "index",
-  components: {ScenicRing, scenicTime, scenicArea,baseRank},
+  components: {ScenicRing, scenicTime, scenicArea, baseRank},
   data() {
     return {
+      cityOptions: [{
+        value: '石家庄市',
+        label: '石家庄市'
+      }, {
+        value: '唐山市',
+        label: '唐山市'
+      }, {
+        value: '秦皇岛市',
+        label: '秦皇岛市'
+      }, {
+        value: '邯郸市',
+        label: '邯郸市'
+      }, {
+        value: '保定市',
+        label: '保定市'
+      }, {
+        value: '张家口市',
+        label: '张家口市'
+      }, {
+        value: '承德市',
+        label: '承德市'
+      }, {
+        value: '沧州市',
+        label: '沧州市'
+      }, {
+        value: '廊坊市',
+        label: '廊坊市'
+      }, {
+        value: '衡水市',
+        label: '衡水市'
+      }],
+      city: '',
+      scenic: '',
+      scenicOptions: [{
+        value: '山海关景区',
+        label: '山海关景区'
+      }, {
+        value: '承德避暑山庄及周围寺庙景区',
+        label: '承德避暑山庄及周围寺庙景区'
+      }, {
+        value: '保定军校纪念馆',
+        label: '保定军校纪念馆'
+      }, {
+        value: '秦皇岛野生动物园',
+        label: '秦皇岛野生动物园'
+      }, {
+        value: '磬锤峰森林公园景区',
+        label: '磬锤峰森林公园景区'
+      }],
       //实时客流统计 数据
       FlowTimeData: {
         saturatio: {name: "", percentage: ""},
@@ -124,8 +206,8 @@ export default {
       FlowAreaData: [],
       //按日客流分析 数据
       FlowTodayData: {eChartOpts: {}, eChartData: {}},
-      startTime:'',
-      endtTime:'',
+      startTime: '',
+      endtTime: '',
       TodayData: '',
       //客流同环比分析 数据
       FlowRingData: [],
@@ -163,7 +245,7 @@ export default {
         let datas = newValue
         this.startTime = this.$filter.formatDate(datas[0])
         this.endTime = this.$filter.formatDate(datas[1])
-        let backTime={'startTime':this.startTime,'endTime':this.endTime}
+        let backTime = {'startTime': this.startTime, 'endTime': this.endTime}
         this.getFlowToday(backTime)
       }
     },
@@ -174,7 +256,7 @@ export default {
         let datas = newValue
         this.startMonth = this.$filter.formatDate(datas[0])
         this.endMonth = this.$filter.formatDate(datas[1])
-        let backTime={'startTime':this.startMonth,'endTime':this.endMonth}
+        let backTime = {'startTime': this.startMonth, 'endTime': this.endMonth}
         this.getFlowMoon(backTime)
       }
     },
@@ -203,7 +285,7 @@ export default {
     //获取 分时段客流走势 数据
     getFlowTrend() {
       let Opts = {
-        unit:['人次'],
+        unit: ['人次'],
         extra: {
           line: {linearType: "custom",}
         }
@@ -217,8 +299,8 @@ export default {
     //获取 按年日客流分析 数据
     getFlowYear() {
       let Opts = {
-        unit:['人次'],
-        color:['orange'],
+        unit: ['人次'],
+        color: ['orange'],
         extra: {
           area: {linearType: "custom",}
         }
@@ -240,8 +322,8 @@ export default {
     getFlowToday(params) {
       let postParams = {}
       let Opts = {
-        unit:['人次'],
-        color:['orange'],
+        unit: ['人次'],
+        color: ['orange'],
         extra: {
           area: {
             linearType: "custom",
@@ -249,12 +331,12 @@ export default {
         }
       }
       this.FlowTodayData.eChartOpts = Opts
-      if(params==undefined){
-        let newDate= new Date()
+      if (params == undefined) {
+        let newDate = new Date()
         this.startTime = this.$filter.funDate(7)
         this.endTime = this.$filter.formatDate(newDate)
-        postParams={'startTime':this.startTime,'endTime':this.endTime}
-      }else{
+        postParams = {'startTime': this.startTime, 'endTime': this.endTime}
+      } else {
         postParams = params
       }
       getDayData(postParams).then(response => {
@@ -265,7 +347,7 @@ export default {
     //获取 客流同环比分析 数据
     getFlowRing() {
       getFlowRatio().then(response => {
-        this.FlowRingData= response.data
+        this.FlowRingData = response.data
       });
     },
 
@@ -273,7 +355,7 @@ export default {
     getFlowMoon(params) {
       let postParams = {}
       let Opts = {
-        unit:['人次'],
+        unit: ['人次'],
         extra: {
           column: {
             linearType: "custom",
@@ -281,11 +363,11 @@ export default {
         }
       }
       this.FlowMoonData.eChartOpts = Opts
-      if(params==undefined){
+      if (params == undefined) {
         this.startMonth = this.$filter.getMonths(-3)
         this.endMonth = this.$filter.getMonths(0)
-        postParams={'startTime':this.startMonth,'endTime':this.endMonth}
-      }else{
+        postParams = {'startTime': this.startMonth, 'endTime': this.endMonth}
+      } else {
         postParams = params
       }
       getMonthData(postParams).then(response => {
@@ -297,4 +379,46 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.filter {
+  position: fixed;
+  z-index: 9999;
+  color: #fff;
+  right: 20px;
+  top: 10px;
+}
+
+.p-filter {
+  position: fixed;
+  padding: 10px;
+  z-index: 9999;
+  color: #fff;
+  left: 50%;
+  top: 50px;
+  width: 700px;
+  height: 100px;
+  background: rgba(#242323, .8);
+  transform: translate(-50%, 0);
+  border: 1px solid #fff;
+  .p-filter-title{text-align: center; margin-bottom: 10px;}
+}
+
+.p-filter-box {
+  display: flex;
+
+  .button {
+    cursor: pointer;
+    padding: 0 20px;
+    height: 36px;
+    line-height: 36px;
+    background: #fff;
+    color: #0d1c2d;
+    border-radius: 5px;
+  }
+
+  .filter-box-item {
+    margin: 0 10px;
+  }
+}
+
+
 </style>