报表页面

ds1.0
fanluyan 2 years ago
parent 25021908ba
commit 3bf26caa2d

@ -11,6 +11,7 @@ export default {
return {};
},
mounted() {},
methods: {},
created() {
//new DevicePixelRatio().init();
},

@ -106,6 +106,10 @@ export default {
index: "/devicePhotoSchedule",
title: "拍照时间表设置",
},
{
index: "/deviceReport",
title: "装置报表",
},
// {
// index: "/deviceUpgrade",
// title: "",

@ -112,6 +112,14 @@ const routes = [
),
meta: { title: "拍照时间表设置", icon: "el-icon-setting" },
},
{
path: "/deviceReport",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/deviceReport/index.vue"
),
meta: { title: "装置报表", icon: "el-icon-setting" },
},
{
path: "/imageSettings",

@ -1,154 +0,0 @@
<template>
<div class="simCardcontain">
<div class="simBtnGroup">
<el-button type="primary">新增</el-button>
<el-button type="primary">修改</el-button>
<el-button type="primary">删除</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">质保延期</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导入模板下载</el-button>
<el-button type="primary">导出</el-button>
</div>
<div class="searchForm">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="单位:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="网络类型:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="是否已使用">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div>
<div class="simTable">
<el-table
ref="multipleTable"
:data="tableData"
stripe
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="单位">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="电话号码"> </el-table-column>
<el-table-column prop="address" label="网络类型" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="name" label="质保到期日"> </el-table-column>
<el-table-column prop="name" label="流量包(M)"> </el-table-column>
<el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
<el-table-column prop="name" label="状态"> </el-table-column>
<el-table-column prop="name" label="是否已使用"> </el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
user: "",
region: "",
},
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
multipleSelection: [],
};
},
methods: {
onSubmit() {
console.log("submit!");
},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
},
};
</script>
<style lang="less">
.simCardcontain {
width: 100%;
height: 100%;
background: @color-white;
.simBtnGroup {
padding: 16px 8px;
}
.searchForm {
padding: 0px 8px;
.el-form {
.el-form-item {
margin-bottom: 0px;
}
}
}
.simTable {
padding: 16px 8px 0 8px;
}
}
</style>

@ -0,0 +1,599 @@
<template>
<div class="deviceReport">
<div class="reportBox">
<div class="photoGraphicBtnGroup">
<h4>装置报表</h4>
<div></div>
</div>
<div class="searchBox">
<el-form :inline="true" :model="formdata" class="demo-form-inline">
<div class="selectForm">
<el-form-item label="电压等级" class="dybox">
<el-select v-model="formdata.dyId" @change="getSearchxl">
<el-option
v-for="item in dyOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="线路名称" class="xlbox">
<el-select
v-model="formdata.lineId"
@change="getSearchgt"
filterable
>
<el-option
v-for="item in xlOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="杆塔名称">
<el-select v-model="formdata.towerId" filterable>
<el-option
v-for="item in gtOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker
v-model="formdata.starttime"
type="datetime"
placeholder="开始日期"
value-format="timestamp"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="formdata.endtime"
type="datetime"
default-time="23:59:59"
placeholder="结束日期"
value-format="timestamp"
class="ml10"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-input
v-model="formdata.search"
placeholder="请输入线路/杆塔/设备编号"
clearable
></el-input>
</el-form-item>
</div>
<div class="btngrop">
<el-form-item>
<el-button type="primary" @click="onSubmit"></el-button>
<el-button type="primary" @click="onReset"></el-button>
<el-button
type="primary"
icon="el-icon-document"
@click="handleExport()"
>导出</el-button
>
</el-form-item>
</div>
</el-form>
</div>
<div class="photoGraphicTable">
<el-table
ref="multipleTable"
:data="terminalTableData"
stripe
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
v-loading="loading"
>
<template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty>
</template>
<el-table-column
prop="dyName"
label="电压等级"
min-width="120"
show-overflow-tooltip
fixed
>
</el-table-column>
<el-table-column
prop="lineName"
label="线路名称"
show-overflow-tooltip
min-width="120"
fixed
>
<template slot-scope="scope">
{{ scope.row.lineName }}
</template>
</el-table-column>
<el-table-column
prop="towerName"
label="杆塔名称"
show-overflow-tooltip
min-width="150"
fixed
>
<template slot-scope="scope">
{{ scope.row.towerName }}
</template>
</el-table-column>
<el-table-column
prop="equipName"
label="设备名称"
show-overflow-tooltip
min-width="150"
fixed
>
</el-table-column>
<el-table-column
prop="cmdId"
label="设备编号"
show-overflow-tooltip
min-width="150"
fixed
>
</el-table-column>
<el-table-column
prop="sim"
label="SIM卡号"
show-overflow-tooltip
min-width="170"
>
</el-table-column>
<el-table-column
prop="netType"
label="网络类型"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
<span v-if="scope.row.netType == 1"> </span>
<span v-if="scope.row.netType == 2"> </span>
<span v-if="scope.row.netType == 3"> </span>
</template>
</el-table-column>
<el-table-column
prop="isonline"
label="状态"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
{{ scope.row.isonline ? "在线" : "离线" }}</template
>
</el-table-column>
<el-table-column
prop="model"
label="装置型号"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<el-table-column
prop="bsManufacturer"
label="装置厂家"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<el-table-column
prop="protocolName"
label="规约名称"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="workingDate"
label="投运日期"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
{{
scope.row.workingDate == null
? ""
: $moment(scope.row.workingDate).format("yy-MM-DD")
}}</template
>
</el-table-column>
<el-table-column
prop="isonline"
label="最新运行状态"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
{{ scope.row.isonline ? "在线" : "离线" }}</template
>
</el-table-column>
<el-table-column
prop="protocolName"
label="在线天数"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="图片数量"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最后数据上送时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最后图片上送时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最新基本信息采集时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="装置名称"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="装置型号"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="装置版本号"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="生产厂家"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="生产日期"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="出厂编号"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最新工作状态采集时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="电源电压"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="工作温度"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="电池电量"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="浮充状态"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="工作总时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="连续工作时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="网络连接状态"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最新运行状态采集时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="4G信号强度"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="2G信号强度"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="剩余运行内存"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="剩余存储内"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="最新GPS位置采集时间"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="半径"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="维度"
show-overflow-tooltip
min-width="120"
/>
<el-table-column
prop="protocolName"
label="经度"
show-overflow-tooltip
min-width="120"
/>
<!-- <el-table-column
prop="status"
label="装置状态"
show-overflow-tooltip
v-if="roleUser != 2"
>
<template slot-scope="scope">
{{ scope.row.status == 1 ? "运行中" : "已删除" }}
</template>
</el-table-column> -->
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="page"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper,total"
:total="total"
background
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getTerminalJoggle,
getSearchInfo,
getTerminalListExcel,
} from "@/utils/api/index";
export default {
data() {
return {
dyOptions: [{ id: -1, name: "全部" }], //
xlOptions: [{ id: -1, name: "全部" }], //线
gtOptions: [{ id: -1, name: "全部" }], //
formdata: {
dyId: -1,
lineId: -1,
towerId: -1,
search: "",
},
terminalTableData: [], //
page: 1, //
pageSize: 20, //
total: 0, //
loading: true,
};
},
created() {
var that = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key === 13) {
that.onSubmit(); //
}
};
},
mounted() {
this.$set(
this.formdata,
"starttime",
new Date(new Date().toLocaleDateString()).getTime()
);
this.$set(this.formdata, "endtime", new Date().setHours(23, 59, 59, 59));
this.getSearchdy();
this.terminalList();
},
methods: {
//
getSearchdy() {
getSearchInfo({ type: 1 })
.then((res) => {
this.dyOptions = [{ id: -1, name: "全部" }];
this.dyOptions = this.dyOptions.concat(res.data.list);
this.formdata.dyId = this.dyOptions[0].id;
this.getSearchxl();
})
.catch((err) => {});
},
//线
getSearchxl() {
getSearchInfo({ type: 2, id: this.formdata.dyId })
.then((res) => {
this.xlOptions = [{ id: -1, name: "全部" }];
this.xlOptions = this.xlOptions.concat(res.data.list);
this.formdata.lineId = this.xlOptions[0].id;
this.getSearchgt();
})
.catch((err) => {});
},
//
getSearchgt() {
getSearchInfo({ type: 3, id: this.formdata.lineId })
.then((res) => {
this.gtOptions = [{ id: -1, name: "全部" }];
this.gtOptions = this.gtOptions.concat(res.data.list);
this.formdata.towerId = this.gtOptions[0].id;
})
.catch((err) => {});
},
//
onSubmit() {
this.page = 1;
this.terminalList();
},
//
onReset() {
this.formdata = {};
this.getSearchdy();
this.page = 1;
this.pageSize = 20;
this.terminalList();
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
},
////
terminalList() {
this.loading = true;
this.$set(this.formdata, "pageindex", this.page);
this.$set(this.formdata, "pagesize", this.pageSize);
getTerminalJoggle(this.formdata)
.then((res) => {
console.log(res);
this.terminalTableData = res.data.list;
this.total = res.data.total;
this.loading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleExport() {
//window.location.href = "/api/api/getTerminalListExcel";
},
//
handleCurrentChange(val) {
this.page = val;
this.terminalList(); //
},
//
handleSizeChange(val) {
this.pageSize = val;
this.terminalList();
},
},
};
</script>
<style lang="less">
.deviceReport {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #ffffff;
.reportBox {
border: 1px solid #dddddd;
height: calc(100% - 24px);
padding: 12px;
border-radius: 4px;
.searchBox {
display: flex;
flex-direction: column;
.ml10 {
margin-left: 10px;
}
.el-form {
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 185px;
}
.dybox {
.el-form-item__content {
width: 120px;
}
}
.xlbox {
.el-form-item__content {
width: 160px;
}
}
}
}
.photoGraphicBtnGroup {
display: flex;
justify-content: space-between;
align-items: center;
}
.searchBox {
margin-top: 8px;
}
.photoGraphicTable {
// margin-top: 16px;
//margin-top: 36px;
height: calc(100% - 130px);
}
}
}
</style>

@ -8,7 +8,7 @@
@close="handleclose"
>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="装置时间" name="1">
<!-- <el-tab-pane label="装置时间" name="1">
<div class="deviceTime">
<el-form
:model="deviceTimeForm"
@ -25,12 +25,12 @@
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="setTermFn"></el-button>
<el-button type="primary">设置</el-button>
<el-button type="primary" @click="searchTime"></el-button>
<el-button type="primary" @click="setTime"></el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tab-pane> -->
<el-tab-pane label="采样参数" name="2">
<div class="tabsBox">
<el-tabs v-model="tabsActive" type="card">
@ -39,28 +39,36 @@
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
label-width="152px"
>
<el-form-item label="采集周期(分钟)">
<el-form-item label="采集时间周期(分钟)">
<el-input
v-model="deviceTimeForm.zztime"
v-model="samplingForm.mainTime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="采集周期(分钟)">
<el-form-item label="高速采样点数">
<el-input
v-model="deviceTimeForm.newzztime"
v-model="samplingForm.sampleCount"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="心跳周期(分钟)">
<el-form-item label="高速采样频率">
<el-input
v-model="deviceTimeForm.newzztime"
v-model="samplingForm.sampleFrequency"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="心跳上送周期(分钟)">
<el-input
v-model="samplingForm.heartbeatTime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="primary" @click="samplingSearch"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
@ -70,20 +78,27 @@
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
label-width="152px"
>
<el-form-item label="采集周期(分钟)">
<el-input v-model="deviceTimeForm.zztime"></el-input>
<el-form-item label="采集时间周期(分钟)">
<el-input v-model="deviceTimeForm.mainTime"></el-input>
</el-form-item>
<el-form-item label="采集周期(分钟)">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
<el-form-item label="高速采样点数">
<el-input v-model="deviceTimeForm.sampleCount"></el-input>
</el-form-item>
<el-form-item label="心跳周期(分钟)">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
<el-form-item label="高速采样频率">
<el-input
v-model="deviceTimeForm.sampleFrequency"
></el-input>
</el-form-item>
<el-form-item label="心跳上送周期(分钟)">
<el-input v-model="deviceTimeForm.heartbeatTime"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">设置</el-button>
<el-button type="primary" @click="samplingSet"
>设置</el-button
>
</el-form-item>
</el-form>
</div>
@ -263,7 +278,9 @@
></el-input>
</el-form-item>
<el-form-item class="runformbtn">
<el-button type="primary" @click="setTermFn"></el-button>
<el-button type="primary" @click="runstatusSearch"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
@ -340,11 +357,19 @@ export default {
data() {
return {
isShow: false,
activeName: "1",
activeName: "2",
deviceTimeForm: {
zztime: "", //
newzztime: "", //
},
//
samplingForm: {
mainTime: "",
sampleCount: "",
sampleFrequency: "",
heartbeatTime: "",
},
runStatusForm: {},
gpsForm: {}, //gps
tabsActive: "first",
@ -373,27 +398,139 @@ export default {
this.$refs.videoCaptureref.getRatio();
}
},
setTermFn() {
//
searchTime() {},
//
setTime() {},
//
// -act=sampling [0xA4 ] --flag=[Request Set Flag, default is set=1, 0: request] --rf=[Request Flag] --reqtype=[Request Type] --maintime=[Main Time] --samplecount=[Sample Count] --samplingfreq=[Sample Frequency] --heartbeat=[Heartbeat Time]
samplingSearch() {
let params = [
{
name: "act",
value: "sampling",
},
{
name: "flag",
value: 0,
},
{
name: "rf",
value: 15,
},
{
name: "reqtype",
value: "0xA4",
},
{
name: "maintime",
value: "",
},
{
name: "samplecount",
value: "",
},
{
name: "samplingfreq",
value: "",
},
{
name: "heartbeat",
value: "",
},
];
this.setTermFn(params);
},
samplingSet() {
let params = [
{
name: "act",
value: "sampling",
},
{
name: "flag",
value: 1,
},
{
name: "rf",
value: 15,
},
{
name: "reqtype",
value: "0xA4",
},
{
name: "maintime",
value: this.samplingForm.maintime,
},
{
name: "samplecount",
value: this.samplingForm.samplecount,
},
{
name: "samplingfreq",
value: this.samplingForm.samplingfreq,
},
{
name: "heartbeat",
value: this.samplingForm.heartbeat,
},
];
this.setTermFn(params);
},
//
runstatusSearch() {
let params = [
{
name: "act",
value: "runningstatus",
},
];
this.setTermFn(params);
},
setTermFn(dataParams) {
console.log("点击了统一的接口", "runningstatus");
setTermCamera({
termId: this.rowData.id,
list: [{ name: "act", value: "gpsinfo" }],
list: dataParams,
})
.then((res) => {
console.log(res);
this.requestid = res.data.requestId;
this.getinfo();
// this.timer = window.setInterval(() => {
// this.getinfo();
// this.i++;
// }, 1000);
this.timer = window.setInterval(() => {
this.getinfo();
this.i++;
}, 1000);
})
.catch((err) => {});
},
getinfo() {
getTermCameraRequest({ requestid: this.requestid })
.then((res) => {
console.log(res);
if (res.data.success == 1) {
// && res.data.result == 255
console.log(JSON.parse(res.data.data));
this.samplingForm = JSON.parse(res.data.data);
this.i = 0;
this.$message({
duration: 1500,
showClose: true,
message: "信息已更新",
type: "success",
});
clearInterval(this.timer);
} else if (this.i > 9) {
this.loading = false;
this.i = 0;
this.$message({
duration: 1500,
showClose: true,
message: "暂未获取到信息,请稍后再试!!",
type: "warning",
});
clearInterval(this.timer);
}
})
.catch();
},
@ -463,7 +600,7 @@ export default {
},
handleclose() {
this.isShow = false;
this.activeName = "1";
this.activeName = "2";
this.tabsActive = "first";
this.gpsForm = {};
},
@ -473,7 +610,7 @@ export default {
<style lang="less">
.parameterSetDialog {
.el-tabs__content {
height: 479px;
height: 436px;
.deviceTime {
width: 400px;
margin: 0 auto;

@ -516,7 +516,13 @@ export default {
changeSelect() {
console.log(this.selaccess);
this.loading = true;
this.compareloading = false;
this.timernum = 0;
// this.$message.success("");
clearInterval(this.timer);
this.timer = null;
this.newshedulenr = [];
getSchedulenr({
channelid: this.selaccess,
terminalid: this.selfacilityId,

Loading…
Cancel
Save