Skip to content

Y
yindong-tongbai-automation
Commit 2e7c4ddf authored by lei's avatar lei
Browse files
Options

add:统计大屏

parent b196e095
Hide whitespace changes
Inline Side-by-side
Showing with 786 additions and 92 deletions
package.json
View file @ 2e7c4ddf
...@@ -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",
......
src/views/Screen/index.vue
View file @ 2e7c4ddf
...@@ -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];
}, },
......
src/views/Screen/items/tjfx.vue 0 → 100644
View file @ 2e7c4ddf
<template>
<div class="main-content">
<div class="jgg-container">
<!-- 当日井下巡检情况 -->
<div class="jgg-item">
<div class="jgg-item-title">当日井下巡检情况</div>
<div class="jgg-item-content daily-inspection">
<div class="daily-inspection-item">
<span class="daily-inspection-item-icon"></span>
<span class="daily-inspection-item-content">巡检数量</span>
<span class="daily-inspection-item-number">20</span>
</div>
<div class="daily-inspection-item">
<span class="daily-inspection-item-icon icon2"></span>
<span class="daily-inspection-item-content">故障数量</span>
<span class="daily-inspection-item-number">20</span>
</div>
<div class="daily-inspection-item">
<span class="daily-inspection-item-icon icon3"></span>
<span class="daily-inspection-item-content">未维修数量</span>
<span class="daily-inspection-item-number">20</span>
</div>
<div class="daily-inspection-item">
<span class="daily-inspection-item-icon icon3"></span>
<span class="daily-inspection-item-content">已维修数量</span>
<span class="daily-inspection-item-number">20</span>
</div>
</div>
<div class="divider-line"></div>
</div>
<!-- 当月电力能耗情况 -->
<div class="jgg-item">
<div class="jgg-item-title">当月电力能耗情况</div>
<div class="jgg-item-content monthly-power-content">
<div id="monthlyPower" class="monthly-power-chart"></div>
<div class="monthly-power-legend">
<ul>
<li v-for="item in monthlyPowerData" :key="item.name">
<span
class="legend-color"
:style="{ backgroundColor: item.itemStyle.color }"
></span>
<span>{{ item.name }}</span>
<span class="" :style="{ color: item.itemStyle.color }"
>{{ item.value }}KWh</span
>
</li>
</ul>
</div>
</div>
</div>
<!-- 近30天提升次数变化趋势图 -->
<div class="jgg-item">
<div class="jgg-item-title">近30天提升次数变化趋势图</div>
<div class="jgg-item-content">
<div id="monthlyTisheng" style="height: 100%; width: 100%"></div>
</div>
</div>
<!-- 当月巡检情况分析 -->
<div class="jgg-item" v-for="item in 5" :key="item">
<div class="jgg-item-title">当月巡检情况分析</div>
<div class="jgg-item-content">
<div class="monthly-inspection">
<div class="monthly-inspection-top">
<div class="inspection-item">
<div class="inspection-item-content">
<div class="inspection-item-number">20</div>
<p class="inspection-item-title">巡检数量</p>
</div>
</div>
<div class="inspection-item">
<div class="inspection-item-content">
<div class="inspection-item-number bg2">50</div>
<p class="inspection-item-title co2">故障数量</p>
</div>
</div>
<div class="inspection-item">
<div class="inspection-item-content">
<div class="inspection-item-number bg3">156</div>
<p class="inspection-item-title co3">未维修数量</p>
</div>
</div>
</div>
<div class="monthly-inspection-bottom">
<div class="monthly-inspection-bottom-item">
<p> <i></i><span>报修率</span> <span>20%</span></p>
</div>
<div class="monthly-inspection-bottom-item">
<p> <i style="background: #F6890C;"></i><span>维修率</span> <span class="coyel">20%</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="divider-line"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "tjfx",
data() {
return {
tjfxList: [
{
title: "当日井下巡检情况",
},
{
title: "当月电力能耗情况",
},
{
title: "近30天提升次数变化趋势图",
},
{
title: "当月巡检情况分析",
},
{
title: "当年电力能耗数据分析",
},
{
title: "近7天各班次提升次数统计",
},
{
title: "近一年巡检次数分析",
},
{
title: "各部门月巡检排行榜",
},
{
title: "近一周设备维修信息",
},
],
monthlyPowerData: [
{ value: 5, name: "采区域能耗", itemStyle: { color: "#3BAFF2" } },
{ value: 5, name: "选厂能耗", itemStyle: { color: "#0EFCFF" } },
{ value: 5, name: "冶炼能耗", itemStyle: { color: "#0EFF96" } },
{ value: 5, name: "尾矿库能耗", itemStyle: { color: "#FFDA0B" } },
{ value: 5, name: "排水能耗", itemStyle: { color: "#FF720B" } },
{ value: 5, name: "通风能耗", itemStyle: { color: "#FF5E71" } },
],
monthlyTishengData: [
{ value: 5, name: "1/01" },
{ value: 0, name: "1/06" },
{ value: 5, name: "1/11" },
],
monthlyInspectionData: [],
};
},
created() {},
mounted() {
this.monthlyPowerChart();
this.monthlyTishengChart();
},
methods: {
//当月电力能耗情况chart
monthlyPowerChart() {
let myChart = echarts.init(document.getElementById("monthlyPower"));
let option = {
polar: {
radius: [30, "90%"],
},
angleAxis: {
max: 10,
startAngle: 90,
show: false, // 显示坐标轴
},
radiusAxis: {
type: "category",
data: this.monthlyPowerData.map((item) => item.name),
axisLine: {
show: false, // 显示径向轴
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: false, // 显示分类标签
color: "#fff",
},
},
series: [
// 数值条（实际颜色）
{
type: "bar",
coordinateSystem: "polar",
stack: "a",
data: this.monthlyPowerData.map((d) => d.value),
itemStyle: {
color: (params) =>
this.monthlyPowerData[params.dataIndex].itemStyle.color,
},
},
// 背景条（灰色填充）
{
type: "bar",
coordinateSystem: "polar",
stack: "a",
data: this.monthlyPowerData.map(() => 10), // 每个项总长度10
itemStyle: {
color: "RGBA(28, 57, 92, 0.3)",
},
},
],
};
myChart.setOption(option);
},
//近30天提升次数变化趋势
monthlyTishengChart() {
let myChart = echarts.init(document.getElementById("monthlyTisheng"));
let option = {
grid: {
left: "3%",
right: "5%",
bottom: "5%",
top: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
//显示日期和人数
formatter: function (params) {
let date = params[0].name; // 日期
let value = params[0].value; // 人数
return `${date}<br/>次数: ${value}`;
},
},
xAxis: {
type: "category",
data: this.monthlyTishengData.map((item) => item.name), // 假设日期是字符串类型
axisTick: {
show: false,
},
//隔5个显示
axisLabel: {
interval: 5,
color: "#fff",
fontSize: 12,
},
},
yAxis: {
type: "value",
//虚线，取整
splitLine: {
show: true,
lineStyle: {
color: "#fff",
type: "dashed",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
},
series: [
{
data: this.monthlyTishengData.map((item) => item.value), // 假设值是数字类型,
type: "line",
stack: "Total",
//线条颜色
itemStyle: {
color: "#37BBFF",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 184, 251,0.5)",
},
{
offset: 1,
color: "rgb(55, 184, 251,0.1)",
},
]),
},
emphasis: {
focus: "series",
},
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
},
beforeDestroy() {
if (this.viewer) {
this.viewer.destroy();
}
},
};
</script>
<style scoped lang="scss">
.main-content {
background: url("~@/assets/images/screen/bg12.png") no-repeat center;
padding-top: 110px;
pointer-events: auto;
position: relative;
.jgg-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;
column-gap: 40px;
width: 100%;
height: 100%;
padding: 50px;
.jgg-item {
border-radius: 4px;
color: #fff;
font-size: 24px;
position: relative;
// 确保每个网格项不会超出
min-height: 0; // 关键修复项
overflow: hidden; // 防止内容溢出
.jgg-item-title {
font-size: 22px;
background: url("~@/assets/images/screen/tjfx/title.png") no-repeat
center;
height: 40px;
padding-left: 25px;
background-position-y: 12px;
background-size: 100%;
font-weight: bold;
font-family: "fangsong";
}
.jgg-item-content {
background: url("~@/assets/images/screen/tjfx/bg.png") no-repeat center;
height: calc(100% - 40px);
width: 100%;
background-size: 100% 100%;
&.daily-inspection {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0px;
column-gap: 0px;
.daily-inspection-item {
display: flex;
justify-content: center;
align-items: center;
.daily-inspection-item-icon {
width: 55px;
height: 55px;
border-radius: 50%;
display: inline-block;
background: url("~@/assets/images/screen/tjfx/icon4.png")
no-repeat center;
background-size: 100%;
&.icon2 {
background: url("~@/assets/images/screen/tjfx/icon5.png")
no-repeat center;
background-size: 100%;
}
&.icon3 {
background: url("~@/assets/images/screen/tjfx/icon6.png")
no-repeat center;
background-size: 100%;
}
}
.daily-inspection-item-content {
font-size: 18px;
font-weight: 400;
font-size: 18px;
color: #64c2ff;
font-family: "fangsong";
margin: 0 10px;
}
.daily-inspection-item-number {
font-weight: 400;
font-size: 28px;
color: #ffffff;
background: linear-gradient(
0deg,
#3cbffa 0%,
#ffffff 56.005859375%,
#e2f6ff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.monthly-inspection {
display: grid;
grid-template-rows: 3fr 1fr; // 使用fr单位确保比例分配
height:100%; // 确保高度不超出父容器
overflow: hidden;
.monthly-inspection-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row: span 3; // 占据前4行
min-height: 0; // 添加这个属性防止内容撑开
overflow: hidden; // 防止内容溢出
.inspection-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.inspection-item-content {
text-align: center;
.inspection-item-number {
width: 112px;
height: 112px;
background: url("~@/assets/images/screen/tjfx/icon1.png")
no-repeat center;
line-height: 112px;
font-weight: 400;
font-size: 26px;
color: #ffffff;
&.bg2 {
background: url("~@/assets/images/screen/tjfx/icon2.png")
no-repeat center;
}
&.bg3 {
background: url("~@/assets/images/screen/tjfx/icon3.png")
no-repeat center;
}
}
.inspection-item-title {
font-weight: 400;
font-size: 17px;
color: #14c8f5;
&.co2 {
color: #ffd71f;
}
&.co3 {
color: #00f9d9;
}
}
}
}
}
.monthly-inspection-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row: span 1; // 占据最后1行
min-height: 0; // 添加这个属性防止内容撑开
padding-bottom: 20px;
overflow: hidden; // 防止内容溢出
.monthly-inspection-bottom-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p{
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 30px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
margin: 0px;
i{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #00F3E5;
margin-right: 8px;
}
span:nth-child(2){
font-size: 18px;
color: #fff;
}
span:nth-child(3){
font-size: 18px;
color: #00F3E5;
margin-left: 20px;
}
.coyel{
color:#F6890C !important;
}
}
}
}
}
}
.monthly-power-content {
display: flex;
align-items: center;
justify-content: center;
.monthly-power-chart {
width: 40%;
height: 80%;
}
.monthly-power-legend {
ul {
list-style-type: none; // 新增该属性去除默认点状样式
display: flex;
flex-direction: column;
gap: 10px; // 确保垂直间距生效
padding-left: 0; // 移除默认padding
margin: 0px;
li {
width: 280px;
height: 28px;
background: #173253;
border-radius: 14px;
padding-left: 30px;
line-height: 28px;
font-size: 22px;
font-family: "fangsong";
.legend-color {
display: inline-block;
width: 15px;
height: 8px;
margin-right: 25px;
margin-bottom: 2px;
}
span:nth-child(2) {
// 选择第二个span
color: #fff; // 示例样式
display: inline-block;
width: 110px;
margin-right: 22px;
}
}
}
}
}
.divider-line {
position: absolute;
left: 50%;
top: 55%;
transform: translateY(-50%);
height: 130px;
width: 1px;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 4px,
rgba(255, 255, 255, 0.5) 5px,
rgba(255, 255, 255, 0.5) 10px
);
}
}
}
}
// 新增强制穿透样式
::v-deep .cesium-widget canvas {
pointer-events: auto !important;
position: relative;
z-index: 0;
}
// 移除Cesium默认事件拦截
::v-deep .cesium-widget-credits {
display: none !important;
}
</style>
src/views/fanSys/fanHis/index.vue
View file @ 2e7c4ddf
<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>
src/views/fanSys/fanReal/index.vue
View file @ 2e7c4ddf
...@@ -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"
......
src/views/index.vue
View file @ 2e7c4ddf
...@@ -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