123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480 |
- <!-- 核心设备报表 -->
- <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='"请选择"'
- />
- <div class='system-content'>
- <div
- v-for='(item) in systemContentData'
- :key='"key_" + item.id'
- class='item-content'
- :class='{"active": item.isActive}'
- @click='changeEquipment(item.id)'
- >
- <div class='first-row'>
- <div>{{item.name}}</div>
- <div>{{item.isMaintenance?'维保中' : ''}}</div>
- </div>
- <div class='sec-row'>
- <div>
- {{item.num}}
- <span>台</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' />
- </div>
- <el-table :data='tableData' style='width: 100%;margin-bottom: 63px;' @row-click='showEquipmentStatus'>
- <el-table-column label='序号' type='index' :index='indexMethod'></el-table-column>
- <el-table-column prop='sbjc' label='设备简称'></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">{{ scope.row.photos_num || scope.row.photos_num === 0?(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'
- >{{ scope.row.attachments_num || scope.row.attachments_num === 0?(scope.row.attachments_num+ '张') : '—'}}</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='交换机-照明系统' :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">{{ scope.row.photosNum || scope.row.photosNum === 0?(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'
- >{{ scope.row.attachmentsNum || scope.row.attachmentsNum === 0?(scope.row.attachmentsNum+ '张') : '—'}}</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>
- <el-dialog :title='detailTitle' :visible.sync='showDetail' width='1260px'>
- <div class='detail-container'>
- <div class='pictures-menu'></div>
- </div>
- </el-dialog>
- </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 {
- 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, // 弹窗显示状态
- // 核心设备实例
- assetnum: null, // 设备台账编码
- historyTableData: [], // 核心设备实例的所有历史事项信息
- dialogTime: null, // 弹框内的时间
- hisCurPage: 1, // 当前页码
- hisPageSize: 8, // 当前页码
- hisTotal: 0, // 总条数
- startTime: null, // 开始时间
- endTime: null, // 结束事件
- showDetail: false, // 显示照片、报告详情
- detailTitle: '图片预览' // 弹窗名称
- }
- },
- components: {
- Select,
- Input
- },
- computed: {},
- mounted() {
- this.getSystemList()
- this.getEquipmentOfSystem()
- this.getTableData()
- },
- 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
- }
- })
- },
- /**
- * 切换系统名称
- */
- changeCurSystem(val) {
- console.log('val', val)
- },
- /**
- * 获取系统下的设备
- */
- getEquipmentOfSystem() {
- let param = {
- plazaId: 1000423,
- ccode: 1002347
- }
- if (this.systemId !== '') {
- param.smsxt = this.systemId
- }
- queryEquipmentList('/data/home/querySystemCard', param).then(res => {
- console.log('res', res)
- })
- },
- /**
- * 切换系统下的设备
- */
- changeEquipment(id) {
- _.map(this.systemContentData, o => {
- return (o.isActive = o.id === id)
- })
- },
- /**
- * 获取表数据
- */
- getTableData() {
- let query = {
- category_code: 'gdc'
- }
- queryTableData(`/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}`, query).then(res => {
- const { result, count, data } = res
- if (result === 'success') {
- this.tatol = count
- this.tableData = data
- }
- })
- },
- /**
- * 表第一列序号
- */
- indexMethod(index) {
- return index + 1
- },
- /**
- * 切换页码
- */
- changeTablePage(page) {
- this.curPage = page
- this.getTableData()
- },
- /**
- * 显示设备实例的维保、专维等状态
- */
- showEquipmentStatus(row, column, e) {
- setTimeout(() => {
- if (this.showDetail) return
- this.dialogTableVisible = true
- this.assetnum = row.assetnum
- this.initTimePicker()
- }, 36)
- },
- /**
- * 获取核心设备实例的所有历史事项信息
- */
- getEquipmentHistoryMsg() {
- this.historyTableData = []
- let param = {
- page: this.hisCurPage,
- size: this.hisPageSize,
- // assetnum: this.assetnum,
- assetnum: 8952,
- // startDate: this.startTime,
- startDate: 20180101000000,
- // endDate: this.endTime
- endDate: 20180201000000
- }
- 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
- })
- }
- })
- },
- /**
- * 初始化时间选择器
- */
- 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) {
- console.log('val', val)
- // if (!val.file_type || !val.file_type_id) {
- // return
- // }
- this.showDetail = true
- this.detailTitle = '图片预览'
- this.getDetailData(val)
- },
- /**
- * 获取图片/报告详情
- */
- getDetailData(val) {
- let param = {
- file_type: 1, // val.file_type
- file_type_id: 2467908, // val.file_type_id
- type: this.detailTitle === '图片预览' ? 0 : 1
- }
- queryDetailData('/data/base/queryFileDetails', param).then(res => {
- console.log('res', res)
- })
- }
- }
- }
- </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;
- .search-container {
- margin-bottom: 12px;
- }
- .page {
- display: flex;
- justify-content: flex-end;
- }
- .el-dialog {
- min-height: 600px;
- }
- .detail-container {
- display: flex;
- min-height: 600px;
- }
- .pictures-menu {
- margin-right: 21px;
- width: 180px;
- }
- }
- }
- </style>
|