|
@@ -14,7 +14,7 @@
|
|
<div class="mockDiv custom-time-select">
|
|
<div class="mockDiv custom-time-select">
|
|
选择时间:
|
|
选择时间:
|
|
<el-date-picker
|
|
<el-date-picker
|
|
- class=" custom-time-input"
|
|
|
|
|
|
+ class="custom-time-input"
|
|
v-model="queryParamsMock.sDate"
|
|
v-model="queryParamsMock.sDate"
|
|
style="width: 140px"
|
|
style="width: 140px"
|
|
type="datetime"
|
|
type="datetime"
|
|
@@ -33,17 +33,17 @@
|
|
style="width: 80px"
|
|
style="width: 80px"
|
|
max="60"
|
|
max="60"
|
|
min="1"
|
|
min="1"
|
|
- class="no-arrows"
|
|
|
|
|
|
+ class="no-arrows"
|
|
placeholder=""
|
|
placeholder=""
|
|
- type="number"
|
|
|
|
|
|
+ type="number"
|
|
v-model="queryParamsMock.time"
|
|
v-model="queryParamsMock.time"
|
|
></el-input
|
|
></el-input
|
|
> 秒显示 <el-input
|
|
> 秒显示 <el-input
|
|
style="width: 80px"
|
|
style="width: 80px"
|
|
- type="number"
|
|
|
|
- max="60"
|
|
|
|
|
|
+ type="number"
|
|
|
|
+ max="60"
|
|
min="1"
|
|
min="1"
|
|
- class="no-arrows"
|
|
|
|
|
|
+ class="no-arrows"
|
|
v-model="queryParamsMock.count"
|
|
v-model="queryParamsMock.count"
|
|
></el-input
|
|
></el-input
|
|
> 分钟数据 
|
|
> 分钟数据 
|
|
@@ -242,16 +242,24 @@
|
|
<!-- {{ chartData }} -->
|
|
<!-- {{ chartData }} -->
|
|
<div class="his-time custom-time-select custom-time-input">
|
|
<div class="his-time custom-time-select custom-time-input">
|
|
<div class="tools">
|
|
<div class="tools">
|
|
- <div class="arrow-button arrow-button-left"></div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="arrow-button arrow-button-left"
|
|
|
|
+ @click="prevWeek"
|
|
|
|
+ ></div>
|
|
<el-date-picker
|
|
<el-date-picker
|
|
|
|
+ :disabled="true"
|
|
v-model="hlQueryParams.eDate"
|
|
v-model="hlQueryParams.eDate"
|
|
type="daterange"
|
|
type="daterange"
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
range-separator="-"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
>
|
|
>
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
- <div class="arrow-button arrow-button-right"></div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="arrow-button arrow-button-right"
|
|
|
|
+ @click="nextWeek"
|
|
|
|
+ ></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="his-select">下拉</div> -->
|
|
<!-- <div class="his-select">下拉</div> -->
|
|
<el-select
|
|
<el-select
|
|
@@ -274,7 +282,7 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="timeEcharts">
|
|
<div class="timeEcharts">
|
|
- <CalendarHeatmap :data="chartData" />
|
|
|
|
|
|
+ <CalendarHeatmap :data="chartData" @showDetails="handleShowDetails" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-bottom">
|
|
<div class="right-bottom">
|
|
@@ -473,6 +481,54 @@
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</ModalComponent>
|
|
</ModalComponent>
|
|
|
|
+ <!-- 工况详情 -->
|
|
|
|
+ <ModalComponent
|
|
|
|
+ v-model:visible="showCondModal"
|
|
|
|
+ customClass="custom-modal"
|
|
|
|
+ title="工况详情"
|
|
|
|
+ type="warn"
|
|
|
|
+ >
|
|
|
|
+ <!-- 模态框内容插槽 -->
|
|
|
|
+ <div class="custom-warn-box">
|
|
|
|
+ <el-table
|
|
|
|
+ border
|
|
|
|
+ max-height="300"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ :data="tableData"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ align="center"
|
|
|
|
+ class="custom-table"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="name"
|
|
|
|
+ label="时间"
|
|
|
|
+ sortable
|
|
|
|
+ align="center"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="createTime"
|
|
|
|
+ label="工况名称"
|
|
|
|
+ align="center"
|
|
|
|
+
|
|
|
|
+ width="240"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="remark"
|
|
|
|
+ label="状态"
|
|
|
|
+ align="center"
|
|
|
|
+ >
|
|
|
|
+ <template v-slot="scope">
|
|
|
|
+ <div :class="['scope.row.sts'+enumParasm[scope.row.sts].color]"
|
|
|
|
+ >{{scope.row.sts}}</div
|
|
|
|
+ >
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </ModalComponent>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
@@ -506,7 +562,8 @@ import {
|
|
measurementPoints,
|
|
measurementPoints,
|
|
devicesAndCategories,
|
|
devicesAndCategories,
|
|
updateDataRangeSpeed,
|
|
updateDataRangeSpeed,
|
|
- mockCacheData
|
|
|
|
|
|
+ mockCacheData,
|
|
|
|
+ setConditionTime
|
|
} from "@/api/index";
|
|
} from "@/api/index";
|
|
const wsMockUrl = import.meta.env.VITE_WS_MOCK_URL as string;
|
|
const wsMockUrl = import.meta.env.VITE_WS_MOCK_URL as string;
|
|
const wsMockClient = new WebSocketClient(wsMockUrl);
|
|
const wsMockClient = new WebSocketClient(wsMockUrl);
|
|
@@ -520,7 +577,7 @@ watch(
|
|
() => queryParamsMock.value.sDate,
|
|
() => queryParamsMock.value.sDate,
|
|
(newSDate) => {
|
|
(newSDate) => {
|
|
if (newSDate) {
|
|
if (newSDate) {
|
|
- queryParamsMock.value.eDate = moment(newSDate).add(1, 'hour').toDate();
|
|
|
|
|
|
+ queryParamsMock.value.eDate = moment(newSDate).add(1, "hour").toDate();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
);
|
|
@@ -551,15 +608,14 @@ onMounted(() => {
|
|
checkedParams.value = Object.values(COLUMN_MAP).slice(0, 5);
|
|
checkedParams.value = Object.values(COLUMN_MAP).slice(0, 5);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- mockCacheData({}).then((res:any)=>{
|
|
|
|
- lineParamsAllRef.value=res.data.map((its)=>{
|
|
|
|
- return {
|
|
|
|
-data:its
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- // debugger
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
|
|
+ mockCacheData({}).then((res: any) => {
|
|
|
|
+ lineParamsAllRef.value = res.data.map((its) => {
|
|
|
|
+ return {
|
|
|
|
+ data: its,
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ // debugger
|
|
|
|
+ });
|
|
// 处理接收到的消息
|
|
// 处理接收到的消息
|
|
wsMockClient.onMessage = (data: string) => {
|
|
wsMockClient.onMessage = (data: string) => {
|
|
try {
|
|
try {
|
|
@@ -593,8 +649,74 @@ data:its
|
|
}
|
|
}
|
|
};
|
|
};
|
|
});
|
|
});
|
|
|
|
+const handleDateRangeChange = (dates) => {
|
|
|
|
+ let { start, end } = dates;
|
|
|
|
+ start = moment(start).format('YYYY-MM-DD');
|
|
|
|
+ end = moment(end).format('YYYY-MM-DD');
|
|
|
|
+ const duration = moment(end).diff(moment(start), 'days');
|
|
|
|
+ if (duration <= 7) {
|
|
|
|
+ // hlQueryParams.value.eDate = [start, end];
|
|
|
|
+ setParamsHl(start, end);
|
|
|
|
+ } else {
|
|
|
|
+ const startOfWeek = moment(start).format('YYYY-MM-DD');
|
|
|
|
+ const endOfWeek = moment(start).endOf('isoWeek').format('YYYY-MM-DD');
|
|
|
|
+ // hlQueryParams.value.eDate = [startOfWeek, endOfWeek];
|
|
|
|
+ setParamsHl(startOfWeek, endOfWeek);
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const prevWeek = () => {
|
|
|
|
+ const duration = moment(queryParamsMock.value.eDate).diff(moment(queryParamsMock.value.sDate), 'days');
|
|
|
|
+ if (duration <= 7) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const start = moment(hlQueryParams.value.eDate[0]).subtract(1, "week").startOf("isoWeek");
|
|
|
|
+ const end = moment(hlQueryParams.value.eDate[0]).subtract(1, "week").endOf("isoWeek");
|
|
|
|
+
|
|
|
|
+ if (start.isBefore(moment(queryParamsMock.value.sDate))) {
|
|
|
|
+ setParamsHl(moment(queryParamsMock.value.sDate), moment(queryParamsMock.value.sDate).endOf("isoWeek"));
|
|
|
|
+ } else {
|
|
|
|
+ setParamsHl(start, end);
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const nextWeek = () => {
|
|
|
|
+ const duration = moment(queryParamsMock.value.eDate).diff(moment(queryParamsMock.value.sDate), 'days');
|
|
|
|
+ if (duration <= 7) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const start = moment(hlQueryParams.value.eDate[1]).add(1, "week").startOf("isoWeek");
|
|
|
|
+ const end = moment(hlQueryParams.value.eDate[1]).add(1, "week").endOf("isoWeek");
|
|
|
|
|
|
|
|
+ if (end.isAfter(moment(queryParamsMock.value.eDate))) {
|
|
|
|
+ setParamsHl(moment(queryParamsMock.value.eDate).startOf("isoWeek"), moment(queryParamsMock.value.eDate));
|
|
|
|
+ } else {
|
|
|
|
+ setParamsHl(start, end);
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+const setParamsHl = (start: string, end: string) => {
|
|
|
|
+ hlQueryParams.value.eDate = [
|
|
|
|
+ moment(start).format("YYYY-MM-DD"),
|
|
|
|
+ moment(end).format("YYYY-MM-DD"),
|
|
|
|
+ ];
|
|
|
|
+ setConditionTime({"min_time":hlQueryParams.value.eDate[0],"max_time":hlQueryParams.value.eDate[1]})
|
|
|
|
+};
|
|
const mockStart = () => {
|
|
const mockStart = () => {
|
|
|
|
+ if (queryParamsMock.value.time > 60) {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: `最大不超过60s`,
|
|
|
|
+ type: "error",
|
|
|
|
+ });
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (!!!queryParamsMock.value.sDate) {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: `请选择开始时间`,
|
|
|
|
+ type: "error",
|
|
|
|
+ });
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
lineParamsAllRef.value = [];
|
|
lineParamsAllRef.value = [];
|
|
seriesData.value = [
|
|
seriesData.value = [
|
|
{
|
|
{
|
|
@@ -606,28 +728,20 @@ const mockStart = () => {
|
|
wsMockClient.connect();
|
|
wsMockClient.connect();
|
|
// 向服务器发送消息
|
|
// 向服务器发送消息
|
|
wsMockClient.send("你好!");
|
|
wsMockClient.send("你好!");
|
|
- if (queryParamsMock.value.time>60) {
|
|
|
|
- ElMessage({
|
|
|
|
- message: `最大不超过60s`,
|
|
|
|
- type: "error",
|
|
|
|
- });
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
- if (!!!queryParamsMock.value.sDate) {
|
|
|
|
- ElMessage({
|
|
|
|
- message: `请选择开始时间`,
|
|
|
|
- type: "error",
|
|
|
|
- });
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ handleDateRangeChange({
|
|
|
|
+ start: queryParamsMock.value.sDate,
|
|
|
|
+ end: queryParamsMock.value.eDate,
|
|
|
|
+ });
|
|
updateDataRangeSpeed({
|
|
updateDataRangeSpeed({
|
|
- start_time: moment(queryParamsMock.value.sDate).format("YYYY-MM-DD HH:mm:ss"),
|
|
|
|
|
|
+ start_time: moment(queryParamsMock.value.sDate).format(
|
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
|
+ ),
|
|
end_time: moment(queryParamsMock.value.eDate).format("YYYY-MM-DD HH:mm:ss"),
|
|
end_time: moment(queryParamsMock.value.eDate).format("YYYY-MM-DD HH:mm:ss"),
|
|
interval: queryParamsMock.value.time,
|
|
interval: queryParamsMock.value.time,
|
|
batch_size: Number(queryParamsMock.value.count),
|
|
batch_size: Number(queryParamsMock.value.count),
|
|
}).then((res: any) => {
|
|
}).then((res: any) => {
|
|
- ElMessage({
|
|
|
|
|
|
+ ElMessage({
|
|
message: `设置成功!`,
|
|
message: `设置成功!`,
|
|
type: "success",
|
|
type: "success",
|
|
});
|
|
});
|
|
@@ -846,8 +960,8 @@ const convertToChartData = (
|
|
data: selectedData.map((item) => item.data[inverParams[propertyName]]),
|
|
data: selectedData.map((item) => item.data[inverParams[propertyName]]),
|
|
// data: selectedData.map((item) => {
|
|
// data: selectedData.map((item) => {
|
|
// const key = inverParams[propertyName];
|
|
// const key = inverParams[propertyName];
|
|
- // return key && item.data ? item.data[key] : null;
|
|
|
|
- // }),
|
|
|
|
|
|
+ // return key && item.data ? item.data[key] : null;
|
|
|
|
+ // }),
|
|
}));
|
|
}));
|
|
};
|
|
};
|
|
const formatPressure = (value: number | string) => {
|
|
const formatPressure = (value: number | string) => {
|
|
@@ -913,6 +1027,13 @@ const generatePastWeekData = (
|
|
// 首先设置存储sockets接活来的所有数据
|
|
// 首先设置存储sockets接活来的所有数据
|
|
// 获取所有显示参数
|
|
// 获取所有显示参数
|
|
let workParamsAllRef: Ref<DataPoint[]> = ref([]);
|
|
let workParamsAllRef: Ref<DataPoint[]> = ref([]);
|
|
|
|
+
|
|
|
|
+const tableData=ref([])
|
|
|
|
+const showCondModal=ref(false)
|
|
|
|
+const handleShowDetails=(data:any)=>{
|
|
|
|
+ showCondModal.value=true
|
|
|
|
+ tableData.value=data
|
|
|
|
+}
|
|
// 历史工况记录 chartData 实际图表展示的
|
|
// 历史工况记录 chartData 实际图表展示的
|
|
const chartData: Ref<DataPoint[]> = ref(
|
|
const chartData: Ref<DataPoint[]> = ref(
|
|
[]
|
|
[]
|
|
@@ -1156,7 +1277,7 @@ const healthColor = (status: string) => {
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="css">
|
|
<style lang="css">
|
|
- .no-arrows::-webkit-outer-spin-button,
|
|
|
|
|
|
+.no-arrows::-webkit-outer-spin-button,
|
|
.no-arrows::-webkit-inner-spin-button {
|
|
.no-arrows::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
margin: 0;
|