|
@@ -1,16 +1,350 @@
|
|
|
<template>
|
|
|
- <div style="margin: 0px 15px"></div>
|
|
|
+ <div style="margin: 0px 15px">
|
|
|
+ <el-dialog
|
|
|
+ class="recorddetail-select"
|
|
|
+ style="font-weight: 600"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ title="测试"
|
|
|
+ width="900px"
|
|
|
+ @close="close"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="recorddetail-span">
|
|
|
+ <span>(第1次)</span>
|
|
|
+ 巡检开始:2021-10-20 18:00
|
|
|
+ <span style="color: red">(巡检中)</span>
|
|
|
+ </div>
|
|
|
+ <div class="recorddetail-top">
|
|
|
+ <div class="recorddetail-flex">
|
|
|
+ <div>
|
|
|
+ <i class="recorddetail-icon recorddetail-stationIcon"></i>
|
|
|
+ <div>
|
|
|
+ <span>1</span>
|
|
|
+ <span>站点数</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="recorddetail-icon recorddetail-itemIcon"></i>
|
|
|
+ <div>
|
|
|
+ <span>3</span>
|
|
|
+ <span>巡检设备数</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="recorddetail-icon recorddetail-exceptionIcon"></i>
|
|
|
+ <div>
|
|
|
+ <span>0</span>
|
|
|
+ <span>异常设备</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="recorddetail-icon recorddetail-dtsIcon"></i>
|
|
|
+ <div>
|
|
|
+ <span>0</span>
|
|
|
+ <span>缺陷</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="recorddetail-body">
|
|
|
+ <div class="recorddetail-infoGroup">
|
|
|
+ <div>
|
|
|
+ <span>计划计划编号:</span>
|
|
|
+ <span>RIP23_211018001</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>巡检公司:</span>
|
|
|
+ <span>伍继智能</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>负责人:</span>
|
|
|
+ <span>蒋跃宗</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>巡检班组:</span>
|
|
|
+ <span>嘉定组</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>巡检人员:</span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="recorddetail-separatorTitle">巡检结果</div>
|
|
|
+
|
|
|
+ <div class="recorddetail-resultWrapper">
|
|
|
+ <div class="recorddetail-result">
|
|
|
+ <div class="recorddetail-stationName">
|
|
|
+ <div>测试站点</div>
|
|
|
+ <div class="divIcon">
|
|
|
+ <span role="img" aria-label="star" class="anticon anticon-star">
|
|
|
+ <svg-icon iconClass="stationName"></svg-icon>
|
|
|
+ </span>
|
|
|
+ 巡检中
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="recorddetail-items">
|
|
|
+ <div>
|
|
|
+ <span>3</span>
|
|
|
+ <span>巡检设备数</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="">0</span>
|
|
|
+ <span>异常设备</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="">0</span>
|
|
|
+ <span>缺陷</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="recorddetail-detailBtn">
|
|
|
+ <a @click="iconContent">
|
|
|
+ {{ iconTitle }}
|
|
|
+ <span
|
|
|
+ role="img"
|
|
|
+ aria-label="caret-up"
|
|
|
+ class="anticon anticon-caret-up"
|
|
|
+ >
|
|
|
+ <svg-icon
|
|
|
+ iconClass="detailBtn1"
|
|
|
+ v-if="!iconBool"
|
|
|
+ ></svg-icon>
|
|
|
+ <svg-icon
|
|
|
+ iconClass="detailBtn2"
|
|
|
+ v-if="iconBool"
|
|
|
+ ></svg-icon>
|
|
|
+ </span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 12px" v-if="!iconBool">
|
|
|
+ <div style="margin: 8px 0px">
|
|
|
+ <strong>巡检设备:测试2</strong>
|
|
|
+ <span class="antd-pro-pages-inspect-recorddetail-headerItem">
|
|
|
+ 设备状态:
|
|
|
+ <span>待巡检</span>
|
|
|
+ </span>
|
|
|
+ <div style="float: right">
|
|
|
+ <span class="antd-pro-pages-inspect-recorddetail-headerItem">
|
|
|
+ 检查项数:1
|
|
|
+ </span>
|
|
|
+ <span class="antd-pro-pages-inspect-recorddetail-headerItem">
|
|
|
+ 异常项:0
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 16px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="close">取消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { defineComponent, ref } from 'vue'
|
|
|
+import { defineComponent, ref, watchEffect } from 'vue'
|
|
|
+import { ElMessageBox } from 'element-plus'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'patolPlan',
|
|
|
components: {},
|
|
|
- props: {},
|
|
|
- setup() {
|
|
|
+ props: {
|
|
|
+ flag: Boolean,
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
ref
|
|
|
- return {}
|
|
|
+ const dialogVisible = ref(false)
|
|
|
+
|
|
|
+ const handleClose = (done) => {
|
|
|
+ ElMessageBox.confirm('Are you sure to close this dialog?')
|
|
|
+ .then(() => {
|
|
|
+ done()
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // catch error
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const close = () => {
|
|
|
+ context.emit('dialog', false)
|
|
|
+ dialogVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const iconCont = ref(1)
|
|
|
+ const iconBool = ref(false)
|
|
|
+ const iconTitle = ref('隐藏详情')
|
|
|
+ const iconContent = () => {
|
|
|
+ if (iconCont.value == 1) {
|
|
|
+ iconBool.value = true
|
|
|
+ iconTitle.value = '显示详情'
|
|
|
+ iconCont.value = 2
|
|
|
+ } else {
|
|
|
+ iconBool.value = false
|
|
|
+ iconTitle.value = '隐藏详情'
|
|
|
+ iconCont.value = 1
|
|
|
+ }
|
|
|
+ console.log('')
|
|
|
+ }
|
|
|
+
|
|
|
+ watchEffect((fn, options) => {
|
|
|
+ fn, options
|
|
|
+ dialogVisible.value = props.flag
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ close,
|
|
|
+ iconBool,
|
|
|
+ iconCont,
|
|
|
+ iconTitle,
|
|
|
+ iconContent,
|
|
|
+ dialogVisible,
|
|
|
+ handleClose,
|
|
|
+ }
|
|
|
},
|
|
|
})
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.recorddetail-span {
|
|
|
+ margin-top: -25px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.recorddetail-top {
|
|
|
+ background: url('~@/assets/images/record-bg2.png') 50% no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ margin: 0px -25px;
|
|
|
+ .recorddetail-flex {
|
|
|
+ height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 50px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ flex: 1 1;
|
|
|
+ justify-content: center;
|
|
|
+ > div {
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20px;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ span:first-child {
|
|
|
+ font-size: 23px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ font-size: 13px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recorddetail-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ display: block;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .recorddetail-stationIcon {
|
|
|
+ background: url('~@/assets/images/record-station.png') 50% no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .recorddetail-itemIcon {
|
|
|
+ background: url('~@/assets/images/record-item.png') 50% no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .recorddetail-exceptionIcon {
|
|
|
+ background: url('~@/assets/images/record-exception.png') 50% no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .recorddetail-dtsIcon {
|
|
|
+ background: url('~@/assets/images/record-dts.png') 50% no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.recorddetail-body {
|
|
|
+ margin-top: 20px;
|
|
|
+ .recorddetail-infoGroup {
|
|
|
+ > div {
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #666;
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ span:first-child {
|
|
|
+ color: #000;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recorddetail-separatorTitle {
|
|
|
+ width: 100%;
|
|
|
+ color: #22a97e;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 12px 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .recorddetail-resultWrapper {
|
|
|
+ .recorddetail-result {
|
|
|
+ background-color: #e9ebf4;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 81px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .recorddetail-stationName {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ width: 200px;
|
|
|
+ background-color: #d5d6e3;
|
|
|
+ padding: 12px;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ .divIcon {
|
|
|
+ color: rgb(76, 142, 250);
|
|
|
+ font-size: 15px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recorddetail-items {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ flex: 1 1;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ text-align: center;
|
|
|
+ > span:first-child {
|
|
|
+ font-size: 19px;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ > span:last-child {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #a0a2bf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recorddetail-detailBtn {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6c7fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|