|
@@ -0,0 +1,599 @@
|
|
|
+<template>
|
|
|
+ <div class="tableDisplay">
|
|
|
+ <div class="header">
|
|
|
+ <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
|
|
|
+ <span :title="`${name} - ${code}`" class="details-title"><b>{{name}} - {{code}}</b></span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="content-keyPoint">
|
|
|
+ <exhibitionCrux :exhibitionCrux="exhibitionCrux" :type="type" @cruxSuccess="cruxSuccess"/>
|
|
|
+ </div>
|
|
|
+ <div class="content-showType">
|
|
|
+ <selectRadio
|
|
|
+ :selectRadio="selectRadio"
|
|
|
+ @changeRadio="changeRadio"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="content-point">
|
|
|
+ <div class="content-point-left">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div>
|
|
|
+ <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div class="content-point-right">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div>
|
|
|
+ <exhibitionEnergy :exhibitionEnergy="exhibitionEnergy"/>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="content-repair">
|
|
|
+ <exhibitionMaintain :exhibitionMaintain="exhibitionMaintain"/>
|
|
|
+ </div>
|
|
|
+ <div class="content-media">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <div>
|
|
|
+ <exhibitionImage :exhibitionImage="exhibitionImage" v-show="isShowImage"/>
|
|
|
+ <exhibitionVideo :exhibitionVideo="exhibitionVideo" v-show="isShowVideo"/>
|
|
|
+ <exhibitionFile :exhibitionFile="exhibitionFile" v-show="isShowFile"/>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <el-select size="mini" style="float:right;margin:7px 30px 0 0" v-model="id" @change="handleChangeExample" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in list"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
|
|
|
+ import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
|
|
|
+ import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
|
|
|
+ import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
|
|
|
+ import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
|
|
|
+ import exhibitionEnergy from "@/components/ledger/details/detail/exhibitionEnergy";
|
|
|
+ import exhibitionMaintain from "@/components/ledger/details/detail/exhibitionMaintain";
|
|
|
+ import selectRadio from "@/components/ledger/details/detail/selectRadio";
|
|
|
+ import tools from "@/utils/scan/tools"
|
|
|
+ import {BeatchQueryParam, getDataDictionary, queryEquip} from "@/api/scan/request";
|
|
|
+ import {mapGetters} from "vuex";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "deviceDetails",
|
|
|
+ components: {
|
|
|
+ exhibitionBaseInformation,
|
|
|
+ exhibitionFile,
|
|
|
+ exhibitionVideo,
|
|
|
+ exhibitionImage,
|
|
|
+ exhibitionMaintain,
|
|
|
+ selectRadio,
|
|
|
+ exhibitionCrux,
|
|
|
+ exhibitionEnergy
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = this.$route.query.equipId;
|
|
|
+ this.name = this.$route.query.equipName;
|
|
|
+ this.code = this.$route.query.equipCode;
|
|
|
+ this.type = this.$route.query.type;
|
|
|
+ this.list = this.$route.query.data;
|
|
|
+ this.getData();
|
|
|
+ console.log(this.$route.query)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("layout", ["projectId", "secret", "userId"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '', //当前设备id
|
|
|
+ name: '', //当前设备本地名称
|
|
|
+ code: '', //当前设备的本地编码
|
|
|
+ type: '', //设备类型
|
|
|
+ list: [], //设备列表
|
|
|
+ pointData: [], //信息点数据
|
|
|
+ exampleData: {}, //实例数据
|
|
|
+ currentRadio: '',//当前选中的select
|
|
|
+ criterias: [], //动态参数
|
|
|
+ selectRadio: {
|
|
|
+ information: '设备信息点',
|
|
|
+ initRadio: '1',
|
|
|
+ radioList: [
|
|
|
+ {
|
|
|
+ value: '显示需采集信息点',
|
|
|
+ label: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '显示有值信息点',
|
|
|
+ label: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '显示全部信息点',
|
|
|
+ label: '3'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ exhibitionBaseInformation: {
|
|
|
+ information: {}
|
|
|
+ },
|
|
|
+ exhibitionEnergy: {
|
|
|
+ title: '能耗信息',
|
|
|
+ firstName:'',
|
|
|
+ dynamic: [],
|
|
|
+ },
|
|
|
+ exhibitionMaintain: {
|
|
|
+ title: '维修/维保记录'
|
|
|
+ },
|
|
|
+ exhibitionFile: {
|
|
|
+ title: '文件',
|
|
|
+ list: {}
|
|
|
+ },
|
|
|
+ exhibitionCrux: {
|
|
|
+ title: '关键信息点:',
|
|
|
+ cruxArray: [],
|
|
|
+ allMessage: [],//全部信息点
|
|
|
+ },
|
|
|
+ exhibitionImage: {
|
|
|
+ title: '图片',
|
|
|
+ list: {}
|
|
|
+ },
|
|
|
+ exhibitionVideo: {
|
|
|
+ title: '视频',
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ instance: {},//实例信息处理
|
|
|
+ isShowImage: true,
|
|
|
+ isShowVideo: true,
|
|
|
+ isShowFile: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deepCopy(obj) {
|
|
|
+ return JSON.parse(JSON.stringify(obj))
|
|
|
+ },
|
|
|
+ cruxSuccess(){
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ // 获取表头和实例数据(动态数据在组件中获取,在此格式化请求参数)
|
|
|
+ getData() {
|
|
|
+ let params1 = {
|
|
|
+ data: {
|
|
|
+ Orders: "sort asc",
|
|
|
+ PageNumber: 1,
|
|
|
+ PageSize: 1000
|
|
|
+ },
|
|
|
+ type: this.type
|
|
|
+ }, params2 = {
|
|
|
+ Filters: `EquipID='${this.id}'`,
|
|
|
+ };
|
|
|
+ let promise1 = new Promise((resolve, reject) => {
|
|
|
+ getDataDictionary(params1, res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let promise2 = new Promise((resolve, reject) => {
|
|
|
+ queryEquip(params2, res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ Promise.all([promise1, promise2]).then(values => {
|
|
|
+ this.pointData = values[0].Content;
|
|
|
+ this.exampleData = values[1].Content[0];
|
|
|
+ this.name = this.exampleData.EquipLocalName?this.exampleData.EquipLocalName:this.exampleData.EquipName?this.exampleData.EquipName:'';
|
|
|
+ this.code = this.exampleData.EquipLocalID?this.exampleData.EquipLocalID:'';
|
|
|
+ let obj = this.deepCopy(values[1].Content[0]);
|
|
|
+ obj = tools.flattenKeys(obj);
|
|
|
+ this.instance = obj;
|
|
|
+ this.handleRadios(1)
|
|
|
+ this.handleEnclosure() //处理图片视频文件信息
|
|
|
+ this.pointData.forEach(item => {
|
|
|
+ if (item.InputMode == "L" || item.InputMode == "L1" || item.InputMode == "L2" || item.InputMode == "M") {
|
|
|
+ let cur = tools.dataForKey(this.exampleData, item.Path);
|
|
|
+ if (cur) {
|
|
|
+ this.criterias.push({
|
|
|
+ id: this.exampleData.EquipID,
|
|
|
+ code: item.InfoPointCode
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let params = { //获取动态参数
|
|
|
+ secret: this.secret,
|
|
|
+ ProjId: this.projectId,
|
|
|
+ data: {
|
|
|
+ criterias: this.criterias
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.criterias.length) {
|
|
|
+ BeatchQueryParam(params, res => {
|
|
|
+ res.Content && res.Content.map(child => {
|
|
|
+ this.pointData.forEach(head => {
|
|
|
+ if (head.InfoPointCode == child.code) {
|
|
|
+ console.log(head.FirstName,child,'==')
|
|
|
+ this.exhibitionEnergy.firstName = head.FirstName
|
|
|
+ this.exhibitionEnergy.dynamic.push({
|
|
|
+ FirstName:head.FirstName,
|
|
|
+ InfoPointCode: head.InfoPointCode,
|
|
|
+ InfoPointName: head.InfoPointName,
|
|
|
+ Path: head.Path,
|
|
|
+ value: child.value,
|
|
|
+ data: child.data || '--',
|
|
|
+ receivetime: child.receivetime || '',
|
|
|
+ error: child.error || '',
|
|
|
+ Unit: head.Unit || ''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEnclosure() {
|
|
|
+ //图片文件处理,脱离radio控制
|
|
|
+ let isList = this.pointData
|
|
|
+ let isArr = []
|
|
|
+ isList.map(j => {
|
|
|
+ if (this.instance.hasOwnProperty(j.Path)) {
|
|
|
+ return {
|
|
|
+ ...j,
|
|
|
+ value: this.instance[j.Path]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ isArr = isList.filter(k => k.value)
|
|
|
+ this.handlePicList(isArr)
|
|
|
+ this.handleFileList(isArr)
|
|
|
+ },
|
|
|
+ handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
|
|
|
+ let arr = []
|
|
|
+ //关键信息点
|
|
|
+ this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.KeyWord)
|
|
|
+ this.exhibitionCrux.cruxArray.map(i => {
|
|
|
+ if (this.instance.hasOwnProperty(i.Path)) {
|
|
|
+ return {
|
|
|
+ ...i,
|
|
|
+ value: this.instance[i.Path]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (val == 1) { //需采集信息
|
|
|
+ arr = this.pointData.filter(i => i.Visible)
|
|
|
+ // // 图片和的处理
|
|
|
+ // this.handlePicList(arr)
|
|
|
+ // // 文件处理
|
|
|
+ // this.handleFileList(arr)
|
|
|
+
|
|
|
+ } else if (val == 2) { //有值信息点
|
|
|
+ let list = this.pointData
|
|
|
+ list.map(j => {
|
|
|
+ if (this.instance.hasOwnProperty(j.Path)) {
|
|
|
+ return {
|
|
|
+ ...j,
|
|
|
+ value: this.instance[j.Path]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ arr = list.filter(k => k.value)
|
|
|
+ // this.handlePicList(arr, 2)
|
|
|
+ // this.handleFileList(arr, 2)
|
|
|
+
|
|
|
+ } else { //全部信息点
|
|
|
+ arr = this.pointData
|
|
|
+ // this.handlePicList(arr)
|
|
|
+ // this.handleFileList(arr)
|
|
|
+ }
|
|
|
+ this.displayData(arr)
|
|
|
+ },
|
|
|
+ handlePicList(arr) {
|
|
|
+ let picObject = {}
|
|
|
+ //处理数据格式
|
|
|
+ arr.map(i => {
|
|
|
+ if (i.InputMode == 'F2') {
|
|
|
+ switch (i.Path) {
|
|
|
+ case 'LedgerParam.PhotoDoc.Drawing':
|
|
|
+ case 'LedgerParam.Siteinstall.InstallPic':
|
|
|
+ case 'LedgerParam.Siteinstall.InstallDrawing':
|
|
|
+ case 'LedgerParam.PhotoDoc.Nameplate':
|
|
|
+ if (this.instance.hasOwnProperty(i.Path)) {
|
|
|
+ i.PicList = this.instance[i.Path]
|
|
|
+ }
|
|
|
+ if (picObject[i.InfoPointName]) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ picObject[i.InfoPointName] = []
|
|
|
+ }
|
|
|
+ picObject[i.InfoPointName].push({
|
|
|
+ ...i,
|
|
|
+ })
|
|
|
+ break;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ //展示图片
|
|
|
+ this.exhibitionImage.list = picObject
|
|
|
+ let isArray = [] //获取图片数组
|
|
|
+ for (let i in picObject) {
|
|
|
+ if (Array.isArray(picObject[i])) {
|
|
|
+ let list = picObject[i]
|
|
|
+ list.forEach(i => {
|
|
|
+ if (i.PicList) {
|
|
|
+ isArray.push(...i.PicList)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let video = isArray.filter(i => i.Type != 'image' &&i.type != 'image' )
|
|
|
+ this.exhibitionVideo.list = video
|
|
|
+ //判断是否显示图片组件
|
|
|
+ this.isShowImage = isArray.length ? true : false
|
|
|
+ //判断是否显示video组件
|
|
|
+ this.isShowVideo = video.length ? true : false
|
|
|
+
|
|
|
+ },
|
|
|
+ handleFileList(arr) {
|
|
|
+ let picObject = {}
|
|
|
+ //处理数据格式
|
|
|
+ arr.map(i => {
|
|
|
+ if (i.InputMode == 'F2') {
|
|
|
+ switch (i.Path) {
|
|
|
+ case 'LedgerParam.InsuranceDoc.InsuranceFile':
|
|
|
+ case 'LedgerParam.PhotoDoc.Archive':
|
|
|
+ case 'LedgerParam.Siteinstall.CheckReport':
|
|
|
+ if (this.instance.hasOwnProperty(i.Path)) {
|
|
|
+ i.fileList = this.instance[i.Path]
|
|
|
+ }
|
|
|
+ if (picObject[i.InfoPointName]) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ picObject[i.InfoPointName] = []
|
|
|
+ }
|
|
|
+ picObject[i.InfoPointName].push({
|
|
|
+ ...i,
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //展示文件
|
|
|
+ this.exhibitionFile.list = picObject
|
|
|
+ let isArray = [] //获取文件数组
|
|
|
+ for (let i in picObject) {
|
|
|
+ if (Array.isArray(picObject[i])) {
|
|
|
+ let list = picObject[i]
|
|
|
+ list.forEach(i => {
|
|
|
+ if (i.fileList) {
|
|
|
+ isArray.push(...i.fileList)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //判断是否显示文件组件
|
|
|
+ this.isShowFile = isArray.length ? true : false
|
|
|
+
|
|
|
+ },
|
|
|
+ changeRadio(val) { //1,需采集,2,有值,3,全部
|
|
|
+ this.handleRadios(val)
|
|
|
+ this.currentRadio = val
|
|
|
+ },
|
|
|
+ formatDate(str) {
|
|
|
+ if(str) {
|
|
|
+ if(str.includes('-')) {
|
|
|
+ return str
|
|
|
+ }else {
|
|
|
+ return str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2) + ":" +str.substr(10,2) + ":"+str.substr(12,2)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ displayData(arr) {//对数据进行处理传给组件展示
|
|
|
+ const result = {}
|
|
|
+ arr.forEach(i => {
|
|
|
+ if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
|
|
|
+ i.value = this.instance[i.Path]
|
|
|
+ }
|
|
|
+ if (i.InputMode == 'C5') {
|
|
|
+ if (this.instance.hasOwnProperty(i.Path)) {
|
|
|
+ let time = this.instance[i.Path]
|
|
|
+ i.value = this.formatDate(time)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (i.DataSource && i.DataSource.length) {
|
|
|
+ let source = JSON.parse(i.DataSource)
|
|
|
+ //判断输入类型
|
|
|
+ if (i.InputMode == 'D1L') {
|
|
|
+ let d1l = tools.formatDataSource(i.DataSource)
|
|
|
+ d1l.forEach(k => {
|
|
|
+ if (k.Code == this.instance[i.Path]) {
|
|
|
+ i.value = k.Name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (i.InputMode == 'D2' || i.InputMode == 'C6') {
|
|
|
+ if (this.instance.hasOwnProperty(i.Path)) {
|
|
|
+ if (!Array.isArray(this.instance[i.Path])) {
|
|
|
+ let transArray = this.instance[i.Path].split(',')
|
|
|
+ i.value = source.filter(item => transArray.includes(item.Code)).map(item => item.Name).join(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ source.forEach(j => {
|
|
|
+ if (j.Code == this.instance[i.Path]) {
|
|
|
+ console.log(j.Name)
|
|
|
+ i.value = j.Name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ switch (i.InputMode) {
|
|
|
+ case "L":
|
|
|
+ case "L1":
|
|
|
+ case "L2":
|
|
|
+ case "M":
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
|
|
|
+ result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
|
|
|
+ Path: i.Path,
|
|
|
+ InfoPointName: i.InfoPointName,
|
|
|
+ InfoPointCode: i.InfoPointCode,
|
|
|
+ Value: i.value,
|
|
|
+ Visible: i.Visible,
|
|
|
+ KeyWord: i.KeyWord,
|
|
|
+ InputMode:i.InputMode
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
|
|
|
+ paths: [{
|
|
|
+ Path: i.Path,
|
|
|
+ InfoPointName: i.InfoPointName,
|
|
|
+ InfoPointCode: i.InfoPointCode,
|
|
|
+ Value: i.value,
|
|
|
+ Visible: i.Visible,
|
|
|
+ KeyWord: i.KeyWord,
|
|
|
+ InputMode:i.InputMode
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ this.exhibitionBaseInformation.information = result
|
|
|
+ this.exhibitionCrux.allMessage = result
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ this.$router.push({
|
|
|
+ name: "facilityLedger",
|
|
|
+ params: {
|
|
|
+ deviceId: this.type
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换实例
|
|
|
+ handleChangeExample() {
|
|
|
+ this.selectRadio.initRadio = '1'
|
|
|
+ this.getData();
|
|
|
+ this.exhibitionEnergy.dynamic = []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ projectId() {
|
|
|
+ this.$router.push({path: "/ledger/facility"})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ @bgc: #fff;
|
|
|
+ .tableDisplay {
|
|
|
+ .header {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ .details-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 20px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100% - 95px);
|
|
|
+ .content-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ .content-keyPoint {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: @bgc;
|
|
|
+ }
|
|
|
+ .content-showType {
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-bottom: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: @bgc;
|
|
|
+ }
|
|
|
+ .content-point {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ height: calc(100% - 160px);
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: @bgc;
|
|
|
+
|
|
|
+ .content-point-left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-point-right {
|
|
|
+ width: 300px;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right {
|
|
|
+ width: 400px;
|
|
|
+ margin-left: 10px;
|
|
|
+ .content-repair {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background: @bgc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .content-media {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ background: @bgc;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ margin-top: 5px;
|
|
|
+ height: 45px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|