前端实现部分折叠，多余内容隐藏
要求描述：
显示部分展示功能，多余内容默认折叠，有折叠图标以及折叠动效。
实现方法：
1.本地引入以下js模块：
const elTransition =
"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
"before-enter"(el) {
el.style.transition = elTransition;
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + "px";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = "";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = "hidden";
},
"after-enter"(el) {
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
},
"before-leave"(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + "px";
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
"after-leave"(el) {
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
export default {
name: "collapseTransition",
functional: true,
render(h, { children }) {
const data = {
on: Transition
};
return h("transition", data, children);
}
};
-
vue页面中引入js：
-
组件引用：
-
默认展示的高度：
-
实现后效果图：
a.默认折叠
b.展开后
完整代码：
<template>
<div class="container">
<a-card class="cardClass">
<template>
<div>
<a-page-header title="返回" @back="() => $router.go(-1)">
</a-page-header>
</div>
</template>
<div>
<span class="pBigTitle">基础信息</span>
<span class="rightFlaot" v-if="saveOrEdit" @click="editOrBtn('edit')">
<a-icon type="edit" class="themeColor"></a-icon
><a> 编辑</a></span
>
<span class="rightFlaot" v-if="!saveOrEdit" @click="editOrBtn('save')">
<a-icon type="save" class="themeColor"></a-icon
><a> 保存</a></span
>
</div>
<!-- 保存展示 -->
<div v-show="saveOrEdit">
<div>
<a-row class="device-details">
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew spanClassLeft">水表编号：</label>
<span class="spanNameNew" v-if="formitem.meterNumber">{{
formitem.meterNumber
}}</span>
<span class="spanNameNew" v-else>暂无水表编号</span>
</a-col>
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew">安装位置：</label
><span class="spanNameNew">{{ formitem.location }}</span>
</a-col>
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew">计量范围：</label
><span class="spanNameNew">{{ formitem.measurementRange }}</span>
</a-col>
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew">水表类型：</label
><span class="spanNameNew">{{ formitem.type }}</span>
</a-col>
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew">水表精度：</label
><span class="spanNameNew">{{ formitem.accuracyName }}</span>
</a-col>
<a-col :span="8" class="colMarginLeft marginTopBottom">
<label class="spanTitleNew">安装日期：</label
><span class="spanNameNew">{{
formitem.installTime || "暂无安装时间"
}}</span>
</a-col>
</a-row>
</div>
<collapse>
<div
class="container"
v-show="isActive"
style="background-color: #fff; padding-top: 0"
>
<a-row>
<a-col :span="8" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew">设备编号：</label
><span class="spanNameNew">{{ formitem.deviceNo }}</span>
</a-col>
<a-col :span="8" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew"> 校验周期：</label
><span class="spanNameNew">{{ formitem.checkCycle }}</span
><span class="spanNameNew">还有{{ surplusDay }}天到期</span>
</a-col>
<a-col :span="8" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew"
> 管径(Dn)：</label
><span class="spanNameNew">{{ formitem.caliber }}</span>
</a-col>
<a-col :span="8" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew"
> 纬度：</label
><span class="spanNameNew">{{ formitem.latitude }}</span>
</a-col>
<a-col :span="8" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew"
> 经度：</label
><span class="spanNameNew">{{ formitem.longitude }}</span>
</a-col>
<a-col
:span="8"
class="marginTopBottom"
style="padding-left: 15px"
>
<label class="spanTitleNew">最近校验日期：</label
><span class="spanNameNew">{{
formitem.checkTime || "暂无校验时间"
}}</span>
</a-col>
</a-row>
<a-row>
<a-col :span="24" class="colMarginLeftNew marginTopBottom">
<label class="spanTitleNew">现场照片：</label>
<div v-if="livePhoto != ''" class="site-photos">
<viewer :images="livePhoto">
<img
alt="现场照片"
v-for="(item, index) in livePhoto"
:src="baseUrl + item"
:key="index"
class="picture-style"
/>
</viewer>
</div>
<span v-else>暂无照片</span>
</a-col>
</a-row>
</div>
</collapse>
<div class="openOrFold">
<button
v-if="openOrFoldFlag"
@click="openOrFoldBtn('open')"
class="open"
></button>
<button
v-if="!openOrFoldFlag"
@click="openOrFoldBtn('fold')"
class="fold"
></button>
</div>
</div>
<!-- 编辑状态 -->
<div v-show="!saveOrEdit">
<a-form
layout="horizontal"
:form="form"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 14 }"
enctype="multipart/form-data"
>
<a-row :gutter="16">
<a-col :span="8">
<a-form-item label="水表编号">
<a-input
placeholder="请输入水表编号"
type="number"
v-decorator="[
'meterNumber',
{ rules: [{ required: true, message: '请输入水表编号' }] },
]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="安装位置 ">
<a-input
placeholder="请输入安装位置"
v-decorator="[
'location',
{ rules: [{ required: true, message: '请输入安装位置' }] },
]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="计量范围 ">
<a-input
placeholder="请输入计量范围"
v-decorator="['measurementRange']"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="8">
<a-form-item label="水表类型" :span="8">
<a-select placeholder="请选择设备类型" v-decorator="['type']">
<a-select-option
v-for="(item, index) in typeList"
:key="index"
:value="item.id"
>
{{ item ? item.name : "" }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="水表精度" :span="8">
<a-select
placeholder="请选择水表精度"
v-decorator="['accuracyCode']"
>
<a-select-option
v-for="(item, index) in accuracyList"
:key="index"
:value="item.dictCode"
>
{{ item ? item.dictLabel : "" }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="安装日期 ">
<a-date-picker
v-decorator="['installTime']"
class="data-picker"
@change="changeDate"
>
<template slot="dateRender" slot-scope="current, today">
<div
class="ant-calendar-date"
:style="getCurrentStyle(current, today)"
>
{{ current.date() }}
</div>
</template>
</a-date-picker>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="8">
<a-form-item label="设备编号">
<a-input
placeholder="请输入设备编号"
v-decorator="['deviceNo']"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="校验周期 ">
<a-input-group compact>
<a-select
style="width: 50%"
placeholder="周期数"
v-model="tempcyclearr[0]"
@change="checkCycle('0', $event)"
>
<a-select-option
v-for="item in 12"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
<a-select
style="width: 50%"
placeholder="周期单位"
@change="checkCycle('1', $event)"
v-model="tempcyclearr[1]"
>
<a-select-option value="1"> 年 </a-select-option>
<a-select-option value="2"> 月 </a-select-option>
</a-select>
</a-input-group>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="管径">
<a-input placeholder="请输入管径" v-decorator="['caliber']" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="8">
<a-form-item label="经度 ">
<a-input placeholder="请输入经度" v-decorator="['longitude']" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="纬度 ">
<a-input placeholder="请输入纬度" v-decorator="['latitude']" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="最近校验日期 ">
<a-date-picker
v-decorator="['checkTime']"
class="data-picker"
@change="changeCheckDate"
>
<template slot="dateRender" slot-scope="current, today">
<div
class="ant-calendar-date"
:style="getCurrentStyle(current, today)"
>
{{ current.date() }}
</div>
</template>
</a-date-picker>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24" class="photo">
<a-form-item label="现场照片">
<div>
<a-upload
name="avatar"
list-type="picture-card"
:before-upload="beforeUpload"
:customRequest="uploadImage"
:file-list="fileList"
@preview="handlePreview"
@change="handleChange"
>
<div v-if="fileList.length < 8">
<a-icon type="plus" />
<div class="ant-upload-text">点击上传</div>
</div>
</a-upload>
</div>
<a-modal
:visible="previewVisible"
:footer="null"
@cancel="handleCancel"
>
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-card>
<br />
<a-card class="cardBottom">
<a-row class="buttonAndCradBottom">
<a-col>
<a-date-picker
key="dayTime"
v-model="dayTime"
format="YYYY-MM-DD"
style="width: 200px"
@change="changeTime"
/>
</a-col>
</a-row>
<a-row class="rowBottom">
<a-col :span="6">
<a-card class="cardShadow">
<p class="pBigTitle">日水量</p>
<p class="dayWaterNumVal" v-if="dayWaterNumData.todayFlow">
{{ dayWaterNumData.todayFlow }}
<span class="dayWaterNumUnit">m³</span>
</p>
<p class="dayWaterNumVal" v-else>
_
<span class="dayWaterNumUnit">m³</span>
</p>
<br /><br />
<p class="marginTopBottom">
<span class="spanTitleNew"
>初始读数：
<span class="spanNameNew" v-if="dayWaterNumData.startFlow">{{
dayWaterNumData.startFlow
}}</span>
<span class="spanNameNew" v-else>—</span>
</span>
<span class="rightFlaot spanTitleNew"
>终止读数：
<span class="spanNameNew" v-if="dayWaterNumData.endFlow">{{
dayWaterNumData.endFlow
}}</span>
<span class="spanNameNew" v-else>—</span>
</span>
</p>
<p>
<span class="spanTitleNew"
>最新更新：
<span class="spanNameNew" v-if="dayWaterNumData.updatedAt">{{
dayWaterNumData.updatedAt
}}</span>
<span class="spanNameNew" v-else>—</span>
</span>
</p>
</a-card>
</a-col>
<a-col :span="18" style="padding-left: 16px">
<a-card class="cardShadow">
<p class="pBigTitle">抄表记录</p>
<vxe-table
border="inner"
show-footer
size="mini"
height="182"
:row-config="{ isCurrent: true, isHover: true }"
class="mytable-scrollbar"
:data="tableDataNew"
>
<vxe-column
v-for="config in columns"
:key="config.key"
:type="config.type"
:field="config.dataIndex"
:title="config.title"
:fixed="config.fixed"
:width="config.width"
>
</vxe-column>
</vxe-table>
</a-card>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-card class="cardShadow">
<p class="pBigTitle">瞬时流量</p>
<div v-show="echartsShowFlag">
<v-chart class="chart" :option="dayOption" autoresize></v-chart>
</div>
<div
v-show="!echartsShowFlag"
style="text-align: center; height: 220px"
>
<img src="../../assets/images/noData/echartsNoData.png" alt="" />
<p>暂无数据</p>
</div>
</a-card>
</a-col>
</a-row>
</a-card>
</div>
</template>
<script>
import moment from "moment";
import { measureTime } from "../../utils/measureTime";
import collapse from "../../assets/js/collapse";
import * as echarts from "echarts";
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
var that;
export default {
name: "DeviceDetail",
components: {
collapse,
},
data() {
return {
//瞬时流量
echartsShowFlag: true,
dayOption: {
tooltip: {
trigger: "axis",
},
grid: {
top: "40",
left: "60", // 固定左边刻度宽度
right: "60",
bottom: "20",
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: { readOnly: false },
magicType: { type: ["line", "bar"] },
restore: {},
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"0:00",
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9: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",
],
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} m³",
},
},
series: [
{
name: "用水量",
type: "line",
smooth: "true",
itemStyle: {
normal: {
color: "#2D88FF",
lineStyle: {
width: 1, //外边线宽度
color: "#2D88FF", //外边线颜色
},
},
},
data: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0,
],
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(45, 136, 255,0.5)",
},
{
offset: 1,
color: "rgb(255, 255, 255)",
},
]),
},
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
],
},
// markLine: {
// data: [{ type: "average", name: "Avg" }],
// },
},
],
},
//抄表记录
tableDataNew: [],
columns: [
{
title: "水表编号",
dataIndex: "meterNumber",
},
{
title: "安装位置",
dataIndex: "installationPosition",
},
{
title: "设备编号",
dataIndex: "deviceNo",
},
{
title: "上报时间",
dataIndex: "reportedAt",
},
{
title: "表计读数",
dataIndex: "fieldValue",
width: "14%",
align: "center",
customRender: (text) => {
return <p style="text-align:right;padding-right:50%">{text}</p>;
},
},
],
//日水量
dayTime: "",
dayWaterNumData: {},
//编辑状态下所需参数
form: this.$form.createForm(this),
accuracyList: null,
tempcyclearr: [1, 1],
fileList: [],
previewVisible: false,
previewImage: "", //预览
//展示隐藏
openOrFoldFlag: true,
saveOrEdit: true,
isActive: false,
// 原始数据
deviceNoCopy: null,
meterNumberCopy: null,
childId: null,
detailData: {},
originalData: {},
formitem: {},
livePhoto: [],
visible: false,
newvisible: false,
confirmLoading: false,
showIndex: null,
// typeList: [], //设备类型
unitList: [], //单元列表
nodeList: [], //节点列表
checkItemList: [], //检测项列表
baseUrl: process.env.VUE_APP_URL + "/",
surplusDay: 0,
};
},
created() {
that = this;
},
computed: {
typeList() {
return this.$store.getters.typeList;
},
nodeList() {
let obj = { id: 0, name: "暂无" };
let arr = [...this.$store.getters.nodeList];
arr.unshift(obj);
return arr;
},
unitList() {
let obj = { id: 0, name: "暂无" };
let arr = [...this.$store.getters.unitList];
arr.unshift(obj);
return arr;
},
checkList() {
return this.$store.getters.checkList;
},
//水资源用途
purposeList() {
let obj = { id: 0, name: "暂无" };
let arr = [...this.$store.getters.purposeList];
arr.unshift(obj);
return arr;
},
//水资源分类
classificationList() {
let obj = { id: 0, name: "暂无" };
let arr = [...this.$store.getters.classificationList];
arr.unshift(obj);
return arr;
},
},
filters: {
getCheckName(form) {
var checkName;
checkName = that.getName(that.checkItemList, form.checkItemId);
return checkName;
},
},
mounted() {
this.accuracyGet();
this.changeTime();
},
methods: {
changeTime(val) {
if (!val) {
this.dayTime = this.$moment(this.$store.getters.timeList).format(
"YYYY-MM-DD"
);
} else {
this.dayTime = this.$moment(val).format("YYYY-MM-DD");
}
this.detailList();
console.log("查看时间", val);
this.dayWaterNum(val); //日水量查询
this.meterReadingRecord(val); //抄表记录
this.flowrate(val); //瞬时流量
},
//瞬时流量
flowrate(value) {
this.$http
.get("/electronicLedger/originalRecord/flow", {
params: {
meterNumber: this.meterNumberCopy,
time: value
? this.$moment(value).format("YYYY-MM-DD")
: this.$store.getters.timeList,
},
})
.then((res) => {
if (res.code == 1) {
console.log("查看X轴数据", realTimeXdata);
if (res.data.length > 0) {
this.echartsShowFlag = true;
var realTimeXdata = []; // 时间
var realUseTime = []; // 用水量
var realUseWaterArr = res.data;
// realUseWaterArr.sort(this.compare("unit"));
for (let i = 0; i < realUseWaterArr.length; i++) {
realTimeXdata.push(realUseWaterArr[i].reportedAt);
realUseTime.push(realUseWaterArr[i].fieldValue);
}
this.dayOption.xAxis.data = realTimeXdata;
this.dayOption.series[0].data = realUseTime;
this.dayOption.xAxis.data = [...realTimeXdata];
} else if (res.data.length == 0) {
this.echartsShowFlag = false;
// this.dayOption.xAxis.data = realTimeXdata;
// this.dayOption.series[0].data = realUseTime;
// this.dayOption.xAxis.data = [...realTimeXdata];
}
}
})
.catch(() => {});
},
//抄表记录
meterReadingRecord(value) {
this.$http
.get("/electronicLedger/originalRecord/reading", {
params: {
meterNumber: this.meterNumberCopy,
time: value
? this.$moment(value).format("YYYY-MM-DD")
: this.$store.getters.timeList,
},
})
.then((res) => {
if (res.code == 1) {
this.tableDataNew = res.data;
console.log("查看表计度数", res.data);
}
})
.catch(() => {});
},
// 日水量查询
dayWaterNum(value) {
this.$http
.post("/device/dailyWaterVolume/oneDay", {
deviceDate: value
? this.$moment(value).format("YYYY-MM-DD")
: this.$store.getters.timeList,
deviceNo: this.deviceNoCopy,
})
.then((res) => {
if (res.code == 1) {
//接口返回数据
this.loading = false;
this.dayWaterNumData = res.data;
}
})
.catch(() => {});
},
//精度下拉列表
accuracyGet() {
this.$http
.get("/system/dict/data/type/accuracy_type")
.then((res) => {
this.accuracyList = res.data;
})
.catch(() => {});
},
// 周期选择
checkCycle(id, e) {
this.tempcyclearr[id] = e;
this.tempcycle = this.tempcyclearr.join(",");
console.log(this.tempcycle);
},
changeDate(moment, value) {
this.form.setFieldsValue({
installTime: value,
});
},
changeCheckDate(value) {
this.form.setFieldsValue({
checkTime: value,
});
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
uploadImage(file) {
this.loading = true;
const formData = new FormData();
formData.append("file", file.file);
this.saveFile(formData);
},
handleChange(data) {
console.log(data);
if (data.file.status == "removed") {
this.fileList = data.fileList;
}
},
handleCancel() {
this.previewVisible = false;
},
// 上传头像前校验
beforeUpload(file) {
console.log("查看图片大小", file.size);
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/jpg" ||
file.type === "image/png";
if (!isJpgOrPng) {
this.$message.error("只能上传jpg/png格式的图片");
}
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error("图片不得大于10MB!");
}
return isJpgOrPng && isLt2M;
},
saveFile(file) {
this.$http
.post("/file/upload", file)
.then((res) => {
if (res.code == 1) {
// 存入列表
this.fileList.push({
uid: this.fileList.length + 1,
name: res.data.filePath,
enable: "done",
url: process.env.VUE_APP_URL + "/" + res.data.filePath,
});
} else {
this.$message.error(res.msg);
}
})
.catch(function (error) {
console.log(error);
});
},
openOrFoldBtn(val) {
this.isActive = !this.isActive;
this.openOrFoldFlag = !this.openOrFoldFlag;
},
editOrBtn(val) {
this.saveOrEdit = !this.saveOrEdit;
if (val == "edit") {
var data = this.detailData;
this.$nextTick(() => {
this.form.setFieldsValue({
name: data.name,
deviceNo: data.deviceNo,
type: data.type,
checkType: data.checkType,
checkItemId: data.checkItemId,
unitId: data.unitId,
nodeId: data.nodeId,
purpose: data.purpose,
classiFication: data.classiFication,
usewaterIndex: data.usewaterIndex,
location: data.location,
longitude: data.longitude,
latitude: data.latitude,
measurementRange: data.measurementRange,
meterNumber: data.meterNumber, //表计序号
accuracyCode: data.accuracyCode,
caliber: data.caliber,
installTime: data.installTime
? moment(data.installTime, "YYYY-MM-DD")
: null,
checkTime: data.checkTime
? moment(data.checkTime, "YYYY-MM-DD")
: null,
enable: data.enable,
});
this.cantable = false;
// 周期显示
if (data.checkCycle != null) {
this.tempcyclearr = data.checkCycle.split(",");
} else {
this.tempcyclearr[0] = "";
this.tempcyclearr[1] = "";
}
// 图片列表显示
this.fileList = [];
var temp =
data.livePhoto == null || data.livePhoto == ""
? []
: data.livePhoto.split(",");
temp.forEach((item, index) => {
// 存入列表
this.fileList.push({
uid: index,
name: item,
enable: "done",
url: process.env.VUE_APP_URL + "/" + item,
});
});
});
} else if (val == "save") {
this.form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
if (fieldsValue.installTime != null) {
fieldsValue.installTime = moment(fieldsValue.installTime).format(
"YYYY-MM-DD"
);
} else {
this.$message.error("请填写安装日期");
return;
}
if (fieldsValue.checkTime != null) {
fieldsValue.checkTime = moment(fieldsValue.checkTime).format(
"YYYY-MM-DD"
);
} else {
this.$message.error("请填写校验日期");
return;
}
// 处理周期单位
this.$set(fieldsValue, "checkCycle", this.tempcycle);
// 将图片数组以，号拼接存入
var temp = [];
this.fileList.forEach((item) => {
temp.push(item.name);
});
var tempstr = temp.join(",");
this.$set(fieldsValue, "livePhoto", tempstr);
//传入后端表单拼接,默认公司为1，
this.$set(fieldsValue, "id", this.childId);
this.$http
.put("/device/" + this.childId, fieldsValue)
.then((res) => {
console.log("看一看fieldsValue", fieldsValue);
if (res.code == 1) {
this.$message.success(res.msg);
this.detailList();
} else {
this.$message.error(res.msg);
}
})
.catch(() => {});
});
}
},
// 关闭大图查看
close(id) {
this.newvisible = id;
},
getName(list, id) {
var temp;
list.forEach((element) => {
if (element.id == id) {
temp = element.name;
}
});
return temp || "暂无数据";
},
detailList() {
this.childId = sessionStorage.getItem("childIdStorage");
this.deviceNoCopy = sessionStorage.getItem("deviceNoCopyStorage");
this.meterNumberCopy = sessionStorage.getItem("meterNumberCopyStorage");
this.$http
.get("/device/" + this.childId)
.then((res) => {
if (res.code == 1) {
this.detailData = res.data;
// 存一份原始数据
this.originalData = { ...this.detailData };
this.$nextTick(() => {
this.visible = true;
this.formitem = { ...this.detailData };
this.formitem.type = this.getName(
this.$store.getters.typeList,
this.originalData.type
);
this.formitem.nodeId = this.getName(
this.$store.getters.nodeList,
this.originalData.nodeId
);
this.formitem.unitId = this.getName(
this.$store.getters.unitList,
this.originalData.unitId
);
this.formitem.checkType = this.getName(
this.$store.getters.checkList,
this.originalData.checkType
);
if (this.formitem.status == "online") {
this.formitem.status = "正常";
} else if (this.formitem.status == "offline") {
this.formitem.status = "离线";
} else {
this.formitem.status = "异常";
}
this.formitem.enable =
this.formitem.enable == "true" ? "启用" : "禁用";
if (this.originalData.checkCycle != null) {
this.formitem.checkCycle =
this.originalData.checkCycle.split(",")[0] +
"" +
(this.originalData.checkCycle.split(",")[1] == 1
? "年"
: "个月");
this.surplusDay = measureTime(
this.originalData.checkCycle.split(",")[0],
this.originalData.checkCycle.split(",")[1],
this.detailData.installTime
);
} else {
this.formitem.checkCycle = "暂无校验周期";
}
if (this.formitem.livePhoto == null) {
this.livePhoto = [];
} else {
this.livePhoto = this.formitem.livePhoto.split(",");
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(function (error) {
console.log(error);
});
},
handleOk(e) {
this.visible = false;
},
},
};
</script>
<style scoped lang="less">
.container {
padding: 12px 16px 0 12px;
height: 100%;
/deep/ .ant-page-header {
margin-top: -24px;
margin-left: -24px;
.ant-page-header-heading {
border-bottom: 1px solid #e8eaec;
.ant-page-header-heading-title {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
margin-bottom: 10px;
}
}
}
.cardClass {
border-radius: 4px 0px 0px 4px;
bottom: 0;
border: 0;
/deep/ .ant-card-body {
padding-bottom: 0 !important;
}
/deep/ .photo {
.ant-col-6 {
width: 8%;
}
}
.openOrFold {
text-align: center;
height: 32px;
.open {
width: 72px;
height: 32px;
line-height: 32px;
border: 0;
cursor: pointer;
background: url("../../assets/images/openOrFold/open.png") no-repeat;
background-size: 100% 100%;
}
.fold {
width: 72px;
height: 32px;
height: 32px;
line-height: 32px;
border: 0;
cursor: pointer;
background: url("../../assets/images/openOrFold/fold.png") no-repeat;
background-size: 100% 100%;
}
}
}
.cardBottom {
border-radius: 4px 0px 0px 4px;
bottom: 0;
border: 0;
height: 100%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.3)
);
/deep/ .ant-card-body {
padding-bottom: 0;
}
.chart {
height: 220px;
}
.mytable-scrollbar {
/deep/ .vxe-header--row {
background-color: #f2f3f5;
}
}
.dayWaterNumVal {
font-size: 54px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #2d81ff;
text-align: center;
.dayWaterNumUnit {
font-size: 34px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999999;
}
}
.buttonAndCradBottom {
margin-bottom: 20px;
}
}
}
.picture-style {
width: 144px;
height: 96px;
object-fit: cover;
margin: 0 10px;
cursor: pointer;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
background-color: #ffffff;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
background-color: #f2f3f5;
border-radius: 5px;
border: 1px solid #f1f1f1;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
background-color: #ffffff;
}
</style>
3522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
