|
@@ -0,0 +1,800 @@
|
|
|
+<!-- 核心设备报表 -->
|
|
|
+<template>
|
|
|
+ <div class="core-device-report">
|
|
|
+ <div class="main-left">
|
|
|
+ <Select
|
|
|
+ class="system-select"
|
|
|
+ width="217"
|
|
|
+ :isReadOnly="true"
|
|
|
+ tipPlace="top"
|
|
|
+ caption="系统名称:"
|
|
|
+ @change="changeCurSystem"
|
|
|
+ v-model="systemId"
|
|
|
+ :selectdata="systemList"
|
|
|
+ :placeholder="'请选择'"
|
|
|
+ hideClear
|
|
|
+ />
|
|
|
+ <div class="system-content">
|
|
|
+ <div
|
|
|
+ v-for="(item) in systemContentData"
|
|
|
+ :key="'key_' + item.category_code"
|
|
|
+ class="item-content"
|
|
|
+ :class="{'active': item.isActive}"
|
|
|
+ @click="changeEquipment(item.category_code)"
|
|
|
+ >
|
|
|
+ <div class="first-row">
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <div>{{item.isMaintenance?'维保中' : ''}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="sec-row">
|
|
|
+ <div>
|
|
|
+ {{item.num}}
|
|
|
+ <span>{{systemId !== '1008'?'台' : item.unitText}}</span>
|
|
|
+ </div>
|
|
|
+ <span :class="{'abnormal': item.abnormal}">{{item.statusNum !== 0?item.statusNum : ''}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main-right">
|
|
|
+ <div class="search-container">
|
|
|
+ <Input
|
|
|
+ iconType="search"
|
|
|
+ v-model="searchKey"
|
|
|
+ placeholder="搜索"
|
|
|
+ width="192"
|
|
|
+ @pressEnter="getTableData"
|
|
|
+ @clear="getTableData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%;margin-bottom: 63px;"
|
|
|
+ @row-click="showEquipmentStatus"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" prop="index" width="60"></el-table-column>
|
|
|
+ <el-table-column prop="sbjc" label="设备名称" width="600"></el-table-column>
|
|
|
+ <el-table-column prop="assetnum" label="设备内码"></el-table-column>
|
|
|
+ <el-table-column prop="is_exception" label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;"
|
|
|
+ :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"
|
|
|
+ ></span>
|
|
|
+ <span style="margin-left: 10px">{{ !scope.row.is_exception?'正常' : '异常' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="photos_num" label="照片">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ style="color: #025BAA"
|
|
|
+ :style="{'cursor': scope.row.photos_num?'pointer' : 'default'}"
|
|
|
+ @click="showPicturesDetail(scope.row, 'equip')"
|
|
|
+ >{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
|
|
|
+ <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attachments_num" label="报告">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ style="color: #025BAA"
|
|
|
+ :style="{'cursor': scope.row.attachments_num?'pointer' : 'default'}"
|
|
|
+ @click="(e) => showReportDetail(scope.row, 'equip', e)"
|
|
|
+ >{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
|
|
|
+ <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">1张</span> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="tatol"
|
|
|
+ :current-page="curPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ @current-change="changeTablePage"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="equipTitle" :visible.sync="dialogTableVisible" width="1260px">
|
|
|
+ <el-date-picker
|
|
|
+ style="margin-bottom: 12px;"
|
|
|
+ v-model="dialogTime"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ @change="changeTime"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-table :data="historyTableData" style="margin-bottom: 55px;" max-height="500">
|
|
|
+ <el-table-column width="200" property="finishDate" label="日期"></el-table-column>
|
|
|
+ <el-table-column width="100" property="typeName" label="事项类型"></el-table-column>
|
|
|
+ <el-table-column property="taskName" label="事项名称"></el-table-column>
|
|
|
+ <el-table-column width="100" property="photosNum" label="照片">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ style="color: #025BAA"
|
|
|
+ :style="{'cursor': scope.row.photosNum?'pointer' : 'default'}"
|
|
|
+ @click="showPicturesDetail(scope.row, 'his')"
|
|
|
+ >{{ scope.row.photosNum?(scope.row.photosNum + '张') : '—' }}</span>
|
|
|
+ <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="100" property="attachmentsNum" label="报告">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ style="color: #025BAA"
|
|
|
+ :style="{'cursor': scope.row.attachmentsNum?'pointer' : 'default'}"
|
|
|
+ @click="(e) => showReportDetail(scope.row, 'his', e)"
|
|
|
+ >{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
|
|
|
+ <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">1张</span> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :current-page="hisCurPage"
|
|
|
+ :page-size="hisPageSize"
|
|
|
+ :total="hisTotal"
|
|
|
+ @current-change="changeHisTablePage"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <div class="img-detail-container">
|
|
|
+ <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="pictures-menu">
|
|
|
+ <div
|
|
|
+ v-for="(item) in pictureList"
|
|
|
+ :key="'id_' + item.id"
|
|
|
+ class="item"
|
|
|
+ @click="changeCurImg(item.id)"
|
|
|
+ :class="{'active': item.isActive}"
|
|
|
+ >
|
|
|
+ <img :src="item.url" alt />
|
|
|
+ <div class="name" :title="item.name">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cur-img-container">
|
|
|
+ <img v-if="curImg.url" :src="curImg.url" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="showAccessory"
|
|
|
+ class="accessory-container"
|
|
|
+ :style="{'top': accessoryPos.top + 'px', 'left': accessoryPos.left + 'px'}"
|
|
|
+ >
|
|
|
+ <div v-for="(item) in accessoryList" :key="'id_' + item.id">
|
|
|
+ <a :href="item.url" target="_blank" :title="item.name">{{item.name}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Select, Input } from "meri-design";
|
|
|
+import {
|
|
|
+ querySystemList,
|
|
|
+ queryEquipmentList,
|
|
|
+ queryTableData,
|
|
|
+ queryHistoryTableData,
|
|
|
+ queryDetailData,
|
|
|
+} from "../../api/coreDeviceReport";
|
|
|
+import _ from "lodash";
|
|
|
+import moment from "moment";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ plazaId: 1000423, // 广场id
|
|
|
+ systemId: "", // 当前系统Id
|
|
|
+ systemList: [], // 系统
|
|
|
+ systemContentData: [
|
|
|
+ // {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
|
|
|
+ // {id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false},
|
|
|
+ // {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false},
|
|
|
+ // {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
|
|
|
+ // {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
|
|
|
+ ], // 系统下的各种组成
|
|
|
+ searchKey: "", // 搜索关键字
|
|
|
+ tableData: [
|
|
|
+ // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
|
|
|
+ // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '异常', photo: 5, report: 6},
|
|
|
+ // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
|
|
|
+ ], // 表数据
|
|
|
+ curPage: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页条数
|
|
|
+ tatol: 0, // 总数据
|
|
|
+ dialogTableVisible: false, // 弹窗显示状态
|
|
|
+
|
|
|
+ // 核心设备实例
|
|
|
+ equipTitle: "", // 核心设备弹窗名称
|
|
|
+ assetnum: null, // 设备台账编码
|
|
|
+ historyTableData: [], // 核心设备实例的所有历史事项信息
|
|
|
+ dialogTime: null, // 弹框内的时间
|
|
|
+ hisCurPage: 1, // 当前页码
|
|
|
+ hisPageSize: 8, // 当前页码
|
|
|
+ hisTotal: 0, // 总条数
|
|
|
+ startTime: null, // 开始时间
|
|
|
+ endTime: null, // 结束事件
|
|
|
+
|
|
|
+ showDetail: false, // 显示照片、报告详情
|
|
|
+ detailTitle: "图片预览", // 弹窗名称
|
|
|
+ pictureList: [
|
|
|
+ // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg'},
|
|
|
+ // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg'},
|
|
|
+ // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg'},
|
|
|
+ ], // 图片列表
|
|
|
+ curImg: {}, // 当前图片
|
|
|
+ isClickPicture: false, // 是否点击的是照片
|
|
|
+
|
|
|
+ showAccessory: false, // 附件窗口显示状态
|
|
|
+ isClickAccessory: false, // 是否点击的是附件
|
|
|
+ accessoryList: [], // 附件
|
|
|
+ accessoryPos: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ }, // 附件弹窗位置
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ components: {
|
|
|
+ Select,
|
|
|
+ Input,
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {},
|
|
|
+
|
|
|
+ beforeMount() {
|
|
|
+ let PLAZAID = localStorage.getItem("PLAZAID");
|
|
|
+ this.plazaId = Number(PLAZAID) || 1000423;
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ document.addEventListener("click", () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.isClickAccessory) {
|
|
|
+ this.isClickAccessory = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.showAccessory = false;
|
|
|
+ }, 20);
|
|
|
+ });
|
|
|
+ this.getSystemList();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取系统列表数据
|
|
|
+ */
|
|
|
+ getSystemList() {
|
|
|
+ querySystemList().then((res) => {
|
|
|
+ if (res.result === "success") {
|
|
|
+ let data = res.data;
|
|
|
+ let newData = [];
|
|
|
+ _.forEach(data, (item) => {
|
|
|
+ newData.push({
|
|
|
+ id: item.code,
|
|
|
+ name: item.name,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.systemList = newData;
|
|
|
+ const { query } = this.$route;
|
|
|
+ if (!_.isEmpty(query)) {
|
|
|
+ this.systemId = query.smsxt || newData[0].id;
|
|
|
+ } else {
|
|
|
+ this.systemId = newData[0].id;
|
|
|
+ }
|
|
|
+ this.getEquipmentOfSystem();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换系统名称
|
|
|
+ */
|
|
|
+ changeCurSystem(val) {
|
|
|
+ console.log("val", val);
|
|
|
+ this.curPage = 1;
|
|
|
+ this.getEquipmentOfSystem();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取系统下的设备
|
|
|
+ */
|
|
|
+ getEquipmentOfSystem() {
|
|
|
+ let param = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ };
|
|
|
+ if (this.systemId !== "") {
|
|
|
+ param.smsxt = this.systemId;
|
|
|
+ }
|
|
|
+ queryEquipmentList("/data/home/querySystemCard", param).then((res) => {
|
|
|
+ const { result, data } = res;
|
|
|
+ if (result === "success") {
|
|
|
+ let newData = [],
|
|
|
+ abnormalList = [];
|
|
|
+ if (!data[0].assetTypeList) {
|
|
|
+ this.tableData = [];
|
|
|
+ this.systemContentData = [];
|
|
|
+ this.curPage = 1;
|
|
|
+ this.tatol = 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _.forEach(data[0].assetTypeList, (item, index) => {
|
|
|
+ let itemData = {
|
|
|
+ name: item.category_name,
|
|
|
+ isMaintenance: item.is_detecting,
|
|
|
+ statusNum:
|
|
|
+ item.category_code !== "rdd" && item.category_code !== "rqa"
|
|
|
+ ? item.is_exception_num
|
|
|
+ : item.is_exception_workorder_num,
|
|
|
+ num: item.asset_num,
|
|
|
+ abnormal: item.is_exception_num !== 0,
|
|
|
+ category_code: item.category_code,
|
|
|
+ };
|
|
|
+ if (!item.category_code) {
|
|
|
+ console.error("without category_code..", item);
|
|
|
+ }
|
|
|
+ if (item.is_exception_num === 0) {
|
|
|
+ newData.push(itemData);
|
|
|
+ } else {
|
|
|
+ abnormalList.push(itemData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ newData = abnormalList.concat(newData);
|
|
|
+ _.map(newData, (o, i) => {
|
|
|
+ return (o.isActive = i === 0);
|
|
|
+ });
|
|
|
+ const { query } = this.$route;
|
|
|
+ _.forEach(newData, (item) => {
|
|
|
+ if (item.category_code === "tja") {
|
|
|
+ item.unitText = "个";
|
|
|
+ } else if (item.category_code === "tjb") {
|
|
|
+ item.unitText = "段";
|
|
|
+ } else {
|
|
|
+ item.unitText = "台";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.systemContentData = newData;
|
|
|
+ if (!_.isEmpty(query) && query.equipId) {
|
|
|
+ _.map(this.systemContentData, (o) => {
|
|
|
+ return (o.isActive = o.category_code == query.equipId);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.getTableData();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换系统下的设备
|
|
|
+ */
|
|
|
+ changeEquipment(id) {
|
|
|
+ this.curPage = 1;
|
|
|
+ _.map(this.systemContentData, (o) => {
|
|
|
+ return (o.isActive = o.category_code === id);
|
|
|
+ });
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取表数据
|
|
|
+ */
|
|
|
+ getTableData() {
|
|
|
+ let query = {
|
|
|
+ category_code: _.find(this.systemContentData, (o) => {
|
|
|
+ return o.isActive;
|
|
|
+ }).category_code,
|
|
|
+ };
|
|
|
+ let url = `/data/sms_asset/query?plazaId=${this.plazaId}&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
|
|
|
+ if (_.trim(this.searchKey) !== "") {
|
|
|
+ url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`;
|
|
|
+ }
|
|
|
+ queryTableData(url, query).then((res) => {
|
|
|
+ const { result, count, data } = res;
|
|
|
+ if (result === "success") {
|
|
|
+ this.tatol = count;
|
|
|
+ this.tableData = data;
|
|
|
+ _.forEach(this.tableData, (item, index) => {
|
|
|
+ item.index = (this.curPage - 1) * this.pageSize + index + 1;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 表第一列序号
|
|
|
+ */
|
|
|
+ indexMethod(index) {
|
|
|
+ return index + 1;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换页码
|
|
|
+ */
|
|
|
+ changeTablePage(page) {
|
|
|
+ this.curPage = page;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 显示设备实例的维保、专维等状态
|
|
|
+ */
|
|
|
+ showEquipmentStatus(row, column, e) {
|
|
|
+ let ins = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ ins.hisCurPage = 1;
|
|
|
+ if (ins.showDetail || ins.showAccessory) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (ins.isClickPicture) {
|
|
|
+ ins.isClickPicture = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ins.equipTitle = row.sbjc;
|
|
|
+ ins.dialogTableVisible = true;
|
|
|
+ ins.assetnum = row.assetnum;
|
|
|
+ ins.initTimePicker();
|
|
|
+ }, 36);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取核心设备实例的所有历史事项信息
|
|
|
+ */
|
|
|
+ getEquipmentHistoryMsg() {
|
|
|
+ this.historyTableData = [];
|
|
|
+ let param = {
|
|
|
+ page: this.hisCurPage,
|
|
|
+ size: this.hisPageSize,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ assetnum: this.assetnum,
|
|
|
+ // assetnum: 24071,
|
|
|
+ startDate: this.startTime,
|
|
|
+ // startDate: 20000101000000,
|
|
|
+ endDate: this.endTime,
|
|
|
+ // endDate: 20200201000000
|
|
|
+ };
|
|
|
+ queryHistoryTableData("/data/base/queryDateByAssetNum", param).then(
|
|
|
+ (res) => {
|
|
|
+ const { result, data, count } = res;
|
|
|
+ if (result === "success") {
|
|
|
+ this.historyTableData = data;
|
|
|
+ this.hisTotal = count;
|
|
|
+ _.forEach(this.historyTableData, (item) => {
|
|
|
+ let name;
|
|
|
+ switch (item.type) {
|
|
|
+ case 0:
|
|
|
+ name = "专维";
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ name = "维保";
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ name = "第三方视图";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ item.typeName = name;
|
|
|
+ item.finishDate = moment
|
|
|
+ .unix(item.finishDate / 1000)
|
|
|
+ .format("YYYY.MM.DD");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 初始化时间选择器
|
|
|
+ */
|
|
|
+ initTimePicker() {
|
|
|
+ let endTime = new Date(),
|
|
|
+ startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 30);
|
|
|
+ this.dialogTime = [startTime, endTime];
|
|
|
+ this.changeTime();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换时间
|
|
|
+ */
|
|
|
+ changeTime() {
|
|
|
+ this.hisCurPage = 1;
|
|
|
+ if (this.dialogTime) {
|
|
|
+ this.startTime = moment
|
|
|
+ .unix(new Date(this.dialogTime[0]).getTime() / 1000)
|
|
|
+ .format("YYYYMMDDHHmmss");
|
|
|
+ this.endTime = moment
|
|
|
+ .unix(new Date(this.dialogTime[1]).getTime() / 1000)
|
|
|
+ .format("YYYYMMDDHHmmss");
|
|
|
+ } else {
|
|
|
+ this.initTimePicker();
|
|
|
+ }
|
|
|
+ this.getEquipmentHistoryMsg();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换设备台账下所有历史事项信息页码
|
|
|
+ */
|
|
|
+ changeHisTablePage(page) {
|
|
|
+ this.hisCurPage = page;
|
|
|
+ this.getEquipmentHistoryMsg();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 显示图片详情
|
|
|
+ */
|
|
|
+ showPicturesDetail(val, type) {
|
|
|
+ if (type === "equip") {
|
|
|
+ if (!val.photos_num) {
|
|
|
+ this.isClickPicture = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!val.file_type || !val.file_type_id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!val.photosNum) {
|
|
|
+ this.isClickPicture = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.showDetail = true;
|
|
|
+ this.detailTitle = "图片预览";
|
|
|
+ this.getDetailData(val, type);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 显示附件详情
|
|
|
+ */
|
|
|
+ showReportDetail(val, type, e) {
|
|
|
+ if (type === "equip") {
|
|
|
+ if (!val.attachments_num) {
|
|
|
+ this.isClickPicture = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!val.file_type || !val.file_type_id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!val.attachmentsNum) {
|
|
|
+ this.isClickPicture = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.accessoryPos = {
|
|
|
+ top: e.clientY + 5,
|
|
|
+ left: e.clientX - 360 - 5,
|
|
|
+ };
|
|
|
+ this.showAccessory = true;
|
|
|
+ this.isClickAccessory = true;
|
|
|
+ this.detailTitle = "附件预览";
|
|
|
+ this.getDetailData(val, type);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取图片/报告详情
|
|
|
+ */
|
|
|
+ getDetailData(val, type) {
|
|
|
+ let param = {
|
|
|
+ assetnum: this.assetnum,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ file_type: type === "equip" ? val.file_type : val.type,
|
|
|
+ // file_type: 0,
|
|
|
+ file_type_id: type === "equip" ? val.file_type_id : val.id,
|
|
|
+ // file_type_id: this.detailTitle === "图片预览" ?2914 : 1136,
|
|
|
+ // file_type_id: 9886,
|
|
|
+ type: this.detailTitle === "图片预览" ? 0 : 1,
|
|
|
+ };
|
|
|
+ queryDetailData("/data/base/queryFileDetails", param).then((res) => {
|
|
|
+ const { result, data } = res;
|
|
|
+ if (result === "success") {
|
|
|
+ let newData = [];
|
|
|
+ _.forEach(data, (item, index) => {
|
|
|
+ newData.push({
|
|
|
+ id: item.id,
|
|
|
+ url: item.urlname,
|
|
|
+ isActive: index === 0,
|
|
|
+ name: item.description,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ if (this.detailTitle === "图片预览") {
|
|
|
+ this.pictureList = newData;
|
|
|
+ if (this.pictureList.length > 0) {
|
|
|
+ this.curImg = this.pictureList[0];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.accessoryList = newData;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换当前预览大图
|
|
|
+ */
|
|
|
+ changeCurImg(id) {
|
|
|
+ _.map(this.pictureList, (o) => {
|
|
|
+ return (o.isActive = o.id === id);
|
|
|
+ });
|
|
|
+ this.curImg = _.find(this.pictureList, (o) => {
|
|
|
+ return o.isActive;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+.core-device-report {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .main-left {
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 14px;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ width: 247px;
|
|
|
+ border-top: 1px solid #e4e6e7;
|
|
|
+ border-right: 1px solid #e4e6e7;
|
|
|
+ .system-select {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .item-content {
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 21px;
|
|
|
+ padding-top: 7px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid #e4e6e7;
|
|
|
+ cursor: pointer;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .first-row {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > div:first-child {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1f2429;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ > div:nth-of-type(2) {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #cd981d;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sec-row {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ > div:first-child {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1f2429;
|
|
|
+ line-height: 19px;
|
|
|
+ > span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #646c73;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // >div:nth-of-type(2){
|
|
|
+ // padding-left: 8px;
|
|
|
+ // padding-right: 8px;
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: #0065B3;
|
|
|
+ // line-height: 22px;
|
|
|
+ // background: #E1F2FF;
|
|
|
+ // }
|
|
|
+ .abnormal {
|
|
|
+ margin-left: 11px;
|
|
|
+ padding-left: 3px;
|
|
|
+ padding-right: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f54e45 !important;
|
|
|
+ background: #fde3e2 !important;
|
|
|
+ border-radius: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .system-content {
|
|
|
+ .active {
|
|
|
+ background: #e5eef5;
|
|
|
+ border-radius: 2px;
|
|
|
+ .first-row > div:first-child,
|
|
|
+ .sec-row > div {
|
|
|
+ color: #025baa;
|
|
|
+ > span {
|
|
|
+ color: #025baa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-right {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 13px;
|
|
|
+ padding-top: 13px;
|
|
|
+ padding-bottom: 25px;
|
|
|
+ overflow: auto;
|
|
|
+ .search-container {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .page {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog {
|
|
|
+ min-height: 600px;
|
|
|
+ }
|
|
|
+ .detail-container {
|
|
|
+ display: flex;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+ .pictures-menu {
|
|
|
+ margin-right: 21px;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ padding-right: 5px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ .item {
|
|
|
+ cursor: pointer;
|
|
|
+ > img {
|
|
|
+ width: 180px;
|
|
|
+ border: 4px solid rgba(245, 246, 247, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 180px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1f2429;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ &:not(:last-of-type) {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .active > img {
|
|
|
+ border-color: rgba(31, 35, 41, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active > img {
|
|
|
+ border-color: rgba(31, 35, 41, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cur-img-container {
|
|
|
+ padding: 20px;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f6f7;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ > img {
|
|
|
+ max-width: 730px;
|
|
|
+ max-height: 530px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .accessory-container {
|
|
|
+ padding-top: 4px;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ width: 360px;
|
|
|
+ max-height: 166px;
|
|
|
+ overflow: auto;
|
|
|
+ position: fixed;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid rgba(228, 229, 231, 1);
|
|
|
+ z-index: 5000;
|
|
|
+ > div > a {
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 12px;
|
|
|
+ display: block;
|
|
|
+ height: 38px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 38px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:hover {
|
|
|
+ background: #f5f6f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|