chengdandan
/
hebeiLargeScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

徐涛

This commit is contained in:
xutao 2025-06-16 09:15:32 +08:00
parent 0f1740f301
commit c9c6fd98ef
8 changed files with 246 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

4
src/api/modules/index.ts
View File

@ -106,3 +106,7 @@ export const getVideoDeviceList = (param: any = {}) => {
export const videoStream=(param:any={})=>{ export const videoStream=(param:any={})=>{
return GET('/video/stream',param) return GET('/video/stream',param)
} }
// 今日各监测点车流情况
export const getPointTraffic=(param:any={})=>{
return GET('/device/trafficFlow/pointTraffic',param)
}

1
src/views/component/EventStatus.vue
View File

@ -18,7 +18,6 @@
</template> </template>
<script setup> <script setup>
defineProps({ defineProps({
pendingCount: { pendingCount: {
type: Number, type: Number,

37
src/views/component/EventTask.vue
View File

@ -41,41 +41,46 @@ const allEvents = ref<EventItem[]>([
const formatTime = (time: string) => { const formatTime = (time: string) => {
return dayjs(time).format("YYYY-MM-DD HH:mm:ss"); return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
}; };
onMounted(()=>{ onMounted(() => {
const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'); const endTime = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss");
const startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'); const startTime = dayjs()
meventListHistory({startTime, endTime}).then((res)=>{ .subtract(6, "day")
console.log(res, 'rrreeesss') .startOf("day")
.format("YYYY-MM-DD HH:mm:ss");
meventListHistory({ startTime, endTime }).then((res) => {
console.log(res, "rrreeesss");
allEvents.value = res.rows.map((item: any) => ({ allEvents.value = res.rows.map((item: any) => ({
type: item.eventType, type: item.eventType,
location: (item.direction === '1' ? '黄骅港方向 ' : item.direction === '2' ? '邯郸方向 ' : '') + item.pilenum, location:
(item.direction === "1"
? "黄骅港方向 "
: item.direction === "2"
? "邯郸方向 "
: "") + item.pilenum,
time: item.time, time: item.time,
status: item.status == '0' ? '待处置' : '处置中', status: item.status == "0" ? "待处置" : "处置中",
})); }));
}) });
}) });
</script> </script>
<template> <template>
<div class="event-task"> <div class="event-task">
<div v-for="(event, index) in allEvents" <div v-for="(event, index) in allEvents" :key="index" class="event-section">
:key="index" class="event-section">
<div class="section-header"> <div class="section-header">
<div style="color: #fbfbfc">{{event.type}}</div> <div style="color: #fbfbfc">{{ event.type }}</div>
<div <div
class="event-status" class="event-status"
:class="{ :class="{
processing: event.status === '处置中', processing: event.status === '处置中',
pending: event.status === '待处置' pending: event.status === '待处置',
}" }"
> >
{{ event.status }} {{ event.status }}
</div> </div>
</div> </div>
<div class="event-list"> <div class="event-list">
<div <div class="event-item">
class="event-item"
>
<div class="event-info"> <div class="event-info">
<div class="location">{{ event.location }}</div> <div class="location">{{ event.location }}</div>
<div class="time">{{ formatTime(event.time) }}</div> <div class="time">{{ formatTime(event.time) }}</div>

178
src/views/component/left.vue
View File

@ -14,7 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
import eqm3Active from "@/assets/img/eqm/eqm3_active.png"; import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
import eqm4Default from "@/assets/img/eqm/eqm4.png"; import eqm4Default from "@/assets/img/eqm/eqm4.png";
import eqm4Active from "@/assets/img/eqm/eqm4_active.png"; import eqm4Active from "@/assets/img/eqm/eqm4_active.png";
import { todayTrafficCount, trafficTrend } from "@/api/modules/index"; import {
todayTrafficCount,
trafficTrend,
getPointTraffic,
} from "@/api/modules/index";
import { update } from "lodash-es"; import { update } from "lodash-es";
// 车流量数据 // 车流量数据
const trafficData = { const trafficData = {
@ -37,20 +41,37 @@ const trafficData = {
}; };
// 监测点车流数据 // 监测点车流数据
const monitoringPointsData = reactive({ const monitoringPointsData = ref([]);
points: [
{ name: "连镇", weeklyAvg: 19500, dailyTotal: 16500 },
{ name: "扬王", weeklyAvg: 12000, dailyTotal: 14500 },
{ name: "小庄", weeklyAvg: 10800, dailyTotal: 12300 },
{ name: "寨子", weeklyAvg: 21500, dailyTotal: 26800 },
{ name: "盐山", weeklyAvg: 19700, dailyTotal: 22000 },
],
});
// 交通流量趋势数据 // 交通流量趋势数据
const trafficTrendData = reactive({ const trafficTrendData = reactive({
hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00", "09:00", "10:00", "11:00","12:00", hours: [
"13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"], "00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
realTimeValues: [], realTimeValues: [],
averageValues: [], averageValues: [],
}); });
@ -186,37 +207,56 @@ const chartOptions: EChartsOption = {
}, },
], ],
}; };
const chartShow = ref(false);
const chartShow2 = ref(false);
// 初始化图表 // 初始化图表
const { initCharts, setOptions } = useCharts(chartRef, chartOptions); const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
// 获取当前日期并格式化为 YYYY-MM-DD // 获取当前日期并格式化为 YYYY-MM-DD
const today = new Date(); const today = new Date();
const year = today.getFullYear(); const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始 const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始
const day = String(today.getDate()).padStart(2, '0'); const day = String(today.getDate()).padStart(2, "0");
const todayTime = ref(`${year}-${month}-${day}`); const todayTime = ref(`${year}-${month}-${day}`);
// 确保图表在组件挂载后渲染 // 确保图表在组件挂载后渲染
onMounted(async () => { onMounted(async () => {
let dataMap = {
today: todayTime.value,
};
const ress = await getPointTraffic(dataMap);
monitoringPointsData.value = ress.data || [];
chartShow.value = true;
initCharts(); initCharts();
try { try {
const query = { const query = {
todayTime: todayTime.value todayTime: todayTime.value,
}; };
const res = await todayTrafficCount(query); const res = await todayTrafficCount(query);
if (res.data) { if (res.data) {
res.data.forEach((item) => { res.data.forEach((item) => {
if (item.vehicleType == 1) { //小车 if (item.vehicleType == 1) {
//小车
trafficData.car.value = item.vehicleCount; trafficData.car.value = item.vehicleCount;
trafficData.car.percentage = item.percentage; trafficData.car.percentage = item.percentage;
} else if (item.vehicleType == 2) { //货车 // alert(trafficData.car.percentage);
// this.$forceUpdate(); // 直接调用
} else if (item.vehicleType == 2) {
//货车
trafficData.truck.value = item.vehicleCount; trafficData.truck.value = item.vehicleCount;
trafficData.truck.percentage = item.percentage; trafficData.truck.percentage = item.percentage;
} else if (item.vehicleType == 3) { //客车 } else if (item.vehicleType == 3) {
//客车
trafficData.bus.value = item.vehicleCount; trafficData.bus.value = item.vehicleCount;
trafficData.bus.percentage = item.percentage; trafficData.bus.percentage = item.percentage;
} }
trafficData.total = item.total; trafficData.total = item.total;
}) });
chartShow2.value = true;
// this.$forceUpdate();
// this.$forceUpdate();
// console.log(trafficData, 'trafficData') // console.log(trafficData, 'trafficData')
} }
chartOptions.series[0].data = [ chartOptions.series[0].data = [
@ -278,16 +318,18 @@ onMounted(async () => {
// 调用 setOptions 方法重新渲染图表 // 调用 setOptions 方法重新渲染图表
setOptions(chartOptions); setOptions(chartOptions);
trafficTrend({today: '2025-05-30', pileNum: ''}).then((res) => { trafficTrend({ today: "2025-05-30", pileNum: "" }).then((res) => {
console.log(res, '///////////////////') console.log(res, "///////////////////");
if (res.code == 200) { if (res.code == 200) {
// 清空原有数据 // 清空原有数据
trafficTrendData.realTimeValues = []; trafficTrendData.realTimeValues = [];
trafficTrendData.averageValues = []; trafficTrendData.averageValues = [];
trafficTrendData.realTimeValues = [...res.data.map(item => item.total)]; trafficTrendData.realTimeValues = [
trafficTrendData.averageValues = [...res.data.map(item => item.avg)]; ...res.data.map((item) => item.total),
console.log(trafficTrendData, 'trafficTrendData') ];
trafficTrendData.averageValues = [...res.data.map((item) => item.avg)];
console.log(trafficTrendData, "trafficTrendData");
// // 可选：重新渲染图表 // // 可选：重新渲染图表
// trendChartInstance.setOption({ // trendChartInstance.setOption({
// series: [{ // series: [{
@ -297,11 +339,10 @@ onMounted(async () => {
// }] // }]
// }); // });
} }
}) });
} catch (error) { } catch (error) {
console.error("请求设备列表失败:", error); console.error("请求设备列表失败:", error);
} }
}); });
// 趋势图时间范围选项 // 趋势图时间范围选项
@ -321,38 +362,43 @@ const handleTimeRangeChange = (event: Event) => {
// 这里可以添加切换时间范围的逻辑 // 这里可以添加切换时间范围的逻辑
}; };
const items = ref([ const items = ref([
{ {
defaultImg: eqm1Default, defaultImg: eqm1Default,
activeImg: eqm1Active, activeImg: eqm1Active,
isActive: true, // 默认选中 isActive: true, // 默认选中
type: '44', // type: "44", //
}, },
{ {
defaultImg: eqm2Default, defaultImg: eqm2Default,
activeImg: eqm2Active, activeImg: eqm2Active,
isActive: true, isActive: true,
type: '22', // 视频监控 type: "22", // 视频监控
}, },
{ {
defaultImg: eqm3Default, defaultImg: eqm3Default,
activeImg: eqm3Active, activeImg: eqm3Active,
isActive: true, isActive: true,
type: '53', // 广播 type: "53", // 广播
}, },
{ {
defaultImg: eqm4Default, defaultImg: eqm4Default,
activeImg: eqm4Active, activeImg: eqm4Active,
isActive: true, isActive: true,
type: '15', // 情报板 type: "15", // 情报板
}, },
]); ]);
const toggleSelection = (index: number) => { const toggleSelection = (index: number) => {
items.value[index].isActive = !items.value[index].isActive; items.value[index].isActive = !items.value[index].isActive;
// 通知地图组件切换显示/隐藏 // 通知地图组件切换显示/隐藏
window.dispatchEvent(new CustomEvent('toggle-map-device', { window.dispatchEvent(
detail: { type: items.value[index].type, show: items.value[index].isActive } new CustomEvent("toggle-map-device", {
})); detail: {
type: items.value[index].type,
show: items.value[index].isActive,
},
})
);
}; };
</script> </script>
@ -370,28 +416,43 @@ const toggleSelection = (index: number) => {
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">小型车</span> <span class="vehicle-name">小型车</span>
<span class="percentage">{{ trafficData.car.percentage }}%</span> <span class="percentage" v-if="chartShow2"
>{{ trafficData.car.percentage }}%</span
>
</div> </div>
<div class="vehicle-value car"> <div class="vehicle-value car">
<count-up :end-val="trafficData.car.value" :options="countupOptions" /> <count-up
:end-val="trafficData.car.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">货车</span> <span class="vehicle-name">货车</span>
<span class="percentage">{{ trafficData.truck.percentage }}%</span> <span class="percentage"
>{{ trafficData.truck.percentage }}%</span
>
</div> </div>
<div class="vehicle-value truck"> <div class="vehicle-value truck">
<count-up :end-val="trafficData.truck.value" :options="countupOptions" /> <count-up
:end-val="trafficData.truck.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
<div class="vehicle-item"> <div class="vehicle-item">
<div class="vehicle-info"> <div class="vehicle-info">
<span class="vehicle-name">客车</span> <span class="vehicle-name">客车</span>
<span class="percentage">{{ trafficData.bus.percentage }}%</span> <span class="percentage"
>{{ trafficData.bus.percentage }}%</span
>
</div> </div>
<div class="vehicle-value bus"> <div class="vehicle-value bus">
<count-up :end-val="trafficData.bus.value" :options="countupOptions" /> <count-up
:end-val="trafficData.bus.value"
:options="countupOptions"
/>
</div> </div>
</div> </div>
</div> </div>
@ -409,15 +470,26 @@ const toggleSelection = (index: number) => {
<div class="traffic-flow-item"> <div class="traffic-flow-item">
<div class="item-title">今日各监测点车流情况</div> <div class="item-title">今日各监测点车流情况</div>
<div class="item-content"> <div class="item-content">
<monitoring-points-chart :data="monitoringPointsData.points"></monitoring-points-chart> <monitoring-points-chart
:data="monitoringPointsData"
v-if="chartShow"
></monitoring-points-chart>
</div> </div>
</div> </div>
<div class="traffic-flow-item"> <div class="traffic-flow-item">
<div class="item-title"> <div class="item-title">
交通流量趋势 交通流量趋势
<div class="dropdown-container"> <div class="dropdown-container">
<select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select"> <select
<option v-for="option in timeRangeOptions" :key="option.value" :value="option.value"> v-model="selectedTimeRange"
@change="handleTimeRangeChange"
class="custom-select"
>
<option
v-for="option in timeRangeOptions"
:key="option.value"
:value="option.value"
>
{{ option.label }} {{ option.label }}
</option> </option>
</select> </select>
@ -427,12 +499,20 @@ const toggleSelection = (index: number) => {
<traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart> <traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
</div> </div>
<div class="eqmMange"> <div class="eqmMange">
<div v-for="(item, index) in items" :key="index" class="eqm-item" :class="{ active: item.isActive }" <div
v-for="(item, index) in items"
:key="index"
class="eqm-item"
:class="{ active: item.isActive }"
@click="toggleSelection(index)" @click="toggleSelection(index)"
:style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div> :style="{
backgroundImage: `url(${
item.isActive ? item.activeImg : item.defaultImg
})`,
}"
></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -544,16 +624,16 @@ const toggleSelection = (index: number) => {
&.car { &.car {
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
background: rgba(253, 187, 103, 0.1); background: rgba(253, 187, 103, 0.1);
color: #FDBB67; color: #fdbb67;
} }
&.truck { &.truck {
color: #59A2FC; color: #59a2fc;
background-color: rgba(0, 200, 255, 0.1); background-color: rgba(0, 200, 255, 0.1);
} }
&.bus { &.bus {
color: #00FFFF; color: #00ffff;
background-color: rgba(0, 255, 255, 0.1); background-color: rgba(0, 255, 255, 0.1);
} }
} }

29
src/views/component/monitoring-points-chart.vue
View File

@ -1,28 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from "vue"; import { ref, reactive, onMounted, defineProps, nextTick } from "vue";
import useCharts from "@/hooks/useEcharts"; import useCharts from "@/hooks/useEcharts";
import type { EChartsOption } from "echarts"; import type { EChartsOption } from "echarts";
import { getPointTraffic } from "@/api/modules/index";
// import { nextTick } from "process";
// 定义数据点类型接口 // 定义数据点类型接口
interface Point { interface Point {
name: string; scope: string;
weeklyAvg: number; totalTraffic: number;
dailyTotal: number; weekAvg: number;
} }
const props = defineProps({ const props = defineProps({
data: { data: {
type: Array as () => Point[], type: Array as () => Point[],
default: () => [ default: () => [],
{ name: "连镇", weeklyAvg: 19500, dailyTotal: 16500 },
{ name: "扬王", weeklyAvg: 12000, dailyTotal: 14500 },
{ name: "小庄", weeklyAvg: 10800, dailyTotal: 12300 },
{ name: "寨子", weeklyAvg: 21500, dailyTotal: 26800 },
{ name: "盐山", weeklyAvg: 19700, dailyTotal: 22000 },
],
}, },
}); });
const data = ref([]);
// 图表容器引用 // 图表容器引用
const chartRef = ref<HTMLElement | null>(null); const chartRef = ref<HTMLElement | null>(null);
@ -59,7 +54,7 @@ const chartOptions: EChartsOption = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: props.data.map((point: Point) => point.name), data: props.data.map((point: Point) => point.scope),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1e3d6f", color: "#1e3d6f",
@ -86,7 +81,7 @@ const chartOptions: EChartsOption = {
color: "#fff", color: "#fff",
fontSize: 22, fontSize: 22,
}, },
max: 30000, // max: 30000,
}, },
series: [ series: [
{ {
@ -111,7 +106,7 @@ const chartOptions: EChartsOption = {
], ],
}, },
}, },
data: props.data.map((point: Point) => point.weeklyAvg), data: props.data.map((point: Point) => point.weekAvg),
}, },
{ {
name: "当日累计", name: "当日累计",
@ -135,7 +130,7 @@ const chartOptions: EChartsOption = {
], ],
}, },
}, },
data: props.data.map((point: Point) => point.dailyTotal), data: props.data.map((point: Point) => point.totalTraffic),
}, },
], ],
}; };

80
src/views/component/right.vue
View File

@ -3,13 +3,19 @@ import { ref, onMounted, computed } from "vue";
import EventStatus from "./EventStatus.vue"; import EventStatus from "./EventStatus.vue";
import EventTask from "./EventTask.vue"; import EventTask from "./EventTask.vue";
import RealTimeImage from "./RealTimeImage.vue"; import RealTimeImage from "./RealTimeImage.vue";
import { weatherForecast, weatherHourly, todayStatusCount, todayHourly, getDictData } from "@/api/modules/index"; import {
import { useTodayTime, } from "@/utils/packge"; weatherForecast,
weatherHourly,
todayStatusCount,
todayHourly,
getDictData,
} from "@/api/modules/index";
import { useTodayTime } from "@/utils/packge";
const { todayTime, getTodayTime } = useTodayTime(); const { todayTime, getTodayTime } = useTodayTime();
// 模拟数据，实际项目中可能需要从API获取 // 模拟数据，实际项目中可能需要从API获取
const pendingCount = ref<string>(''); const pendingCount = ref<string>("");
const processingCount = ref<string>(''); const processingCount = ref<string>("");
const serviceArea = ref<any[]>([]); const serviceArea = ref<any[]>([]);
const Hub = ref<any[]>([]); const Hub = ref<any[]>([]);
const Intercommunication = ref<any[]>([]); const Intercommunication = ref<any[]>([]);
@ -30,38 +36,46 @@ const areaTypes = ref([
// 切换区域类型选中状态 // 切换区域类型选中状态
const toggleAreaType = (id: string) => { const toggleAreaType = (id: string) => {
areaTypes.value.forEach((type) => { areaTypes.value.forEach((type) => {
type.selected = type.id === id; type.selected = type.id === id;
}); });
}; };
onMounted(()=>{ onMounted(() => {
todayStatusCount({todayTime: todayTime.value}).then((res: any) => { todayStatusCount({ todayTime: todayTime.value }).then((res: any) => {
if(res.code === 200){ // alert(".............");
res.data.forEach((item: any) => { // alert(JSON.stringify(res.data));
if(item.status == '0'){ //待处理 if (res.code === 200) {
pendingCount.value = item.count || 0 res.data.forEach((item: any) => {
} else if(item.status == '2'){ //处置中 if (item.status == "0") {
processingCount.value = item.count || 0 //待处理
} pendingCount.value = item.count || 0;
}); // alert(pendingCount.value);
} } else if (item.status == "2") {
}) //处置中
getDictData("hb_service_area").then((res: any) => { //服务区 processingCount.value = item.count || 0;
if (res.code === 200) { }
serviceArea.value = res.data || []; });
} }
}); });
getDictData("hb_hub").then((res: any) => { //枢纽 getDictData("hb_service_area").then((res: any) => {
if (res.code === 200) { //服务区
Hub.value = res.data || []; if (res.code === 200) {
} serviceArea.value = res.data || [];
}); }
getDictData("hb_interchange").then((res: any) => { //互通 });
if (res.code === 200) { getDictData("hb_hub").then((res: any) => {
Intercommunication.value = res.data || []; //枢纽
} if (res.code === 200) {
}); Hub.value = res.data || [];
}) }
});
getDictData("hb_interchange").then((res: any) => {
//互通
if (res.code === 200) {
Intercommunication.value = res.data || [];
}
});
});
const currentAreaList = computed(() => { const currentAreaList = computed(() => {
const selectedType = areaTypes.value.find((type) => type.selected); const selectedType = areaTypes.value.find((type) => type.selected);
if (selectedType?.id === "service") { if (selectedType?.id === "service") {

60
vite.config.ts
View File

@ -8,35 +8,34 @@
*/ */
/// <reference types="vite/client" /> /// <reference types="vite/client" />
import type { UserConfig, ConfigEnv } from 'vite'; import type { UserConfig, ConfigEnv } from "vite";
import { defineConfig, loadEnv } from 'vite' import { defineConfig, loadEnv } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import { resolve } from "path"; import { resolve } from "path";
import AutoImport from 'unplugin-auto-import/vite' import AutoImport from "unplugin-auto-import/vite";
import Components from 'unplugin-vue-components/vite' import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
//https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md //https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md
import ElementPlus from 'unplugin-element-plus/vite' import ElementPlus from "unplugin-element-plus/vite";
import {createHtmlPlugin} from 'vite-plugin-html'; import { createHtmlPlugin } from "vite-plugin-html";
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => { export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
const viteEnv = loadEnv(mode, process.cwd()); const viteEnv = loadEnv(mode, process.cwd());
return { return {
base: '/', base: "/",
plugins: [ plugins: [
vue(), vue(),
AutoImport({ resolvers: [ElementPlusResolver()] }), AutoImport({ resolvers: [ElementPlusResolver()] }),
Components({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }),
ElementPlus(), ElementPlus(),
createHtmlPlugin({ createHtmlPlugin({
inject: { inject: {
data: { data: {
injectMapScript: `<script src="./public/static/map_load.js"></script>`, injectMapScript: `<script src="./public/static/map_load.js"></script>`,
}, },
}, },
minify: true, minify: true,
}), }),
// Compression({ // Compression({
// algorithm: 'gzip', // algorithm: 'gzip',
// test: /\.(js|css|html|json|svg|jpe?g|png|gif)$/i, // test: /\.(js|css|html|json|svg|jpe?g|png|gif)$/i,
@ -47,32 +46,37 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
], ],
publicDir: "public", publicDir: "public",
build: { build: {
outDir: 'dist', outDir: "dist",
assetsDir: 'static' assetsDir: "static",
}, },
server: { server: {
host: '0.0.0.0', host: "0.0.0.0",
port: 8080, port: 8080,
open: true, open: true,
strictPort: false, strictPort: false,
proxy: { proxy: {
[viteEnv.VITE_APP_CONTROL_BASE_API]: { [viteEnv.VITE_APP_CONTROL_BASE_API]: {
target: 'http://172.16.1.133:8081/xjIotApi', target: "http://172.16.1.128:8090/xjIotApi",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''), rewrite: (path) =>
path.replace(
new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`),
""
),
}, },
[viteEnv.VITE_APP_BASE_API]: { [viteEnv.VITE_APP_BASE_API]: {
target: 'http://172.16.1.133:8081/iotApi', target: "http://172.16.1.128:8090/iotApi",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''), rewrite: (path) =>
} path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ""),
},
}, },
}, },
resolve: { resolve: {
alias: { alias: {
"@": resolve(__dirname, "./src"), "@": resolve(__dirname, "./src"),
"components": resolve(__dirname, "./src/components"), components: resolve(__dirname, "./src/components"),
"api": resolve(__dirname, "./src/api") api: resolve(__dirname, "./src/api"),
}, },
}, },
css: { css: {
@ -81,6 +85,6 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
additionalData: `@use "./src/assets/css/variable.scss" as *;`, additionalData: `@use "./src/assets/css/variable.scss" as *;`,
}, },
}, },
} },
}; };
}); });