This commit is contained in:
parent
0f1740f301
commit
c9c6fd98ef
|
|
@ -106,3 +106,7 @@ export const getVideoDeviceList = (param: any = {}) => {
|
|||
export const videoStream=(param:any={})=>{
|
||||
return GET('/video/stream',param)
|
||||
}
|
||||
// 今日各监测点车流情况
|
||||
export const getPointTraffic=(param:any={})=>{
|
||||
return GET('/device/trafficFlow/pointTraffic',param)
|
||||
}
|
||||
|
|
@ -18,7 +18,6 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
defineProps({
|
||||
pendingCount: {
|
||||
type: Number,
|
||||
|
|
|
|||
|
|
@ -41,41 +41,46 @@ const allEvents = ref<EventItem[]>([
|
|||
const formatTime = (time: string) => {
|
||||
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
|
||||
};
|
||||
onMounted(()=>{
|
||||
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');
|
||||
meventListHistory({startTime, endTime}).then((res)=>{
|
||||
console.log(res, 'rrreeesss')
|
||||
onMounted(() => {
|
||||
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");
|
||||
meventListHistory({ startTime, endTime }).then((res) => {
|
||||
console.log(res, "rrreeesss");
|
||||
allEvents.value = res.rows.map((item: any) => ({
|
||||
type: item.eventType,
|
||||
location: (item.direction === '1' ? '黄骅港方向 ' : item.direction === '2' ? '邯郸方向 ' : '') + item.pilenum,
|
||||
location:
|
||||
(item.direction === "1"
|
||||
? "黄骅港方向 "
|
||||
: item.direction === "2"
|
||||
? "邯郸方向 "
|
||||
: "") + item.pilenum,
|
||||
time: item.time,
|
||||
status: item.status == '0' ? '待处置' : '处置中',
|
||||
status: item.status == "0" ? "待处置" : "处置中",
|
||||
}));
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="event-task">
|
||||
<div v-for="(event, index) in allEvents"
|
||||
:key="index" class="event-section">
|
||||
<div v-for="(event, index) in allEvents" :key="index" class="event-section">
|
||||
<div class="section-header">
|
||||
<div style="color: #fbfbfc">{{event.type}}</div>
|
||||
<div style="color: #fbfbfc">{{ event.type }}</div>
|
||||
<div
|
||||
class="event-status"
|
||||
:class="{
|
||||
processing: event.status === '处置中',
|
||||
pending: event.status === '待处置'
|
||||
pending: event.status === '待处置',
|
||||
}"
|
||||
>
|
||||
{{ event.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-list">
|
||||
<div
|
||||
class="event-item"
|
||||
>
|
||||
<div class="event-item">
|
||||
<div class="event-info">
|
||||
<div class="location">{{ event.location }}</div>
|
||||
<div class="time">{{ formatTime(event.time) }}</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
|
|||
import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
|
||||
import eqm4Default from "@/assets/img/eqm/eqm4.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";
|
||||
// 车流量数据
|
||||
const trafficData = {
|
||||
|
|
@ -37,20 +41,37 @@ const trafficData = {
|
|||
};
|
||||
|
||||
// 监测点车流数据
|
||||
const monitoringPointsData = reactive({
|
||||
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 monitoringPointsData = ref([]);
|
||||
|
||||
// 交通流量趋势数据
|
||||
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",
|
||||
"13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
|
||||
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",
|
||||
"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: [],
|
||||
averageValues: [],
|
||||
});
|
||||
|
|
@ -186,37 +207,56 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
],
|
||||
};
|
||||
const chartShow = ref(false);
|
||||
const chartShow2 = ref(false);
|
||||
|
||||
// 初始化图表
|
||||
const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
|
||||
// 获取当前日期并格式化为 YYYY-MM-DD
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
|
||||
const day = String(today.getDate()).padStart(2, '0');
|
||||
const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始
|
||||
const day = String(today.getDate()).padStart(2, "0");
|
||||
|
||||
const todayTime = ref(`${year}-${month}-${day}`);
|
||||
// 确保图表在组件挂载后渲染
|
||||
onMounted(async () => {
|
||||
let dataMap = {
|
||||
today: todayTime.value,
|
||||
};
|
||||
const ress = await getPointTraffic(dataMap);
|
||||
monitoringPointsData.value = ress.data || [];
|
||||
chartShow.value = true;
|
||||
initCharts();
|
||||
|
||||
try {
|
||||
const query = {
|
||||
todayTime: todayTime.value
|
||||
todayTime: todayTime.value,
|
||||
};
|
||||
const res = await todayTrafficCount(query);
|
||||
if (res.data) {
|
||||
res.data.forEach((item) => {
|
||||
if (item.vehicleType == 1) { //小车
|
||||
if (item.vehicleType == 1) {
|
||||
//小车
|
||||
trafficData.car.value = item.vehicleCount;
|
||||
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.percentage = item.percentage;
|
||||
} else if (item.vehicleType == 3) { //客车
|
||||
} else if (item.vehicleType == 3) {
|
||||
//客车
|
||||
trafficData.bus.value = item.vehicleCount;
|
||||
trafficData.bus.percentage = item.percentage;
|
||||
}
|
||||
trafficData.total = item.total;
|
||||
})
|
||||
});
|
||||
|
||||
chartShow2.value = true;
|
||||
// this.$forceUpdate();
|
||||
// this.$forceUpdate();
|
||||
// console.log(trafficData, 'trafficData')
|
||||
}
|
||||
chartOptions.series[0].data = [
|
||||
|
|
@ -278,16 +318,18 @@ onMounted(async () => {
|
|||
|
||||
// 调用 setOptions 方法重新渲染图表
|
||||
setOptions(chartOptions);
|
||||
trafficTrend({today: '2025-05-30', pileNum: ''}).then((res) => {
|
||||
console.log(res, '///////////////////')
|
||||
trafficTrend({ today: "2025-05-30", pileNum: "" }).then((res) => {
|
||||
console.log(res, "///////////////////");
|
||||
if (res.code == 200) {
|
||||
// 清空原有数据
|
||||
trafficTrendData.realTimeValues = [];
|
||||
trafficTrendData.averageValues = [];
|
||||
|
||||
trafficTrendData.realTimeValues = [...res.data.map(item => item.total)];
|
||||
trafficTrendData.averageValues = [...res.data.map(item => item.avg)];
|
||||
console.log(trafficTrendData, 'trafficTrendData')
|
||||
trafficTrendData.realTimeValues = [
|
||||
...res.data.map((item) => item.total),
|
||||
];
|
||||
trafficTrendData.averageValues = [...res.data.map((item) => item.avg)];
|
||||
console.log(trafficTrendData, "trafficTrendData");
|
||||
// // 可选：重新渲染图表
|
||||
// trendChartInstance.setOption({
|
||||
// series: [{
|
||||
|
|
@ -297,11 +339,10 @@ onMounted(async () => {
|
|||
// }]
|
||||
// });
|
||||
}
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("请求设备列表失败:", error);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// 趋势图时间范围选项
|
||||
|
|
@ -321,38 +362,43 @@ const handleTimeRangeChange = (event: Event) => {
|
|||
// 这里可以添加切换时间范围的逻辑
|
||||
};
|
||||
const items = ref([
|
||||
{
|
||||
{
|
||||
defaultImg: eqm1Default,
|
||||
activeImg: eqm1Active,
|
||||
isActive: true, // 默认选中
|
||||
type: '44', //
|
||||
type: "44", //
|
||||
},
|
||||
{
|
||||
defaultImg: eqm2Default,
|
||||
activeImg: eqm2Active,
|
||||
isActive: true,
|
||||
type: '22', // 视频监控
|
||||
type: "22", // 视频监控
|
||||
},
|
||||
{
|
||||
defaultImg: eqm3Default,
|
||||
activeImg: eqm3Active,
|
||||
isActive: true,
|
||||
type: '53', // 广播
|
||||
type: "53", // 广播
|
||||
},
|
||||
{
|
||||
defaultImg: eqm4Default,
|
||||
activeImg: eqm4Active,
|
||||
isActive: true,
|
||||
type: '15', // 情报板
|
||||
type: "15", // 情报板
|
||||
},
|
||||
]);
|
||||
|
||||
const toggleSelection = (index: number) => {
|
||||
items.value[index].isActive = !items.value[index].isActive;
|
||||
// 通知地图组件切换显示/隐藏
|
||||
window.dispatchEvent(new CustomEvent('toggle-map-device', {
|
||||
detail: { type: items.value[index].type, show: items.value[index].isActive }
|
||||
}));
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("toggle-map-device", {
|
||||
detail: {
|
||||
type: items.value[index].type,
|
||||
show: items.value[index].isActive,
|
||||
},
|
||||
})
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -370,28 +416,43 @@ const toggleSelection = (index: number) => {
|
|||
<div class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">小型车</span>
|
||||
<span class="percentage">{{ trafficData.car.percentage }}%</span>
|
||||
<span class="percentage" v-if="chartShow2"
|
||||
>{{ trafficData.car.percentage }}%</span
|
||||
>
|
||||
</div>
|
||||
<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 class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">货车</span>
|
||||
<span class="percentage">{{ trafficData.truck.percentage }}%</span>
|
||||
<span class="percentage"
|
||||
>{{ trafficData.truck.percentage }}%</span
|
||||
>
|
||||
</div>
|
||||
<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 class="vehicle-item">
|
||||
<div class="vehicle-info">
|
||||
<span class="vehicle-name">客车</span>
|
||||
<span class="percentage">{{ trafficData.bus.percentage }}%</span>
|
||||
<span class="percentage"
|
||||
>{{ trafficData.bus.percentage }}%</span
|
||||
>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -409,15 +470,26 @@ const toggleSelection = (index: number) => {
|
|||
<div class="traffic-flow-item">
|
||||
<div class="item-title">今日各监测点车流情况</div>
|
||||
<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 class="traffic-flow-item">
|
||||
<div class="item-title">
|
||||
交通流量趋势
|
||||
<div class="dropdown-container">
|
||||
<select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select">
|
||||
<option v-for="option in timeRangeOptions" :key="option.value" :value="option.value">
|
||||
<select
|
||||
v-model="selectedTimeRange"
|
||||
@change="handleTimeRangeChange"
|
||||
class="custom-select"
|
||||
>
|
||||
<option
|
||||
v-for="option in timeRangeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
|
@ -427,12 +499,20 @@ const toggleSelection = (index: number) => {
|
|||
<traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
|
||||
</div>
|
||||
<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)"
|
||||
:style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div>
|
||||
:style="{
|
||||
backgroundImage: `url(${
|
||||
item.isActive ? item.activeImg : item.defaultImg
|
||||
})`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -544,16 +624,16 @@ const toggleSelection = (index: number) => {
|
|||
&.car {
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
background: rgba(253, 187, 103, 0.1);
|
||||
color: #FDBB67;
|
||||
color: #fdbb67;
|
||||
}
|
||||
|
||||
&.truck {
|
||||
color: #59A2FC;
|
||||
color: #59a2fc;
|
||||
background-color: rgba(0, 200, 255, 0.1);
|
||||
}
|
||||
|
||||
&.bus {
|
||||
color: #00FFFF;
|
||||
color: #00ffff;
|
||||
background-color: rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,23 @@
|
|||
<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 type { EChartsOption } from "echarts";
|
||||
|
||||
import { getPointTraffic } from "@/api/modules/index";
|
||||
// import { nextTick } from "process";
|
||||
// 定义数据点类型接口
|
||||
interface Point {
|
||||
name: string;
|
||||
weeklyAvg: number;
|
||||
dailyTotal: number;
|
||||
scope: string;
|
||||
totalTraffic: number;
|
||||
weekAvg: number;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array as () => Point[],
|
||||
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 },
|
||||
],
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const data = ref([]);
|
||||
// 图表容器引用
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
|
||||
|
|
@ -59,7 +54,7 @@ const chartOptions: EChartsOption = {
|
|||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: props.data.map((point: Point) => point.name),
|
||||
data: props.data.map((point: Point) => point.scope),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#1e3d6f",
|
||||
|
|
@ -86,7 +81,7 @@ const chartOptions: EChartsOption = {
|
|||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
max: 30000,
|
||||
// max: 30000,
|
||||
},
|
||||
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: "当日累计",
|
||||
|
|
@ -135,7 +130,7 @@ const chartOptions: EChartsOption = {
|
|||
],
|
||||
},
|
||||
},
|
||||
data: props.data.map((point: Point) => point.dailyTotal),
|
||||
data: props.data.map((point: Point) => point.totalTraffic),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,13 +3,19 @@ import { ref, onMounted, computed } from "vue";
|
|||
import EventStatus from "./EventStatus.vue";
|
||||
import EventTask from "./EventTask.vue";
|
||||
import RealTimeImage from "./RealTimeImage.vue";
|
||||
import { weatherForecast, weatherHourly, todayStatusCount, todayHourly, getDictData } from "@/api/modules/index";
|
||||
import { useTodayTime, } from "@/utils/packge";
|
||||
import {
|
||||
weatherForecast,
|
||||
weatherHourly,
|
||||
todayStatusCount,
|
||||
todayHourly,
|
||||
getDictData,
|
||||
} from "@/api/modules/index";
|
||||
import { useTodayTime } from "@/utils/packge";
|
||||
|
||||
const { todayTime, getTodayTime } = useTodayTime();
|
||||
// 模拟数据，实际项目中可能需要从API获取
|
||||
const pendingCount = ref<string>('');
|
||||
const processingCount = ref<string>('');
|
||||
const pendingCount = ref<string>("");
|
||||
const processingCount = ref<string>("");
|
||||
const serviceArea = ref<any[]>([]);
|
||||
const Hub = ref<any[]>([]);
|
||||
const Intercommunication = ref<any[]>([]);
|
||||
|
|
@ -30,38 +36,46 @@ const areaTypes = ref([
|
|||
|
||||
// 切换区域类型选中状态
|
||||
const toggleAreaType = (id: string) => {
|
||||
areaTypes.value.forEach((type) => {
|
||||
areaTypes.value.forEach((type) => {
|
||||
type.selected = type.id === id;
|
||||
});
|
||||
};
|
||||
onMounted(()=>{
|
||||
todayStatusCount({todayTime: todayTime.value}).then((res: any) => {
|
||||
if(res.code === 200){
|
||||
res.data.forEach((item: any) => {
|
||||
if(item.status == '0'){ //待处理
|
||||
pendingCount.value = item.count || 0
|
||||
} else if(item.status == '2'){ //处置中
|
||||
processingCount.value = item.count || 0
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
getDictData("hb_service_area").then((res: any) => { //服务区
|
||||
if (res.code === 200) {
|
||||
serviceArea.value = res.data || [];
|
||||
}
|
||||
});
|
||||
getDictData("hb_hub").then((res: any) => { //枢纽
|
||||
if (res.code === 200) {
|
||||
Hub.value = res.data || [];
|
||||
}
|
||||
});
|
||||
getDictData("hb_interchange").then((res: any) => { //互通
|
||||
if (res.code === 200) {
|
||||
Intercommunication.value = res.data || [];
|
||||
}
|
||||
});
|
||||
})
|
||||
onMounted(() => {
|
||||
todayStatusCount({ todayTime: todayTime.value }).then((res: any) => {
|
||||
// alert(".............");
|
||||
// alert(JSON.stringify(res.data));
|
||||
if (res.code === 200) {
|
||||
res.data.forEach((item: any) => {
|
||||
if (item.status == "0") {
|
||||
//待处理
|
||||
pendingCount.value = item.count || 0;
|
||||
// alert(pendingCount.value);
|
||||
} else if (item.status == "2") {
|
||||
//处置中
|
||||
processingCount.value = item.count || 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
getDictData("hb_service_area").then((res: any) => {
|
||||
//服务区
|
||||
if (res.code === 200) {
|
||||
serviceArea.value = res.data || [];
|
||||
}
|
||||
});
|
||||
getDictData("hb_hub").then((res: any) => {
|
||||
//枢纽
|
||||
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 selectedType = areaTypes.value.find((type) => type.selected);
|
||||
if (selectedType?.id === "service") {
|
||||
|
|
|
|||
|
|
@ -8,35 +8,34 @@
|
|||
*/
|
||||
|
||||
/// <reference types="vite/client" />
|
||||
import type { UserConfig, ConfigEnv } from 'vite';
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import type { UserConfig, ConfigEnv } from "vite";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import AutoImport from "unplugin-auto-import/vite";
|
||||
import Components from "unplugin-vue-components/vite";
|
||||
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
|
||||
//https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md
|
||||
import ElementPlus from 'unplugin-element-plus/vite'
|
||||
import {createHtmlPlugin} from 'vite-plugin-html';
|
||||
import ElementPlus from "unplugin-element-plus/vite";
|
||||
import { createHtmlPlugin } from "vite-plugin-html";
|
||||
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
|
||||
|
||||
const viteEnv = loadEnv(mode, process.cwd());
|
||||
|
||||
return {
|
||||
base: '/',
|
||||
base: "/",
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({ resolvers: [ElementPlusResolver()] }),
|
||||
Components({ resolvers: [ElementPlusResolver()] }),
|
||||
ElementPlus(),
|
||||
createHtmlPlugin({
|
||||
inject: {
|
||||
data: {
|
||||
injectMapScript: `<script src="./public/static/map_load.js"></script>`,
|
||||
},
|
||||
},
|
||||
minify: true,
|
||||
}),
|
||||
inject: {
|
||||
data: {
|
||||
injectMapScript: `<script src="./public/static/map_load.js"></script>`,
|
||||
},
|
||||
},
|
||||
minify: true,
|
||||
}),
|
||||
// Compression({
|
||||
// algorithm: 'gzip',
|
||||
// test: /\.(js|css|html|json|svg|jpe?g|png|gif)$/i,
|
||||
|
|
@ -47,32 +46,37 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
|
|||
],
|
||||
publicDir: "public",
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
assetsDir: 'static'
|
||||
outDir: "dist",
|
||||
assetsDir: "static",
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
host: "0.0.0.0",
|
||||
port: 8080,
|
||||
open: true,
|
||||
strictPort: false,
|
||||
proxy: {
|
||||
[viteEnv.VITE_APP_CONTROL_BASE_API]: {
|
||||
target: 'http://172.16.1.133:8081/xjIotApi',
|
||||
target: "http://172.16.1.128:8090/xjIotApi",
|
||||
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]: {
|
||||
target: 'http://172.16.1.133:8081/iotApi',
|
||||
target: "http://172.16.1.128:8090/iotApi",
|
||||
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: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src"),
|
||||
"components": resolve(__dirname, "./src/components"),
|
||||
"api": resolve(__dirname, "./src/api")
|
||||
components: resolve(__dirname, "./src/components"),
|
||||
api: resolve(__dirname, "./src/api"),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
|
|
@ -81,6 +85,6 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
|
|||
additionalData: `@use "./src/assets/css/variable.scss" as *;`,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue