前端页面

3 years ago · 9018755f67
parent cc2291b4e1
commit 9018755f67
9 changed files with 131 additions and 140 deletions
--- a/ruoyi-ui/src/api/picture/weather-analysis/weatherAnalysis.js
+++ b/ruoyi-ui/src/api/picture/weather-analysis/weatherAnalysis.js
@ -31,28 +31,28 @@ export function getIndex() {

 export function getCategory() {
  return request({
-    url: '/weatherInfo/weather/category"',
+    url: '/weatherInfo/weather/category',
    method: 'get'
  })
 }

 export function getTextCount() {
  return request({
-    url: '/weatherInfo/weather/textCount"',
+    url: '/weatherInfo/weather/textCount',
    method: 'get'
  })
 }

 export function getWarningCount() {
  return request({
-    url: '/weatherInfo/weather/warningCount"',
+    url: '/weatherInfo/weather/warningCount',
    method: 'get'
  })
 }

 export function getTempChange() {
  return request({
-    url: '/weatherInfo/weather/tempChange"',
+    url: '/weatherInfo/weather/tempChange',
    method: 'get'
  })
 }
--- a/ruoyi-ui/src/assets/styles/fonts/qweather-icons.ttf
+++ b/ruoyi-ui/src/assets/styles/fonts/qweather-icons.ttf
--- a/ruoyi-ui/src/assets/styles/fonts/qweather-icons.woff
+++ b/ruoyi-ui/src/assets/styles/fonts/qweather-icons.woff
--- a/ruoyi-ui/src/assets/styles/fonts/qweather-icons.woff2
+++ b/ruoyi-ui/src/assets/styles/fonts/qweather-icons.woff2
--- a/ruoyi-ui/src/views/components/p-flow/BaseFlow.vue
+++ b/ruoyi-ui/src/views/components/p-flow/BaseFlow.vue
@ -42,7 +42,6 @@ export default {
    setTimeout(function () {
      this.initChart()
    }, 1000);
-
  },
  methods: {
    getTextClass(value) {
--- a/ruoyi-ui/src/views/components/p-saturation/BaseSaturation.vue
+++ b/ruoyi-ui/src/views/components/p-saturation/BaseSaturation.vue
@ -6,11 +6,14 @@
      <div class="m-l-mini flex-auto display-flex"><i class="iconfont icon-passenger-flow m-r-mini"></i>
        <div class="p-flow-saturation-text">{{ startText }}</div>
      </div>
-      <div class="p-flow-saturation-tip">{{ endText }}：<span class="num">{{endValue}}</span>
+      <div class="p-flow-saturation-tip">{{ endText }}：<span class="num">{{ endValue }}</span>
      </div>
    </div>
    <div class="p-flow-saturation-bar m-t-small">
-      <div class="p-flow-saturation-line" :style="{left:percentage}"></div>
+      <div class="p-flow-saturation-bar-cover"></div>
+      <div class="p-flow-saturation-bar-inner">
+        <div class="p-flow-saturation-bar-item" v-for="(item,index) in 10"></div>
+      </div>
    </div>
  </div>
 </template>
@ -18,7 +21,7 @@
 <script>
 export default {
  name: "BaseSaturation",
-  props:{
+  props: {
    startText: {
      type: String,
      default: ''
@ -50,113 +53,113 @@ export default {
  border: 1rem solid rgba($p-secondary-color, .3);
  border-radius: $p-radius-mini;

-.p-flow-saturation-bar {
-  position: relative;
+  .p-flow-saturation-bar {
+    position: relative;

-  height: 15rem;
-  padding: 2rem 0 2rem 2rem;
-  border: 1rem solid rgba($p-secondary-color, 1);
-}
+    height: 15rem;
+    padding: 2rem 0 2rem 2rem;
+    border: 1rem solid rgba($p-secondary-color, 1);
+  }

-.p-flow-saturation-bar-inner {
-  display: flex;
-  height: 100%;
-}
+  .p-flow-saturation-bar-inner {
+    display: flex;
+    height: 100%;
+  }

-.p-flow-saturation-bar-item {
-  position: relative;
-  background: $p-white-color;
-  height: 100%;
-  flex: 1;
-  margin-right: 2rem;
-}
+  .p-flow-saturation-bar-item {
+    position: relative;
+    background: $p-white-color;
+    height: 100%;
+    flex: 1;
+    margin-right: 2rem;
+  }

-.p-flow-saturation-bar-item:after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
+  .p-flow-saturation-bar-item:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }

-.p-flow-saturation-bar-item:nth-child(1):after {
-  background: rgba($p-dark-blue, .1)
-}
+  .p-flow-saturation-bar-item:nth-child(1):after {
+    background: rgba($p-dark-blue, .1)
+  }

-.p-flow-saturation-bar-item:nth-child(2):after {
-  background: rgba($p-dark-blue, .4)
-}
+  .p-flow-saturation-bar-item:nth-child(2):after {
+    background: rgba($p-dark-blue, .4)
+  }

-.p-flow-saturation-bar-item:nth-child(3):after {
-  background: rgba($p-dark-blue, .5)
-}
+  .p-flow-saturation-bar-item:nth-child(3):after {
+    background: rgba($p-dark-blue, .5)
+  }

-.p-flow-saturation-bar-item:nth-child(4):after {
-  background: rgba($p-dark-blue, .6)
-}
+  .p-flow-saturation-bar-item:nth-child(4):after {
+    background: rgba($p-dark-blue, .6)
+  }

-.p-flow-saturation-bar-item:nth-child(5):after {
-  background: rgba($p-dark-blue, .7)
-}
+  .p-flow-saturation-bar-item:nth-child(5):after {
+    background: rgba($p-dark-blue, .7)
+  }

-.p-flow-saturation-bar-item:nth-child(6):after {
-  background: rgba($p-dark-blue, .8)
-}
+  .p-flow-saturation-bar-item:nth-child(6):after {
+    background: rgba($p-dark-blue, .8)
+  }

-.p-flow-saturation-bar-item:nth-child(7):after {
-  background: rgba($p-dark-blue, .85)
-}
+  .p-flow-saturation-bar-item:nth-child(7):after {
+    background: rgba($p-dark-blue, .85)
+  }

-.p-flow-saturation-bar-item:nth-child(8):after {
-  background: rgba($p-dark-blue, .9)
-}
+  .p-flow-saturation-bar-item:nth-child(8):after {
+    background: rgba($p-dark-blue, .9)
+  }

-.p-flow-saturation-bar-item:nth-child(9):after {
-  background: rgba($p-dark-blue, .95)
-}
+  .p-flow-saturation-bar-item:nth-child(9):after {
+    background: rgba($p-dark-blue, .95)
+  }

-.p-flow-saturation-bar-item:nth-child(10):after {
-  background: $p-dark-blue;
-}
+  .p-flow-saturation-bar-item:nth-child(10):after {
+    background: $p-dark-blue;
+  }

-.p-flow-saturation-bar-cover {
-  background: #102032;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%
-}
+  .p-flow-saturation-bar-cover {
+    background: #102032;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%
+  }

-.p-flow-saturation-icon {
-  width: 60rem;
-  height: 60rem;
-}
+  .p-flow-saturation-icon {
+    width: 60rem;
+    height: 60rem;
+  }

-.p-flow-saturation-level {
-  font-size: 18rem;
-  color: $p-primary-color;
-}
+  .p-flow-saturation-level {
+    font-size: 18rem;
+    color: $p-primary-color;
+  }

-.p-flow-saturation-line {
-  position: absolute;
-  height: 20rem;
-  top: -4rem;
-  width: 5rem;
-  border-radius: 5rem;
-  background-color: $p-secondary-color;
-  border: 1rem solid rgba($p-white-color, 1);
-}
+  .p-flow-saturation-line {
+    position: absolute;
+    height: 20rem;
+    top: -4rem;
+    width: 5rem;
+    border-radius: 5rem;
+    background-color: $p-secondary-color;
+    border: 1rem solid rgba($p-white-color, 1);
+  }

-.p-flow-saturation-tip {
+  .p-flow-saturation-tip {

-  padding: 0 $p-spacer-small;
-  height: 30rem;
-  line-height: 30rem;
-  color: $p-secondary-color;
-  font-size: $p-font-small;
-  border: 1rem solid rgba($p-secondary-color, .3);
-  border-radius: 30rem;
-}
+    padding: 0 $p-spacer-small;
+    height: 30rem;
+    line-height: 30rem;
+    color: $p-secondary-color;
+    font-size: $p-font-small;
+    border: 1rem solid rgba($p-secondary-color, .3);
+    border-radius: 30rem;
+  }
 }
 </style>
--- a/ruoyi-ui/src/views/picture/car-park/car-flow.vue
+++ b/ruoyi-ui/src/views/picture/car-park/car-flow.vue
@ -11,38 +11,22 @@
      <div class="p-car-top-right">
        <div class="p-car-top-right-icon"></div>
        <div class="p-car-top-item">
-          <div class="p-car-top-num yellow"><span>{{ $filter.textFilter(propsData.carFlow) }}</span></div>
+          <div class="p-car-top-num yellow"><span>{{ $filter.textFilter(propsData.dayTrafficFlow) }}</span></div>
          <div class="p-car-top-text">今日车流量</div>
        </div>
      </div>
    </div>
-    <!-- 饱和度 -->
-    <div class="p-flow-saturation display-flex">
-      <div class="p-flow-saturation-icon m-r-small"><img src="@/assets/images/p_level_car_flow.svg" /></div>
-      <div class="flex-auto">
-        <div class="p-flow-saturation-top display-flex" :class="getTextClass(propsData.saturatio.name)">
-          <span class="p-flow-saturation-level flex-auto">{{ $filter.dictsArea(propsData.surplus, dict.type.comfort_match) }}</span>
-          <div class="p-flow-saturation-tip">剩余车位：<span class="num">{{
-              $filter.textFilter(propsData.surplus)
-            }}</span>
-          </div>
-        </div>
-        <div class="p-flow-saturation-bar m-t-mini">
-          <div class="p-flow-saturation-bar-inner">
-            <div class="p-flow-saturation-bar-item" v-for="(item,index) in 10"></div>
-          </div>
-          <div class="p-flow-saturation-bar-cover"
-               :style="{width:(100 - parseInt(propsData.saturatio.percentage))+'%'}"></div>
-        </div>
-      </div>
-    </div>
+    <BaseSaturation type="" :startText="$filter.dictsArea(flowData.saturatio.percentage,dict.type.comfort_match)" startValue="" endText="预警值" :endValue="flowData.alarm" percentage="80%" ></BaseSaturation>
  </div>
 </template>

 <script>
+//引入 满意度 组件
+import BaseSaturation from "@/views/components/p-saturation/BaseSaturation";
 export default {
  dicts: ['comfort_match'],
  name: "car-flow",
+  components: {BaseSaturation},
  props: {
    propsData: {
      type: Object,
@ -50,18 +34,29 @@ export default {
      }
    },
  },
+  data(){
+    return {
+      flowData:{},
+      saturatioType:''
+    }
+  },
+  watch: {
+    propsData (val) {
+      this.flowData = val
+      this.getSaturatioType()
+    }
+  },
  methods: {
-    getTextClass(value) {
-      switch (value) {
-        case '拥挤':
-          return 'crowd'
-          break;
-        case'畅通':
-          return 'unimpeded'
-          break;
-        default:
-          return ''
-      }
+    getSaturatioType() {
+      let dict = this.dict.type.comfort_matc
+      let percentage = this.flowData.saturatio.percentage
+      let filterValue = dict.filter((activeDict) => {
+        let array = activeDict.value.split('-')
+        return parseFloat(percentage) <= parseFloat(array[1]) && parseFloat(array[0]) < parseFloat(percentage);
+      });
+console.log(filterValue)
+
+
    }
  }
 }
--- a/ruoyi-ui/src/views/picture/scenic-monitor/index.vue
+++ b/ruoyi-ui/src/views/picture/scenic-monitor/index.vue
@ -51,7 +51,6 @@
          <base-module name="ActualCar" id="ActualCar" class="m-t-large" style="height: 28vh">
            <base-module-card cardTitle="实时车流统计" card-type="small">
              <base-flow :propsData="ActualCarData"></base-flow>
-
            </base-module-card>
          </base-module>
          <!-- 微信运营统计 -->
@ -97,6 +96,7 @@ import BaseTemperature from "@/views/components/p-weather/BaseTemperature";
 import {getRealtime} from "@/api/picture/weather-analysis/weatherAnalysis";
 import {getWorkingPersonnel, geWorkingPersonnel} from "@/api/picture/scenic-monitor/scenicMonitor";
 import {vehicleStatistics} from "@/api/picture/car-park/carPark";
+import {getTicketSalesStatistics} from "@/api/picture/ticketing/ticketing";

 export default {
  name: "index",
@ -171,15 +171,9 @@ export default {
    },
    //获取 景区预约统计 数据
    getscenicOrder() {
-      this.ScenicOrderData = {
-        today: [{name: "数量", value: "643"}, {name: "收入", value: "874"}],
-        otherTitle: ["数量 (张)", "收入 (元)"],
-        other: [
-          {name: "本周", value: ["4253", "245156"]},
-          {name: "本月", value: ["87482", "3537379"]},
-          {name: "本年", value: ["513698", "23257391.78"]}
-        ]
-      }
+      getTicketSalesStatistics().then(response => {
+        this.ScenicOrderData = response.data
+      })
    },
    //获取 工作人员统计 数据
    getWorkerStatistics() {
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@ -36,8 +36,8 @@ module.exports = {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        //target: `http://localhost:8080/`,//用户名:admin 密码CJYjqgk@2023!
-         target: `http://39.105.17.128:8096/`,//用户名:cjyadmin/密码:CJYjqgk@2023!
-        // target: `http://192.168.0.200:8080/`,//用户名:admin 密码Cjy@123abc
+        target: `http://39.105.17.128:8096/`,//用户名:cjyadmin/密码:CJYjqgk@2023!
+        //target: `http://192.168.0.34:8080/`,//用户名:admin 密码Cjy@123abc
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''