no message

.env.development

@@ -3,6 +3,9 @@ NODE_ENV = 'development'
 VITE_APP_BASE_API = '/diseaseRight'
 VITE_APP_BASE_API_DATA = '/bigData'
 VITE_APP_BASE_API_DATA2 = '/bigData2'
+VITE_APP_BASE_API_LOCAL ='/local'
 VITE_SERVE="http://58.17.42.179:90/diseaseRight"
 VITE_SERVE_DATA="http://qt88.nc-ky.com/bigData"
 VITE_SERVE_DATA2="http://58.17.42.179:90/bigData2"
+VITE_SERVE_LOCAL="http://58.17.42.179:90"
+

src/api/serve/index.ts

@@ -0,0 +1,116 @@
+import request from "@/utils/request";
+
+// 旅游服务页面相关的接口请求地址
+enum API {
+  // 获取住宿统计数据 接口地址
+  BOOKTOTAL_URL = "/template/api/booking/QueryBookingTotal",
+
+  // 获取住宿资源占比数据 接口地址
+  RATEDATA_URL = "/template/api/hotel/QueryTownRate",
+
+  // 获取近7天房间预定趋势数据 接口地址
+  BOOKTREND_URL = "/template/api/booking/QueryBookingTrend",
+
+  // 获取订单量排行数据 接口地址
+  ORDERRANK_URL = "/template/api/booking/QueryOrderRank",
+
+  // 获取近7天平均房价 接口地址
+  AVGPRICE_URL = "/template/api/booking/QueryBookingAvgPrice",
+
+  // 获取特产销售热榜top3数据 接口地址
+  TOPBYAMOUNT_URL = "/template/api/speciality/getTopByAmount",
+
+  // 获取特产近12月销售额数据 接口地址
+  MONTHTREND_URL = "/template/api/speciality/getMonthTrend",
+
+  // 获取景区餐饮类型统计数据 接口地址
+  CATERINGTYPE_URL = "/template/api/catering/getTotal",
+
+  // 获取民宿列表数据 接口地址
+  HOTELLIST_URL = "/template/api/hotel/QueryHotelList",
+
+  // 获取停车场信息 接口地址
+  PARKINGCOUNT_URL = "/template/api/parking/getParkingCount",
+
+  // 获取停车位信息 接口地址
+  PARKINGSPACE_URL = "/template/api/parking/getParkingSpace",
+
+  // 获取停车场资源乡镇分布情况 接口地址
+  PARKINGBYTOWN_URL = "/template/api/parking/getParkingByTown",
+
+  // 获取停车场列表 接口地址
+  ALLPARKINGINFO_URL = "/template/api/parking/getAllParkingInfo",
+
+  // 根据id获取停车场详细信息 接口地址
+  PARKINGINFOBYID_URL = "/template/api/parking/getParkingInfoById",
+
+  // 获取厕所分类数量 接口地址
+  TOILETBASECOUNT_URL = "/template/api/toiletBase/getToiletBaseCount",
+
+  // 获取厕所列表数据 接口地址
+  TOILETBASEINFO_URL = "/template/api/toiletBase/getToiletBaseInfo",
+}
+
+//获取住宿统计数据
+export const reqGetBookTotal = () =>
+  request.get(API.BOOKTOTAL_URL, { headers: { type: "local" } });
+
+//获取住宿资源占比数据
+export const reqGetRateData = () =>
+  request.get(API.RATEDATA_URL, { headers: { type: "local" } });
+
+//获取近7天房间预定趋势数据
+export const reqGetBookTrend = () =>
+  request.get(API.BOOKTREND_URL, { headers: { type: "local" } });
+
+//获取订单量排行数据
+export const reqGetOrderRank = () =>
+  request.get(API.ORDERRANK_URL, { headers: { type: "local" } });
+
+//获取近7天平均房价
+export const reqGetAvgPrice = () =>
+  request.get(API.AVGPRICE_URL, { headers: { type: "local" } });
+
+// 获取特产销售热榜top3数据
+export const reqGetTopByAmount = () =>
+  request.get(API.TOPBYAMOUNT_URL, { headers: { type: "local" } });
+
+// 获取特产近12月销售额数据
+export const reqGetMonthTrend = () =>
+  request.get(API.MONTHTREND_URL, { headers: { type: "local" } });
+
+// 获取景区餐饮类型统计数据
+export const reqGetCateringType = () =>
+  request.get(API.CATERINGTYPE_URL, { headers: { type: "local" } });
+
+// 获取民宿列表数据
+export const reqGetHotelList = (params: any) =>
+  request.get(API.HOTELLIST_URL, { params, headers: { type: "local" } });
+
+// 获取停车场信息
+export const reqGetParkingCount = () =>
+  request.get(API.PARKINGCOUNT_URL, { headers: { type: "local" } });
+
+// 获取停车位信息
+export const reqGetParkingSpace = () =>
+  request.get(API.PARKINGSPACE_URL, { headers: { type: "local" } });
+
+// 获取停车场资源乡镇分布情况
+export const reqGetParkingByTown = () =>
+  request.get(API.PARKINGBYTOWN_URL, { headers: { type: "local" } });
+
+// 获取停车场列表
+export const reqGetAllParkingInfo = () =>
+  request.get(API.ALLPARKINGINFO_URL, { headers: { type: "local" } });
+
+// 根据id获取停车场详细信息
+export const reqGetParkingInfoById = (params: any) =>
+  request.get(API.PARKINGINFOBYID_URL, { params, headers: { type: "local" } });
+
+// 获取厕所分类数量
+export const reqGetToiletBaseCount = () =>
+  request.get(API.TOILETBASECOUNT_URL, { headers: { type: "local" } });
+
+// 获取厕所列表数据
+export const reqGetToiletBaseInfo = () =>
+  request.get(API.TOILETBASEINFO_URL, { headers: { type: "local" } });

src/utils/request.ts

@@ -17,6 +17,8 @@ request.interceptors.request.use((config) => {
     config.baseURL = import.meta.env.VITE_APP_BASE_API_DATA;
   } else if (config.headers.type === "bigData2") {
     config.baseURL = import.meta.env.VITE_APP_BASE_API_DATA2;
+  } else if (config.headers.type === "local") {
+    config.baseURL = import.meta.env.VITE_APP_BASE_API_LOCAL;
   } else {
     config.baseURL = import.meta.env.VITE_APP_BASE_API;
   }

src/views/server/center/hotelListDialog.vue

@@ -20,6 +20,7 @@
           placeholder="请输入民宿名称"
           :suffix-icon="Search"
           v-model="serachValue"
+          @change="handleChange"
         >
         </el-input>
       </div>
@@ -28,8 +29,8 @@
       <div class="list">
         <!-- 每一个民宿区域 -->
         <div class="list_item" v-for="item in hotelList" :key="item.id">
-          <!-- 新闻信息区域 -->
-          <div class="item_info">{{ item.title }}</div>
+          <!-- 民宿信息区域 -->
+          <div class="item_info">{{ item.hname }}</div>
           <!-- 箭头图标区域 -->
           <div class="item_icon" @click="handleLookDetail(item)">
             <img src="@/assets/images/right.png" />
@@ -60,11 +61,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { Search } from "@element-plus/icons-vue";
 import HotelDetailDialog from "./hotelDetailDialog.vue";
+// 引入旅游服务相关的接口
+import { reqGetHotelList } from "@/api/serve/index";
 
-defineProps(["currentTown"]);
+const $props = defineProps(["currentTown"]);
 const $emit = defineEmits(["closeDialog"]);
 
 // 搜索框绑定数据
@@ -79,42 +82,35 @@ const total = ref<number>(100);
 const showDetailDialog = ref<boolean>(false);
 
 // 民宿列表数据
-const hotelList = ref([
-  {
-    id: 1,
-    title: "靖安一日游",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-  {
-    id: 2,
-    title: "关于靖安县防火措施",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-  {
-    id: 3,
-    title: "靖安县大好河，非常漂亮",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-  {
-    id: 4,
-    title: "欢迎大家游玩靖安",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-  {
-    id: 5,
-    title: "欢迎各位领导莅临参观",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-  {
-    id: 6,
-    title: "三爪仑一日游攻略",
-    url: "	https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
-  },
-]);
+const hotelList = ref<any>([]);
 
 // 民宿详情数据
 const detailObj = ref({});
 
+onMounted(() => {
+  // 获取民宿列表数据
+  getHotelList();
+});
+
+// 获取民宿列表数据
+const getHotelList = async () => {
+  const res = await reqGetHotelList({
+    town: $props.currentTown,
+    hName: serachValue.value,
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+  });
+  // console.log(res);
+  hotelList.value = res.data;
+};
+
+// 输入框绑定值改变回调
+const handleChange = (v: any) => {
+  // console.log(v);
+  serachValue.value = v;
+  currentPage.value = 1;
+  getHotelList();
+};
 // 点击关闭按钮回调
 const handleClose = () => {
   $emit("closeDialog", false);

src/views/server/left/catering.vue

@@ -17,17 +17,43 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
+// 引入旅游服务相关的接口
+import { reqGetCateringType } from "@/api/serve/index";
 
 // 柱状图DOM元素
 const barChart = ref(null);
 
+// X轴时间数组
+const typeList = ref<any>([]);
+
+// y轴数值数组
+const valueList = ref<any>([]);
+
 onMounted(() => {
+  // 获取景区餐饮类型统计数据
+  getCateringType();
+});
+
+// 获取景区餐饮类型统计数据
+const getCateringType = async () => {
+  const res = await reqGetCateringType();
+  // console.log(res);
+
+  // 处理数据
+  typeList.value = Object.keys(res.data);
+
+  Object.keys(res.data).forEach((ele: any) => {
+    valueList.value.push(res.data[ele]);
+  });
+
   // 初始化柱状图
   initBarChart();
-});
+};
 
+// 初始化柱状图
 const initBarChart = () => {
   let myBarChart = Echarts.init(barChart.value);
+
   // 柱状图配置
   const options = {
     tooltip: {
@@ -57,7 +83,7 @@ const initBarChart = () => {
           color: "#063F8B",
         },
       },
-      data: ["中餐", "西餐", "小吃", "小卖部", "其他"],
+      data: typeList.value,
     },
     yAxis: {
       type: "value",
@@ -77,7 +103,7 @@ const initBarChart = () => {
     },
     series: [
       {
-        data: [120, 200, 150, 80, 70],
+        data: valueList.value,
         type: "bar",
         barWidth: 35,
         itemStyle: {
@@ -90,6 +116,7 @@ const initBarChart = () => {
       },
     ],
   };
+
   myBarChart.setOption(options);
 };
 </script>

src/views/server/left/hot.vue

@@ -9,12 +9,12 @@
     <!-- 列表区域 -->
     <div class="hot_list">
       <!-- 每一个盒子区域 -->
-      <div class="hot_item" v-for="(item, index) in list" :key="item.id">
+      <div class="hot_item" v-for="(item, index) in list" :key="index">
         <div class="item_info">
           <div class="info_rank">TOP{{ index + 1 }}</div>
           <div class="info_name">{{ item.name }}</div>
-          <div class="info_num" ref="infoNum" :data-value="item.num">
-            {{ item.num }}
+          <div class="info_num" ref="infoNum" :data-value="item.total">
+            {{ item.total }}
           </div>
         </div>
         <div class="item_progress">
@@ -30,38 +30,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import { countUpNum } from "@/utils/countUpNum.ts";
+// 引入旅游服务相关的接口
+import { reqGetTopByAmount } from "@/api/serve/index";
 
 // Dom元素数组
 const infoNum = ref();
 
-const list = ref([
-  {
-    id: 1,
-    name: "靖安白茶",
-    num: 8563,
-    rate: 50,
-  },
-  {
-    id: 2,
-    name: "靖安柑橘",
-    num: 6532,
-    rate: 30,
-  },
-  {
-    id: 3,
-    name: "靖安泉水",
-    num: 2365,
-    rate: 20,
-  },
-]);
+// 特产销售热榜top3数据
+const list = ref<any>([]);
 
 onMounted(() => {
-  infoNum.value.forEach((ele: any) => {
-    countUpNum(ele, ele.dataset.value);
-  });
+  // 获取特产销售热榜top3数据
+  getTopByAmount();
 });
+
+// 获取特产销售热榜top3数据
+const getTopByAmount = async () => {
+  const res = await reqGetTopByAmount();
+  // console.log(res);
+  list.value = res.data;
+
+  // 计算百分比
+  list.value.forEach((ele: any) => {
+    ele.rate = (ele.total / res.data[0].total) * 100;
+  });
+
+  nextTick(() => {
+    // 让数字跳动
+    infoNum.value.forEach((ele: any) => {
+      countUpNum(ele, ele.dataset.value);
+    });
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -94,9 +96,11 @@ onMounted(() => {
   }
 
   .hot_list {
+    padding: 0 10px;
     margin-top: 40px;
     width: 100%;
     height: 228px;
+    overflow-y: auto;
 
     .hot_item {
       margin-bottom: 20px;

src/views/server/left/resource.vue

@@ -14,37 +14,60 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
+// 引入旅游服务相关的接口
+import { reqGetRateData } from "@/api/serve/index";
 
 // 圆环图DOM元素
 const pieChart = ref(null);
 
 // 圆环图数据
-const chartData = ref([
-  { value: 8, name: "三爪仑" },
-  { value: 11, name: "双溪镇" },
-  { value: 7, name: "雷公尖" },
-  { value: 10, name: "仁首镇" },
-  { value: 12, name: "宝峰镇" },
-]);
+const chartData = ref([]);
+
+// 住宿资源总数
+const total = ref(0);
 
 onMounted(() => {
+  // 获取住宿资源占比数据
+  getRateData();
+});
+
+// 获取住宿资源占比数据
+const getRateData = async () => {
+  const res = await reqGetRateData();
+  // console.log(res);
+
+  res.data.forEach((ele: any) => {
+    ele.value = ele.total;
+    ele.name = ele.town;
+    delete ele.total;
+    delete ele.town;
+  });
+  chartData.value = res.data;
+
+  // 计算总数
+  total.value = chartData.value.reduce((pre: number, ele: any) => {
+    return pre + ele.value;
+  }, 0);
+
   // 初始化圆环图
   initPieChart();
-});
+};
 
+// 初始化圆环图
 const initPieChart = () => {
   let myPieChart = Echarts.init(pieChart.value);
+
   // 圆环图配置
   const options = {
     title: {
       text: "靖安县",
-      left: "19%",
+      left: "10%",
       top: "40%",
       textStyle: {
         fontSize: 16,
         color: "#9BB7D4",
       },
-      subtext: " 48",
+      subtext: " " + total.value,
       subtextStyle: {
         fontSize: 20,
         color: "#fff",
@@ -59,7 +82,8 @@ const initPieChart = () => {
     legend: {
       orient: "vertical",
       right: "0%",
-      top: "center",
+      top: "10%",
+      // bottom: "30%",
       itemWidth: 8,
       itemHeight: 8,
       itemGap: 25,
@@ -84,30 +108,38 @@ const initPieChart = () => {
         },
       },
       formatter: (params: any) => {
-        // 计算总人数
-        let count = 0;
-        chartData.value.forEach((element) => {
-          count += element.value;
-        });
+        // console.log(params);
 
         const valueObj: any = chartData.value.find(
-          (item) => item.name === params
+          (item: any) => item.name === params
         );
 
         // 计算百分比
         let rate =
-          (Number((valueObj.value / count).toFixed(2)) * 100).toFixed(0) + "%";
+          (Number((valueObj.value / total.value).toFixed(2)) * 100).toFixed(0) +
+          "%";
 
         return params + "{b|" + rate + "}" + "{a|" + valueObj.value + "}";
       },
     },
-    color: ["#59F7CA", "#2B99FF", "#F2B949", "#81C4E4", "#FDFDFD"],
+    color: [
+      "#59F7CA",
+      "#2B99FF",
+      "#F2B949",
+      "#81C4E4",
+      "#FDFDFD",
+      "#50F7CA",
+      "#2B39FF",
+      "#F2B978",
+      "#11C4E4",
+      "#FfFDFD",
+    ],
     series: [
       {
         name: "住宿资源分布情况",
         type: "pie",
-        center: ["24%", "48%"],
-        radius: ["45%", "65%"],
+        center: ["14%", "48%"],
+        radius: ["30%", "45%"],
         avoidLabelOverlap: false,
         label: {
           show: false,
@@ -120,6 +152,7 @@ const initPieChart = () => {
       },
     ],
   };
+
   myPieChart.setOption(options);
 };
 </script>
@@ -154,7 +187,7 @@ const initPieChart = () => {
   }
 
   .resource_chart {
-    width: 548px;
+    width: 590px;
     height: 350px;
   }
 }

src/views/server/left/sale.vue

@@ -14,18 +14,43 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
-import { getNearMonth } from "@/utils/getNearMonth";
+// import { getNearMonth } from "@/utils/getNearMonth";
+// 引入旅游服务相关的接口
+import { reqGetMonthTrend } from "@/api/serve/index";
 
 // 折线图DOM元素
 const lineChart = ref(null);
 
+// X轴时间数组
+const timeList = ref<any>([]);
+
+// y轴数值数组
+const valueList = ref<any>([]);
+
 onMounted(() => {
+  // 获取特产近12月销售额数据
+  getMonthTrend();
+});
+
+// 获取特产近12月销售额数据
+const getMonthTrend = async () => {
+  const res = await reqGetMonthTrend();
+  // console.log(res);
+
+  // 处理数据
+  res.data.forEach((ele: any) => {
+    timeList.value.push(ele.mon.slice(-2) + "月");
+    valueList.value.push(ele.value);
+  });
+
   // 初始化折线图
   initLineChart();
-});
+};
 
+// 初始化折线图
 const initLineChart = () => {
   let myLineChart = Echarts.init(lineChart.value);
+
   // 折线图配置
   const options = {
     tooltip: {
@@ -50,11 +75,11 @@ const initLineChart = () => {
         margin: 20,
         interval: 0,
       },
-      data: getNearMonth(11),
+      data: timeList.value,
     },
     yAxis: {
       type: "value",
-      name: "万元",
+      name: "元",
       nameTextStyle: {
         color: "#fff",
         fontSize: 16,
@@ -72,13 +97,13 @@ const initLineChart = () => {
     },
     series: [
       {
-        data: [16, 19, 12, 16, 16, 16, 12, 16, 16, 16, 12, 16],
+        data: valueList.value,
         type: "line",
         smooth: true,
         color: "#FFE0B3",
         tooltip: {
           valueFormatter: function (value: any) {
-            return value + "万元";
+            return value + "元";
           },
         },
         areaStyle: {
@@ -103,6 +128,7 @@ const initLineChart = () => {
       },
     ],
   };
+
   myLineChart.setOption(options);
 };
 </script>

src/views/server/left/stat.vue

@@ -82,27 +82,48 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { countUpNum } from "@/utils/countUpNum.ts";
+// 引入旅游服务相关的接口
+import { reqGetBookTotal } from "@/api/serve/index";
 
 // 昨日订房量数据
 const yesterdayDom = ref();
-const yesterdayValue = ref<number>(156);
+const yesterdayValue = ref<number>(0);
 
 // 昨日销售额数据
 const yesdayMoneyDom = ref();
-const yesdayMoneyValue = ref<number>(31520);
+const yesdayMoneyValue = ref<number>(0);
 
 // 累计订房量数据
 const addDom = ref();
-const addValue = ref<number>(455);
+const addValue = ref<number>(0);
 
 // 累计销售额数据
 const addMoneyDom = ref();
-const addMoneyValue = ref<number>(91860);
+const addMoneyValue = ref<number>(0);
 
 onMounted(() => {
-  getCountUpNum();
+  // 获取住宿统计数据
+  getBookTotal();
 });
 
+// 获取住宿统计数据
+const getBookTotal = async () => {
+  const res = await reqGetBookTotal();
+  // console.log(res);
+
+  // 昨日订房量数据
+  yesterdayValue.value = res.data.yestedayCount;
+  // 昨日销售额数据
+  yesdayMoneyValue.value = res.data.yestedayValue;
+  // 累计订房量数据
+  addValue.value = res.data.count;
+  // 累计销售额数据
+  addMoneyValue.value = res.data.value;
+
+  // 让数字跳动
+  getCountUpNum();
+};
+
 // 让数字跳动
 const getCountUpNum = () => {
   countUpNum(yesterdayDom.value, yesterdayValue.value);

src/views/server/right/latrineData.vue

@@ -42,6 +42,8 @@
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
 import { countUpNum } from "@/utils/countUpNum.ts";
+// 引入旅游服务相关的接口
+import { reqGetToiletBaseCount } from "@/api/serve/index";
 
 // 厕所数量
 const num = ref<number>(48);
@@ -59,24 +61,70 @@ const todayDom = ref();
 const pieChart = ref(null);
 
 // 扇形图数据
-const chartData = ref([
-  { value: 200, name: "男" },
-  { value: 300, name: "女" },
-  { value: 88, name: "无障碍" },
-]);
+const chartData = ref<any>([]);
+
+// 总个数
+const total = ref(0);
 
 onMounted(() => {
-  // 初始化扇形图
-  initPieChart();
+  // 获取厕所分类数量
+  getToiletBaseCount();
+
+  // 让数字跳动
   getCountUpNum();
 });
 
+// 获取厕所分类数量
+const getToiletBaseCount = async () => {
+  const res = await reqGetToiletBaseCount();
+  // console.log(res);
+
+  Object.keys(res.data[0]).forEach((ele: any) => {
+    if (ele === "num_of_barrier_free") {
+      chartData.value.push({
+        name: "无障碍",
+        value: res.data[0][ele],
+      });
+    } else if (ele === "num_of_man") {
+      chartData.value.push({
+        name: "男",
+        value: res.data[0][ele],
+      });
+    } else if (ele === "num_of_woman") {
+      chartData.value.push({
+        name: "女",
+        value: res.data[0][ele],
+      });
+    } else if (ele === "num_of_common") {
+      chartData.value.push({
+        name: "通用",
+        value: res.data[0][ele],
+      });
+    } else if (ele === "num_of_third") {
+      chartData.value.push({
+        name: "第三方",
+        value: res.data[0][ele],
+      });
+    }
+  });
+
+  // 计算总数
+  total.value = chartData.value.reduce((pre: number, ele: any) => {
+    return pre + ele.value;
+  }, 0);
+
+  // 初始化扇形图
+  initPieChart();
+};
+
+// 初始化扇形图
 const initPieChart = () => {
   let myPieChart = Echarts.init(pieChart.value);
+
   // 扇形图配置
   const options = {
     title: {
-      text: "588",
+      text: "  " + total.value,
       left: "38%",
       top: "34%",
       textStyle: {
@@ -101,7 +149,7 @@ const initPieChart = () => {
         name: "厕所坑位数据情况",
         type: "pie",
         center: ["45%", "45%"],
-        radius: ["35%", "65%"],
+        radius: ["35%", "60%"],
         avoidLabelOverlap: false,
         label: {
           color: "inherit",

src/views/server/right/latrineScene.vue

@@ -9,12 +9,16 @@
     <!-- 筛选框区域 -->
     <div class="select">
       <div class="search_box">
-        <el-select v-model="placeValue" placeholder="请选择地点">
+        <el-select
+          v-model="placeValue"
+          placeholder="请选择地点"
+          @change="handleChange"
+        >
           <el-option
             v-for="(item, index) in options"
             :key="index"
-            :label="item"
-            :value="item"
+            :label="item.name"
+            :value="item.id"
           />
         </el-select>
       </div>
@@ -193,11 +197,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+// 引入旅游服务相关的接口
+import { reqGetToiletBaseInfo } from "@/api/serve/index";
 
+// 当前选择的智慧厕所id
 const placeValue = ref();
 
-const options = ref(["三爪仑风景区", "虎啸峡", "三清山"]);
+// 智慧厕所列表数组
+const options = ref<any>([]);
+
+onMounted(() => {
+  // 获取厕所列表数据
+  getToiletBaseInfo();
+});
+
+// 获取厕所列表数据
+const getToiletBaseInfo = async () => {
+  const res = await reqGetToiletBaseInfo();
+  // console.log(res);
+  options.value = res.data;
+
+  placeValue.value = res.data[0].id;
+};
+
+// 筛选框切换回调
+const handleChange = (e: any) => {
+  console.log(e);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -362,4 +389,8 @@ const options = ref(["三爪仑风景区", "虎啸峡", "三清山"]);
 ::v-deep(.el-progress-bar__outer) {
   background-color: rgba(212, 234, 250, 0.08);
 }
+
+::v-deep(.el-select__placeholder) {
+  color: #fff;
+}
 </style>

src/views/server/right/parkingData.vue

@@ -17,7 +17,7 @@
 
         <div class="msg_box right">
           <div class="box_key">免费</div>
-          <div class="box_value" ref="freeDom">{{ free }}</div>
+          <div class="box_value" ref="freeDom">{{ parkingCount - fee }}</div>
         </div>
 
         <div class="msg_num">
@@ -50,40 +50,74 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { countUpNum } from "@/utils/countUpNum.ts";
+// 引入旅游服务相关的接口
+import { reqGetParkingCount, reqGetParkingSpace } from "@/api/serve/index";
 
-// 收费数据
-const fee = ref<number>(16);
+// 停车场收费数据
+const fee = ref<number>(0);
 const feeDom = ref();
 
-// 免费数据
-const free = ref<number>(4);
+// 停车场免费数据
 const freeDom = ref();
 
-// 当前占用数据
-const use = ref<number>(499);
+// 停车场总数量
+const parkingCount = ref<number>(0);
+const countDom = ref();
+
+// 停车位当前占用数据
+const use = ref<number>(0);
 const useDom = ref();
 
-// 当前空余数据
-const empty = ref<number>(67);
+// 停车位当前空余数据
+const empty = ref<number>(0);
 const emptyDom = ref();
 
-// 总数量
-const parkingCount = ref<number>(20);
-const count = ref<number>(566);
-const countDom = ref();
+// 停车位总数量
+const count = ref<number>(0);
 const countDom2 = ref();
 
 onMounted(() => {
-  getCountUpNum();
+  // 获取停车场信息
+  getParkingCount();
+
+  // 获取停车位信息
+  getParkingSpace();
 });
 
-// 让数字跳动
-const getCountUpNum = () => {
+// 获取停车场信息
+const getParkingCount = async () => {
+  const res = await reqGetParkingCount();
+  // console.log(res);
+
+  res.data.forEach((ele: any) => {
+    if (ele.is_free === "all") {
+      parkingCount.value = ele.amount;
+    } else if (ele.is_free === "1") {
+      fee.value = ele.amount;
+    }
+  });
+
+  // 让数字跳动
   countUpNum(feeDom.value, fee.value);
-  countUpNum(freeDom.value, free.value);
+  countUpNum(freeDom.value, parkingCount.value - fee.value);
+  countUpNum(countDom.value, parkingCount.value);
+};
+
+// 获取停车位信息
+const getParkingSpace = async () => {
+  const res = await reqGetParkingSpace();
+  // console.log(res);
+
+  // 停车位当前占用数据
+  use.value = res.data[0].busy;
+  // 停车位当前占用数据
+  empty.value = res.data[0].fre;
+  // 停车位总数量
+  count.value = res.data[0].total;
+
+  // 让数字跳动
   countUpNum(useDom.value, use.value);
   countUpNum(emptyDom.value, empty.value);
-  countUpNum(countDom.value, parkingCount.value);
   countUpNum(countDom2.value, count.value);
 };
 </script>
@@ -169,7 +203,7 @@ const getCountUpNum = () => {
       .msg_num {
         position: absolute;
         top: 50px;
-        left: 218px;
+        left: 222px;
         height: 110px;
         text-align: center;
 

src/views/server/right/parkingResource.vue

@@ -14,31 +14,56 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
+// 引入旅游服务相关的接口
+import { reqGetParkingByTown } from "@/api/serve/index";
 
 // 圆环图DOM元素
 const pieChart = ref(null);
 
 // 圆环图数据
-const chartData = ref([
-  { value: 2, name: "三爪仑" },
-  { value: 2, name: "双溪镇" },
-  { value: 5, name: "雷公尖" },
-  { value: 3, name: "仁首镇" },
-  { value: 4, name: "宝峰镇" },
-  { value: 4, name: "三仑" },
-]);
+const chartData = ref([]);
+
+// 停车场总数
+const totalCount = ref(0);
 
 onMounted(() => {
+  // 获取停车场资源乡镇分布情况
+  getParkingByTown();
+});
+
+// 获取停车场资源乡镇分布情况
+const getParkingByTown = async () => {
+  const res = await reqGetParkingByTown();
+  // console.log(res);
+
+  // 处理数据
+  res.data.forEach((ele: any) => {
+    ele.name = ele.town;
+    ele.value = ele.amount;
+
+    delete ele.town;
+    delete ele.amount;
+  });
+
+  chartData.value = res.data;
+
+  // 计算总数
+  totalCount.value = chartData.value.reduce((pre, ele: any) => {
+    return pre + ele.value;
+  }, 0);
+
   // 初始化圆环图
   initPieChart();
-});
+};
 
+// 初始化圆环图
 const initPieChart = () => {
   let myPieChart = Echarts.init(pieChart.value);
+
   // 圆环图配置
   const options = {
     title: {
-      text: "20",
+      text: totalCount.value,
       left: "42%",
       top: "28%",
       textStyle: {
@@ -58,7 +83,7 @@ const initPieChart = () => {
       trigger: "item",
     },
     legend: {
-      bottom: "5%",
+      bottom: "25%",
       left: "12%",
       itemWidth: 8,
       itemHeight: 8,
@@ -82,19 +107,15 @@ const initPieChart = () => {
         },
       },
       formatter: (params: any) => {
-        // 计算总人数
-        let count = 0;
-        chartData.value.forEach((element) => {
-          count += element.value;
-        });
-
         const valueObj: any = chartData.value.find(
-          (item) => item.name === params
+          (item: any) => item.name === params
         );
 
         // 计算百分比
         let rate =
-          (Number((valueObj.value / count).toFixed(2)) * 100).toFixed(0) + "%";
+          (
+            Number((valueObj.value / totalCount.value).toFixed(2)) * 100
+          ).toFixed(0) + "%";
 
         return (
           params + "{b|" + rate + "}" + "{a|" + valueObj.value + "    " + "}"

src/views/server/right/parkingScene.vue

@@ -11,12 +11,16 @@
       <!-- 选择地点筛选框区域 -->
       <div class="content_search">
         <div class="search_box">
-          <el-select v-model="placeValue" placeholder="请选择地点">
+          <el-select
+            v-model="placeValue"
+            placeholder="请选择地点"
+            @change="handleChange"
+          >
             <el-option
               v-for="(item, index) in options"
               :key="index"
-              :label="item"
-              :value="item"
+              :label="item.realname"
+              :value="item.id"
             />
           </el-select>
         </div>
@@ -25,15 +29,21 @@
       <!-- 信息展示区域 -->
       <div class="content_msg">
         <div class="msg_box time">
-          <div class="value">00:00 - 24:00</div>
+          <div class="value">{{ parkingInfo?.open_time }}</div>
           <div>开放时间</div>
         </div>
         <div class="msg_box free">
-          <div class="value">不免费</div>
+          <div class="value">
+            {{ parkingInfo?.is_free == 0 ? "免费" : "收费" }}
+          </div>
           <div>是否免费</div>
         </div>
         <div class="msg_box rate">
-          <div class="value">20/150</div>
+          <div class="value">
+            {{
+              parkingInfo?.num_of_total - parkingInfo?.number_of_remainder
+            }}/{{ parkingInfo?.num_of_total }}
+          </div>
           <div>当前占用比</div>
         </div>
       </div>
@@ -48,21 +58,53 @@
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
 import { getNearDay } from "@/utils/getNearDay.ts";
+// 引入旅游服务相关的接口
+import { reqGetAllParkingInfo, reqGetParkingInfoById } from "@/api/serve/index";
 
+// 当前选择的停车场id
 const placeValue = ref();
 
-const options = ref(["三爪仑风景区", "虎啸峡", "三清山"]);
+// 停车场数组
+const options = ref<any>([]);
+
+// 当前停车场信息
+const parkingInfo = ref();
 
 // 折线图DOM元素
 const lineChart = ref(null);
 
 onMounted(() => {
+  // 获取停车场列表
+  getAllParkingInfo();
   // 初始化折线图
   initLineChart();
 });
 
+// 获取停车场列表
+const getAllParkingInfo = async () => {
+  const res = await reqGetAllParkingInfo();
+  // console.log(res);
+
+  options.value = res.data;
+  placeValue.value = options.value[0].id;
+
+  // 根据id获取停车场详细信息
+  getParkingInfoById();
+};
+
+// 根据id获取停车场详细信息
+const getParkingInfoById = async () => {
+  const res = await reqGetParkingInfoById({
+    id: placeValue.value,
+  });
+  // console.log(res);
+  parkingInfo.value = res.data[0];
+};
+
+// 初始化折线图
 const initLineChart = () => {
   let myLineChart = Echarts.init(lineChart.value);
+
   // 折线图配置
   const options = {
     tooltip: {
@@ -139,8 +181,15 @@ const initLineChart = () => {
       },
     ],
   };
+
   myLineChart.setOption(options);
 };
+
+// 停车场选择框切换回调
+const handleChange = (e: any) => {
+  placeValue.value = e;
+  getParkingInfoById();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -238,4 +287,8 @@ const initLineChart = () => {
   height: 38px;
   background-color: transparent;
 }
+
+::v-deep(.el-select__placeholder) {
+  color: #fff;
+}
 </style>

vite.config.ts

@@ -42,6 +42,14 @@ export default defineConfig(({ command, mode }) => {
           //路径重写
           rewrite: (path) => path.replace(/^\/bigData2/, ""),
         },
+        [env.VITE_APP_BASE_API_LOCAL]: {
+          //获取数据的服务器地址设置
+          target: env.VITE_SERVE_LOCAL,
+          //需要代理跨域
+          changeOrigin: true,
+          //路径重写
+          rewrite: (path) => path.replace(/^\/local/, ""),
+        },
       },
     },
   };