Commit 2e7c4ddf authored by lei's avatar lei

add:统计大屏

parent b196e095
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
"echarts": "5.4.0", "echarts": "5.4.0",
"element-ui": "2.15.14", "element-ui": "2.15.14",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"flv.js": "^1.6.2",
"fuse.js": "6.4.3", "fuse.js": "6.4.3",
"highcharts": "^9.2.2", "highcharts": "^9.2.2",
"highlight.js": "9.18.5", "highlight.js": "9.18.5",
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<div class="top-change"> <div class="top-change">
<span @click="changeMenu(0)">首页</span> <span @click="changeMenu(0)">首页</span>
<span @click="openVideo">企业宣传</span> <span @click="openVideo">企业宣传</span>
<span @click="sysAnalysis">系统分析</span> <span @click="changeMenu(7)">系统分析</span>
<span @click="goToSys">后台管理</span> <span @click="goToSys">后台管理</span>
</div> </div>
</div> </div>
...@@ -124,6 +124,7 @@ import home from "./items/home.vue"; ...@@ -124,6 +124,7 @@ import home from "./items/home.vue";
import dlxt from "./items/dlxt.vue"; import dlxt from "./items/dlxt.vue";
import tfxt from "./items/tfxt.vue"; import tfxt from "./items/tfxt.vue";
import tsj from "./items/tsj.vue"; import tsj from "./items/tsj.vue";
import tjfx from "./items/tjfx.vue";
export default { export default {
name: "cockpit", name: "cockpit",
components: { components: {
...@@ -134,6 +135,7 @@ export default { ...@@ -134,6 +135,7 @@ export default {
dlxt, dlxt,
tfxt, tfxt,
tsj, tsj,
tjfx,
}, },
data() { data() {
return { return {
...@@ -160,7 +162,6 @@ export default { ...@@ -160,7 +162,6 @@ export default {
changeMenu(val) { changeMenu(val) {
this.showMenu = val; this.showMenu = val;
}, },
sysAnalysis() {},
goToSys() { goToSys() {
var link = this.$router.resolve({ var link = this.$router.resolve({
path: "/", path: "/",
...@@ -189,6 +190,7 @@ export default { ...@@ -189,6 +190,7 @@ export default {
4: "tsj", 4: "tsj",
5: "tfxt", // 匹配通风系统组件 5: "tfxt", // 匹配通风系统组件
6: "dlxt", 6: "dlxt",
7: "tjfx",
}; };
return componentMap[this.showMenu]; return componentMap[this.showMenu];
}, },
......
This diff is collapsed.
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="" prop="deviceName"> <el-form-item label="" prop="deviceName">
<el-select v-model="queryParams.deviceName" placeholder="风机名称" clearable> <el-select
v-model="queryParams.deviceName"
placeholder="风机名称"
clearable
>
<el-option <el-option
v-for="dict in deviceName" v-for="dict in deviceName"
:key="dict.value" :key="dict.value"
...@@ -13,53 +23,143 @@ ...@@ -13,53 +23,143 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table
v-loading="loading"
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange"> :data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="风机名称" align="center" prop="deviceName" width="120"/> <el-table-column
<el-table-column label="风机编号" align="center" prop="deviceId" width="120"/> label="风机名称"
<el-table-column label="监测时间" align="center" prop="time" width="160" /> align="center"
<el-table-column label="电源电压预警值(V)" align="center" prop="powerSupplyVoltage" width="140" /> prop="deviceName"
<el-table-column label="电机电流预警值(A)" align="center" prop="motorCurrent" width="140" /> width="120"
<el-table-column label="运行频率预警值(HZ)" align="center" prop="operatingFrequency" width="140" /> />
<el-table-column label="设定频率预警值(HZ)" align="center" prop="setFrequency" width="140" /> <el-table-column
<el-table-column label="风压预警值(Kpa)" align="center" prop="windPressure" width="120" /> label="风机编号"
<el-table-column label="风速预警值(m/s)" align="center" prop="windSpeed" width="120" /> align="center"
<el-table-column label="风量预警值(m³/s)" align="center" prop="airVolume" width="140" /> prop="deviceId"
<el-table-column label="前轴温预警值(℃)" align="center" prop="frontAxisTemperature" width="120" /> width="120"
<el-table-column label="后轴温预警值(℃)" align="center" prop="rearAxisTemperature" width="120" /> />
<el-table-column label="电机温度预警值(℃)" align="center" prop="motorTemperature" width="140" /> <el-table-column
<el-table-column label="前振动预警值(mm/s)" align="center" prop="frontVibration" width="150" /> label="监测时间"
<el-table-column label="后振动预警值(mm/s)" align="center" prop="rearVibration" width="150"/> align="center"
prop="time"
width="160"
/>
<el-table-column
label="电压(V)"
align="center"
prop="powerSupplyVoltage"
width="140"
/>
<el-table-column
label="电机电流(A)"
align="center"
prop="motorCurrent"
width="140"
/>
<el-table-column
label="运行频率(HZ)"
align="center"
prop="operatingFrequency"
width="140"
/>
<el-table-column
label="设定频率(HZ)"
align="center"
prop="setFrequency"
width="140"
/>
<el-table-column
label="风压(Kpa)"
align="center"
prop="windPressure"
width="120"
/>
<el-table-column
label="风速(m/s)"
align="center"
prop="windSpeed"
width="120"
/>
<el-table-column
label="风量(m³/s)"
align="center"
prop="airVolume"
width="140"
/>
<el-table-column
label="前轴温(℃)"
align="center"
prop="frontAxisTemperature"
width="120"
/>
<el-table-column
label="后轴温(℃)"
align="center"
prop="rearAxisTemperature"
width="120"
/>
<el-table-column
label="电机温度(℃)"
align="center"
prop="motorTemperature"
width="140"
/>
<el-table-column
label="前振动(mm/s)"
align="center"
prop="frontVibration"
width="150"
/>
<el-table-column
label="后振动(mm/s)"
align="center"
prop="rearVibration"
width="150"
/>
</el-table> </el-table>
<pagination <pagination
v-show="total>0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</div> </div>
</template> </template>
<script> <script>
import { listFanHis } from "@/api/tyler/fan"; import { listFanHis } from "@/api/tyler/fan";
import { fanDeviceName } from "@/api/tyler/common"; import { fanDeviceName } from "@/api/tyler/common";
export default { export default {
name: "Info", name: "Info",
data() { data() {
return { return {
...@@ -89,41 +189,40 @@ ...@@ -89,41 +189,40 @@
pageSize: 10, pageSize: 10,
deviceName: null, deviceName: null,
deviceId: null, deviceId: null,
}, },
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
id: [ id: [{ required: true, message: "id不能为空", trigger: "blur" }],
{ required: true, message: "id不能为空", trigger: "blur" }
],
deviceName: [ deviceName: [
{ required: true, message: "风机名称不能为空", trigger: "blur" } { required: true, message: "风机名称不能为空", trigger: "blur" },
], ],
deviceId: [ deviceId: [
{ required: true, message: "风机编号不能为空", trigger: "blur" } { required: true, message: "风机编号不能为空", trigger: "blur" },
], ],
}, },
deviceName:[], deviceName: [],
dateRange:[], dateRange: [],
}; };
}, },
created() { created() {
fanDeviceName().then(res=>{ fanDeviceName().then((res) => {
this.deviceName = res.data; this.deviceName = res.data;
}) });
this.getList(); this.getList();
}, },
methods: { methods: {
/** 查询风机基本信息列表 */ /** 查询风机基本信息列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listFanHis(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listFanHis(this.addDateRange(this.queryParams, this.dateRange)).then(
this.infoList = response.rows; (response) => {
this.total = response.total; this.infoList = response.rows;
this.loading = false; this.total = response.total;
}); this.loading = false;
}
);
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
...@@ -148,7 +247,7 @@ ...@@ -148,7 +247,7 @@
rearAxisTemperature: null, rearAxisTemperature: null,
motorTemperature: null, motorTemperature: null,
frontVibration: null, frontVibration: null,
rearVibration: null rearVibration: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
...@@ -159,13 +258,10 @@ ...@@ -159,13 +258,10 @@
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = [] this.dateRange = [];
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
},
}
}; };
</script> </script>
...@@ -71,73 +71,73 @@ ...@@ -71,73 +71,73 @@
width="160" width="160"
/> />
<el-table-column <el-table-column
label="电源电压预警值(V)" label="电(V)"
align="center" align="center"
prop="powerSupplyVoltage" prop="powerSupplyVoltage"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="电机电流预警值(A)" label="电机电流(A)"
align="center" align="center"
prop="motorCurrent" prop="motorCurrent"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="运行频率预警值(HZ)" label="运行频率(HZ)"
align="center" align="center"
prop="operatingFrequency" prop="operatingFrequency"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="设定频率预警值(HZ)" label="设定频率(HZ)"
align="center" align="center"
prop="setFrequency" prop="setFrequency"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="风压预警值(Kpa)" label="风压(Kpa)"
align="center" align="center"
prop="windPressure" prop="windPressure"
width="120" width="120"
/> />
<el-table-column <el-table-column
label="风速预警值(m/s)" label="风速(m/s)"
align="center" align="center"
prop="windSpeed" prop="windSpeed"
width="120" width="120"
/> />
<el-table-column <el-table-column
label="风量预警值(m³/s)" label="风量(m³/s)"
align="center" align="center"
prop="airVolume" prop="airVolume"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="前轴温预警值(℃)" label="前轴温(℃)"
align="center" align="center"
prop="frontAxisTemperature" prop="frontAxisTemperature"
width="120" width="120"
/> />
<el-table-column <el-table-column
label="后轴温预警值(℃)" label="后轴温(℃)"
align="center" align="center"
prop="rearAxisTemperature" prop="rearAxisTemperature"
width="120" width="120"
/> />
<el-table-column <el-table-column
label="电机温度预警值(℃)" label="电机温度(℃)"
align="center" align="center"
prop="motorTemperature" prop="motorTemperature"
width="140" width="140"
/> />
<el-table-column <el-table-column
label="前振动预警值(mm/s)" label="前振动(mm/s)"
align="center" align="center"
prop="frontVibration" prop="frontVibration"
width="150" width="150"
/> />
<el-table-column <el-table-column
label="后振动预警值(mm/s)" label="后振动(mm/s)"
align="center" align="center"
prop="rearVibration" prop="rearVibration"
width="150" width="150"
......
...@@ -2,12 +2,11 @@ ...@@ -2,12 +2,11 @@
<div class="app-container"> <div class="app-container">
<div v-if="videoData"> <div v-if="videoData">
<video width="500" controls autoplay name="media"> <video width="500" controls autoplay name="media">
<source :src="videoData" type="video/mp4"> <source :src="videoData" type="video/mp4" />
</video> </video>
</div> </div>
<div v-else>
加载中... <div v-else>加载中...</div>
</div>
<div class="upv"> <div class="upv">
<el-upload <el-upload
ref="upload" ref="upload"
...@@ -28,9 +27,7 @@ ...@@ -28,9 +27,7 @@
选择视频 选择视频
<i class="el-icon-upload el-icon--right"></i> <i class="el-icon-upload el-icon--right"></i>
</el-button> </el-button>
<div slot="tip" class="el-upload__tip"> <div slot="tip" class="el-upload__tip">只能上传.mp4文件</div>
只能上传.mp4文件
</div>
</el-upload> </el-upload>
<!-- <el-upload <!-- <el-upload
ref="upload" ref="upload"
...@@ -56,13 +53,25 @@ ...@@ -56,13 +53,25 @@
</div> </div>
</el-upload> --> </el-upload> -->
</div> </div>
<el-button @click="show = true">测试视频流</el-button>
<video
width="500"
v-show="show"
id="videoPlayer"
ref="videoPlayer"
muted
controls
autoplay
preload="auto"
></video>
</div> </div>
</template> </template>
<script> <script>
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { listVideo, addVideo } from "@/api/tyler/mainVideo"; import { listVideo, addVideo } from "@/api/tyler/mainVideo";
import flvjs from "flv.js";
export default { export default {
name:"mainVideo", name: "mainVideo",
data() { data() {
return { return {
previewUrl: process.env.VUE_APP_API_TARGET, previewUrl: process.env.VUE_APP_API_TARGET,
...@@ -74,26 +83,44 @@ export default { ...@@ -74,26 +83,44 @@ export default {
baseURL: process.env.VUE_APP_API_TARGET, baseURL: process.env.VUE_APP_API_TARGET,
// 表单参数 // 表单参数
form: { form: {
id:null, id: null,
name:null, name: null,
videoPath:null videoPath: null,
}, },
videoData:null, videoData: null,
fileSize:1024, fileSize: 1024,
} show: false,
};
}, },
created() { created() {
this.getList() this.getList();
},
mounted() {
this.$nextTick(() => {
this.videoPlayer();
});
}, },
methods: { methods: {
getList(){ videoPlayer() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById("videoPlayer");
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: "http://192.168.10.150:8257/mls/openUrl/G4XK8zC/live.flv?params=eyJpbmRleENvZGUiOiI1ZTI2ZTRkMWQyZWI0N2Y1OTIxMDQ4ZDIzNTJlY2E3YyIsInVzZXJJZCI6ImFwaSJ9", //你的url地址
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
},
getList() {
this.videoData = null; this.videoData = null;
listVideo().then(res => { listVideo().then((res) => {
this.videoData = this.previewUrl + res.data; this.videoData = this.previewUrl + res.data;
this.$nextTick(() => { this.$nextTick(() => {
this.$forceUpdate(); this.$forceUpdate();
}); });
}) });
}, },
//上传图片 //上传图片
// 上传前校检格式和大小 // 上传前校检格式和大小
...@@ -115,15 +142,15 @@ export default { ...@@ -115,15 +142,15 @@ export default {
if (response.code === 200) { if (response.code === 200) {
if (type === "pic") { if (type === "pic") {
that.form.image = response.fileName; that.form.image = response.fileName;
addVideo(that.form).then(res => { addVideo(that.form).then((res) => {
this.$modal.msgSuccess("成功"); this.$modal.msgSuccess("成功");
this.getList(); this.getList();
}) });
} }
if (type === "video") { if (type === "video") {
this.$modal.msgSuccess("成功"); this.$modal.msgSuccess("成功");
this.getList(); this.getList();
// that.form.videoPath = response.fileName; // that.form.videoPath = response.fileName;
// that.form.name = response.newFileName; // that.form.name = response.newFileName;
// addVideo(that.form).then(res => { // addVideo(that.form).then(res => {
...@@ -157,13 +184,12 @@ export default { ...@@ -157,13 +184,12 @@ export default {
let that = this; let that = this;
this.moveElementToStart(that.form.websiteMiningImage, index); this.moveElementToStart(that.form.websiteMiningImage, index);
}, },
}, },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.upv{ .upv {
display: flex; display: flex;
gap: 20px; gap: 20px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment