|
|
@@ -0,0 +1,772 @@
|
|
|
+<template>
|
|
|
+ <div class="upload">
|
|
|
+ <div class="upload-wrapper left">
|
|
|
+ <header class="upload-header">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="manageTitle">{{ title2 }}</div>
|
|
|
+ <div>
|
|
|
+ <el-date-picker v-model="input" size="small" value-format="yyyy-MM-dd" type="date"
|
|
|
+ :picker-options="dateRangePickerOptions" placeholder="选择日期" @change="dateChange()" />
|
|
|
+
|
|
|
+ <el-button class="btn-refresh" type="primary" icon="el-icon-refresh" @click="getTableData()" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <main class="upload-main">
|
|
|
+ <div class="upload-main-content flex-wrap">
|
|
|
+ <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)" class="upload-main-content-left">
|
|
|
+ <el-table :data="tableData" border stripe fit height="100%" class="upload-table">
|
|
|
+ <el-table-column v-for="column in tableColumns" :key="column.key" :prop="column.prop"
|
|
|
+ :label="column.label">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip v-if="column.showTooltip" class="item" effect="dark" placement="top-start">
|
|
|
+ <div slot="content" class="tooltip-content">
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="tooltip-trigger">
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span v-else>
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="hd-td">
|
|
|
+ <el-button size="small" @click="remove(scope.row)" type="danger">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <NoData :image-width="230" :image-height="160" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ <div class="upload-wrapper right">
|
|
|
+ <header class="upload-header">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="manageTitle">{{ title }}</div>
|
|
|
+ <div>
|
|
|
+ <el-select style="width: 80px;margin-right: 5px;" v-model="typeValue" @change="typeChange()" size="small"
|
|
|
+ placeholder="类型">
|
|
|
+ <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker style="width: 140px;margin-right: 5px;" v-model="input" size="small"
|
|
|
+ value-format="yyyy-MM-dd" type="date" :picker-options="dateRangePickerOptions" placeholder="日期"
|
|
|
+ @change="dateChange()" />
|
|
|
+ <el-select style="width: 100px;margin-right: 5px;" filterable v-model="airPortValue" size="small"
|
|
|
+ placeholder="航站" @change="airPortChange()">
|
|
|
+ <el-option v-for="item in airPortOptions" :key="item.IATACode" :label="item.IATACode"
|
|
|
+ :value="item.IATACode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select style="width: 100px;margin-right: 5px;" clearable filterable v-model="flightValue"
|
|
|
+ @clear="flightClear()" size="small" placeholder="航班" @change="flightChange()">
|
|
|
+ <el-option v-for="item in flightOptions" :key="item.carrierFlights" :label="item.carrierFlights"
|
|
|
+ :value="item.carrierFlights">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select style="width: 140px;" clearable filterable v-model="baggageValue" size="small"
|
|
|
+ @clear="baggageClear()" v-if="typeValue=='1'" placeholder="行李牌号" @change="baggageChange()">
|
|
|
+ <el-option v-for="item in baggageOptions" :key="item.luggageNum" :label="item.luggageNum"
|
|
|
+ :value="item.luggageNum">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button class="btn-refresh" type="primary" icon="el-icon-search" @click="getTableData2()" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <main class="upload-main">
|
|
|
+ <div class="upload-main-content flex-wrap">
|
|
|
+ <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)" class="upload-main-content-right">
|
|
|
+ <el-table
|
|
|
+ :data="tableData2" border stripe fit height="100%" class="upload-table">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-for="column in tableColumns2" :key="column.key" :prop="column.prop"
|
|
|
+ :label="column.label">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip v-if="column.showTooltip" class="item" effect="dark" placement="top-start">
|
|
|
+ <div slot="content" class="tooltip-content">
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="tooltip-trigger">
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span v-else>
|
|
|
+ {{
|
|
|
+ formatter(
|
|
|
+ scope.row,
|
|
|
+ scope.column,
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="hd-td">
|
|
|
+ <el-button size="small" @click="add(scope.row)" type="defult">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <NoData :image-width="230" :image-height="160" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ parseTime
|
|
|
+ } from '@/utils'
|
|
|
+ import {
|
|
|
+ UploadFile,
|
|
|
+ WhatQuery
|
|
|
+ } from '@/api/temp'
|
|
|
+ import {
|
|
|
+ newData,
|
|
|
+ moveData
|
|
|
+ } from '@/api/webApi'
|
|
|
+ import NoData from '@/components/nodata/index.vue'
|
|
|
+
|
|
|
+ const acceptTypes = ['xlsx', 'xls']
|
|
|
+ const acceptTypesStr = acceptTypes.reduce((prevStr, currStr) => {
|
|
|
+ return `${prevStr}${prevStr ? ',' : ''}.${currStr}`
|
|
|
+ }, '')
|
|
|
+
|
|
|
+ const units = ['B', 'KB', 'MB', 'GB']
|
|
|
+ const getUnit = (size, callTime = 0) => {
|
|
|
+ if (size < 1024) {
|
|
|
+ return `${size}${units[callTime]}`
|
|
|
+ }
|
|
|
+ return getUnit(size / 1024, callTime + 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'Upload',
|
|
|
+ components: {
|
|
|
+ NoData
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baggageValue: "",
|
|
|
+ baggageOptions: [],
|
|
|
+ flightValue: "",
|
|
|
+ flightOptions: [],
|
|
|
+ airPortValue: "PEK",
|
|
|
+ airPortOptions: [],
|
|
|
+ typeValue: "0",
|
|
|
+ typeOptions: [{
|
|
|
+ label: "整班",
|
|
|
+ value: "0"
|
|
|
+ }, {
|
|
|
+ label: "行李",
|
|
|
+ value: "1"
|
|
|
+ }],
|
|
|
+ title: '选择行李',
|
|
|
+ acceptTypesStr: acceptTypesStr,
|
|
|
+ totalProgressList: [],
|
|
|
+ checkedAll: false,
|
|
|
+ limit: 10,
|
|
|
+ title2: '可申报行李数据',
|
|
|
+ flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
|
|
|
+ dateRangePickerOptions: {
|
|
|
+ onPick: this.dateRangePickHandler,
|
|
|
+ disabledDate: this.dateRangeDisabled,
|
|
|
+ },
|
|
|
+ input: this.currDate,
|
|
|
+ tableColumns: [{
|
|
|
+ prop: 'carrierFlightsDate',
|
|
|
+ label: '航班日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'carrierFlights',
|
|
|
+ label: '航班号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'luggageNum',
|
|
|
+ label: '行李牌号',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableColumns2: [{
|
|
|
+ prop: 'carrierFlightsDate',
|
|
|
+ label: '航班日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'carrierFlights',
|
|
|
+ label: '航班号',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: [],
|
|
|
+ tableData2: [],
|
|
|
+ tableData2Old: [],
|
|
|
+ stateData: [],
|
|
|
+ loading: false,
|
|
|
+ loading1: false,
|
|
|
+ currentCell: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentProgressNum() {
|
|
|
+ return this.totalProgressList.reduce((prevCount, currentProgress) => {
|
|
|
+ return currentProgress.state > 0 ? prevCount : prevCount + 1
|
|
|
+ }, 0)
|
|
|
+ },
|
|
|
+ exceed() {
|
|
|
+ return this.currentProgressNum >= this.limit
|
|
|
+ },
|
|
|
+ currDate() {
|
|
|
+ return function() {
|
|
|
+ return parseTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ capData() {
|
|
|
+ const val = this.input
|
|
|
+ return this.stateData.filter(
|
|
|
+ data => !val || (data.thedate && data.thedate.includes(val))
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // watch: {
|
|
|
+ // flightDate: {
|
|
|
+ // handler () {
|
|
|
+ // this.getTableData()
|
|
|
+ // },
|
|
|
+ // deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ created() {
|
|
|
+ this.input = parseTime(new Date(), '{y}-{m}-{d}');
|
|
|
+ this.getTableData()
|
|
|
+ this.getAirPort()
|
|
|
+ this.getFlight()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ remove(row){
|
|
|
+ this.$confirm("是否移除当条可申报数据?", "提示", {
|
|
|
+ confirmButtonText: "确定", // 确认按钮文本
|
|
|
+ cancelButtonText: "取消", // 取消按钮文本
|
|
|
+ type: "warning", // 提示类型（警告）
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.removeData(row)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async removeData(row){
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await moveData({
|
|
|
+ serviceId: "8200227",
|
|
|
+ dataContent: [row],
|
|
|
+ "event": "3"
|
|
|
+ })
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ add(row){
|
|
|
+ this.$confirm("是否添加为可申报数据?", "提示", {
|
|
|
+ confirmButtonText: "确定", // 确认按钮文本
|
|
|
+ cancelButtonText: "取消", // 取消按钮文本
|
|
|
+ type: "warning", // 提示类型（警告）
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.sendData(row)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async sendData(row){
|
|
|
+ if(this.typeValue == "0"){
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await newData({
|
|
|
+ serviceId: "8200227",
|
|
|
+ dataContent: [{
|
|
|
+ "Value": {
|
|
|
+ "carrierFlights": row.carrierFlights,
|
|
|
+ "carrierFlightsDate": row.carrierFlightsDate
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ "event": "1"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await newData({
|
|
|
+ serviceId: "8200227",
|
|
|
+ dataContent: [{
|
|
|
+ "Value": {
|
|
|
+ "carrierFlights": row.carrierFlights,
|
|
|
+ "carrierFlightsDate": row.carrierFlightsDate,
|
|
|
+ "luggageNum": row.luggageNum
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ "event": "1"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ flightClear() {
|
|
|
+ if (this.typeValue == "0") {
|
|
|
+ this.tableData2 = this.tableData2Old
|
|
|
+ } else {
|
|
|
+ this.baggageValue = ""
|
|
|
+ this.tableData2 = []
|
|
|
+ this.baggageOptions = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ baggageClear() {
|
|
|
+ this.tableData2 = this.tableData2Old
|
|
|
+ },
|
|
|
+ baggageChange() {
|
|
|
+ this.tableData2 = this.tableData2Old.filter(item => {
|
|
|
+ return item.luggageNum == this.baggageValue
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async flightChange() {
|
|
|
+ if (this.typeValue == "0") {
|
|
|
+ this.tableData2 = this.tableData2Old.filter(item => {
|
|
|
+ return item.carrierFlights == this.flightValue
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.baggageValue = ""
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await WhatQuery({
|
|
|
+ serviceId: "8200229",
|
|
|
+ "page": 1,
|
|
|
+ "pageSize": 9999,
|
|
|
+ dataContent: [{
|
|
|
+ "carrierFlights": this.flightValue,
|
|
|
+ "carrierFlightsDate": this.input
|
|
|
+ }],
|
|
|
+ "event": "0"
|
|
|
+ })
|
|
|
+ if (Number(code) !== 0) {
|
|
|
+ throw new Error('失败')
|
|
|
+ }
|
|
|
+ this.baggageOptions = returnData;
|
|
|
+ this.tableData2 = returnData
|
|
|
+ this.tableData2Old = returnData
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('查询行李失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ typeChange() {
|
|
|
+ this.flightValue = []
|
|
|
+ this.flightOptions = []
|
|
|
+ this.baggageValue = ""
|
|
|
+ this.baggageOptions = []
|
|
|
+ this.tableData2 = []
|
|
|
+ this.tableData2Old = []
|
|
|
+ if (this.typeValue == "0") {
|
|
|
+ this.isShow = false
|
|
|
+ this.tableColumns2 = [{
|
|
|
+ prop: 'carrierFlightsDate',
|
|
|
+ label: '航班日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'carrierFlights',
|
|
|
+ label: '航班号',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ this.isShow = true
|
|
|
+ this.tableColumns2 = [{
|
|
|
+ prop: 'carrierFlightsDate',
|
|
|
+ label: '航班日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'carrierFlights',
|
|
|
+ label: '航班号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'luggageNum',
|
|
|
+ label: '行李牌号',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.getFlight();
|
|
|
+ },
|
|
|
+ async getAirPort() {
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await WhatQuery({
|
|
|
+ serviceId: "14",
|
|
|
+ "page": 1,
|
|
|
+ "pageSize": 9999,
|
|
|
+ dataContent: [],
|
|
|
+ "event": "0"
|
|
|
+ })
|
|
|
+ if (Number(code) !== 0) {
|
|
|
+ throw new Error('失败')
|
|
|
+ }
|
|
|
+ this.airPortOptions = returnData
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('查询航站失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ airPortChange() {
|
|
|
+ this.baggageValue = ""
|
|
|
+ this.tableData2 = []
|
|
|
+ this.tableData2Old = []
|
|
|
+ this.getFlight()
|
|
|
+ },
|
|
|
+ async getFlight() {
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await WhatQuery({
|
|
|
+ "serviceId": "8200228",
|
|
|
+ "dataContent": [{
|
|
|
+ "IATACode": this.airPortValue,
|
|
|
+ "carrierFlightsDate": this.input
|
|
|
+ }],
|
|
|
+ "event": "0"
|
|
|
+ })
|
|
|
+ if (Number(code) !== 0) {
|
|
|
+ throw new Error('失败')
|
|
|
+ }
|
|
|
+ this.flightOptions = returnData
|
|
|
+ if (this.typeValue == "0") {
|
|
|
+ this.tableData2 = returnData
|
|
|
+ this.tableData2Old = returnData
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('查询航班失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dateChange() {
|
|
|
+ this.flightValue = []
|
|
|
+ this.flightOptions = []
|
|
|
+ this.baggageValue = ""
|
|
|
+ this.baggageOptions = []
|
|
|
+ this.tableData2 = []
|
|
|
+ this.tableData2Old = []
|
|
|
+ this.flightDate[0] = this.input
|
|
|
+ this.getFlight()
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ dateRangePickHandler({
|
|
|
+ maxDate,
|
|
|
+ minDate
|
|
|
+ }) {
|
|
|
+ if (!maxDate) {
|
|
|
+ this.input = minDate
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.input = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dateRangeDisabled(date) {
|
|
|
+ return this.input ?
|
|
|
+ Math.abs(date - this.input) > 2 * 24 * 60 * 60 * 1000 :
|
|
|
+ false
|
|
|
+ },
|
|
|
+ formatter(row, column, cellValue) {
|
|
|
+ const value = String(cellValue ?? '').trim()
|
|
|
+ switch (column.property) {
|
|
|
+ case 'createtime':
|
|
|
+ return value.replace('T', '\n')
|
|
|
+ default:
|
|
|
+ return cellValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getTableData2(){
|
|
|
+ if(this.typeValue=="0"){
|
|
|
+ this.getFlight()
|
|
|
+ }else{
|
|
|
+ this.flightChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getTableData(cid = null, type = null) {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const dataContent = []
|
|
|
+ // if (cid) {
|
|
|
+ // dataContent.push(cid)
|
|
|
+ // } else {
|
|
|
+ // dataContent.push(
|
|
|
+ // `${this.flightDate[0]} 00:00:00`,
|
|
|
+ // `${this.flightDate[1]} 23:59:59`
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ if (type === 'fail') {
|
|
|
+ dataContent.push('失败null')
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData
|
|
|
+ } = await WhatQuery({
|
|
|
+ serviceId: "8200227",
|
|
|
+ dataContent: [{
|
|
|
+ "carrierFlightsDate": this.flightDate[0]
|
|
|
+ }],
|
|
|
+ "event": "0"
|
|
|
+ })
|
|
|
+ if (Number(code) !== 0) {
|
|
|
+ throw new Error('失败')
|
|
|
+ }
|
|
|
+ this.tableData = returnData
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('查询表格失败')
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ stateClick(row, column, cell, event) {
|
|
|
+ const {
|
|
|
+ dataObjectId
|
|
|
+ } = row
|
|
|
+ const type = column.property
|
|
|
+ if (dataObjectId && ['total', 'fail'].includes(type) && row[type]) {
|
|
|
+ this.currentCell = `${row.dataObjectId}-${column.property}`
|
|
|
+ this.getTableData(dataObjectId, type)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .upload {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ padding: 24px 24px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-wrapper {
|
|
|
+ width: 50%;
|
|
|
+ padding: 24px 24px 0;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-main {
|
|
|
+ height: calc(100% - 32px);
|
|
|
+ padding-top: 30px;
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 32px;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ width: 100%;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ ::v-deep .state-table {
|
|
|
+ .el-table__header {
|
|
|
+ .cell {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-right {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ &-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-image {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-details {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+
|
|
|
+ >div {
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-name {
|
|
|
+ color: #303133;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-state {
|
|
|
+ &-success {
|
|
|
+ color: #40a349;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-failure {
|
|
|
+ color: #d53e3e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-retry {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2d67e3;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #2d67e3;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-time {
|
|
|
+ color: #afb4bf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__header-wrapper,
|
|
|
+ .el-table__fixed-header-wrapper {
|
|
|
+ .cell {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pre-line .cell {
|
|
|
+ white-space: pre-line;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.state-table {
|
|
|
+ .el-table__cell {
|
|
|
+ background-color: transparent !important;
|
|
|
+
|
|
|
+ &.cell-click .cell {
|
|
|
+ color: #2d67e3;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cell-current,
|
|
|
+ &:hover {
|
|
|
+ background-color: #d5e4f7 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-header-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-refresh {
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tooltip-content {
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tooltip-trigger {
|
|
|
+ padding: 0 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+</style>
|
