|
@@ -2,14 +2,14 @@
|
|
|
<template>
|
|
|
<div class="gantt-chart">
|
|
|
<div class="condition-legend-bar">
|
|
|
- <Select
|
|
|
+ <Select
|
|
|
class="system-select"
|
|
|
width="217"
|
|
|
- :isReadOnly="true"
|
|
|
- tipPlace="top"
|
|
|
+ :isReadOnly="true"
|
|
|
+ tipPlace="top"
|
|
|
caption="系统名称:"
|
|
|
- v-model="systemId"
|
|
|
- :selectdata="systemList"
|
|
|
+ v-model="systemId"
|
|
|
+ :selectdata="systemList"
|
|
|
:placeholder="'请选择'"
|
|
|
@change="getGanttChartData"
|
|
|
/>
|
|
@@ -18,7 +18,7 @@
|
|
|
<div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
|
|
|
<div>{{item.text}}</div>
|
|
|
</div>
|
|
|
- <div >
|
|
|
+ <div>
|
|
|
<el-radio-group v-model="timeType">
|
|
|
<el-radio style="line-height: 32px;margin-right: 16px;" label="month">月视图</el-radio>
|
|
|
<el-radio style="line-height: 32px;" label="day">日视图</el-radio>
|
|
@@ -40,7 +40,7 @@
|
|
|
<div class="dialog-container">
|
|
|
<div class="row task-status">
|
|
|
<div>
|
|
|
- <Task class="icon"/>
|
|
|
+ <Task class="icon" />
|
|
|
<div class="title">任务状态</div>
|
|
|
</div>
|
|
|
<div>进行中</div>
|
|
@@ -67,11 +67,11 @@
|
|
|
<div>
|
|
|
<div>
|
|
|
<div class="num">12张</div>
|
|
|
- <div class="more">查看更多</div>
|
|
|
+ <div class="more" @click="() => showImgDetail = true">查看更多</div>
|
|
|
</div>
|
|
|
<div class="pictrue-container">
|
|
|
<div v-for="(item) in pictures" :key="'id_' + item.id">
|
|
|
- <img :src="item.imgSrc" alt="" />
|
|
|
+ <img :src="item.imgSrc" alt />
|
|
|
<div class="info">{{item.title}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,7 +88,7 @@
|
|
|
</div>
|
|
|
<div class="pictrue-container">
|
|
|
<div v-for="(item) in reports" :key="'id_' + item.id">
|
|
|
- <img :src="item.imgSrc" alt="" />
|
|
|
+ <img :src="item.imgSrc" alt />
|
|
|
<div class="info">{{item.title}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -99,62 +99,121 @@
|
|
|
<Menu class="icon" />
|
|
|
<div class="title">检测内容</div>
|
|
|
</div>
|
|
|
- <el-table :data="tableData">
|
|
|
- <el-table-column property="time" label="设备简称"></el-table-column>
|
|
|
- <el-table-column property="evenType" label="设备编号"></el-table-column>
|
|
|
- <el-table-column property="objid" label="设备数"></el-table-column>
|
|
|
- <el-table-column property="content" label="空间位置"></el-table-column>
|
|
|
+ <el-table :data="tableData" max-height="300">
|
|
|
+ <el-table-column property="sbjc" label="设备简称"></el-table-column>
|
|
|
+ <el-table-column property="sbjbm" label="设备编号"></el-table-column>
|
|
|
+ <el-table-column property="cnt" label="设备数"></el-table-column>
|
|
|
+ <el-table-column property="wzjc" width="300" label="空间位置"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <div class="img-detail-container">
|
|
|
+ <el-dialog :title="'图片预览'" :visible.sync="showImgDetail" width="1260px">
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="pictures-menu">
|
|
|
+ <!-- <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item"> -->
|
|
|
+ <div class="item">
|
|
|
+ <!-- <img :src="item.url" alt=""> -->
|
|
|
+ <img src="../../assets/images/login_back.png" alt />
|
|
|
+ <div class="name">图层名称1.jpg</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <img src="../../assets/images/login_back.png" alt />
|
|
|
+ <div class="name">图层名称1.jpg</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cur-img-container">
|
|
|
+ <img src="../../assets/images/login_back.png" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { queryGanttChart, queryGanttDetail } from '../../api/ganttChart';
|
|
|
-import { querySystemList, queryDetailData } from '../../api/coreDeviceReport';
|
|
|
-import { Tree } from 'meri-design';
|
|
|
-import _ from 'lodash';
|
|
|
-import moment from 'moment';
|
|
|
+import { queryGanttChart, queryGanttDetail } from "../../api/ganttChart";
|
|
|
+import { querySystemList, queryDetailData } from "../../api/coreDeviceReport";
|
|
|
+import { Tree } from "meri-design";
|
|
|
+import _ from "lodash";
|
|
|
+import moment from "moment";
|
|
|
// import '../../utils/ganttChart/g.js';
|
|
|
-import { GanttChart } from '../../utils/ganttChart/GanttChart.js';
|
|
|
-import { parse } from 'path';
|
|
|
-import Task from '../../assets/svg/task.svg';
|
|
|
-import PlanTime from '../../assets/svg/plan_time.svg';
|
|
|
-import RealTime from '../../assets/svg/real_time.svg';
|
|
|
-import Picture from '../../assets/svg/picture.svg';
|
|
|
-import Report from '../../assets/svg/report.svg';
|
|
|
-import Menu from '../../assets/svg/menu.svg';
|
|
|
+import { GanttChart } from "../../utils/ganttChart/GanttChart.js";
|
|
|
+import { parse } from "path";
|
|
|
+import Task from "../../assets/svg/task.svg";
|
|
|
+import PlanTime from "../../assets/svg/plan_time.svg";
|
|
|
+import RealTime from "../../assets/svg/real_time.svg";
|
|
|
+import Picture from "../../assets/svg/picture.svg";
|
|
|
+import Report from "../../assets/svg/report.svg";
|
|
|
+import Menu from "../../assets/svg/menu.svg";
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
systemList: [], // 系统列表
|
|
|
- systemId: '', // 系统名称
|
|
|
+ systemId: "", // 系统名称
|
|
|
legends: [
|
|
|
- {id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
|
|
|
- {id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
|
|
|
- {id: 3, text: '逾期完成', backgroundColor: '#FBCE99', borderColor: '#F58300'},
|
|
|
- {id: 4, text: '逾期未完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ text: "按时完成",
|
|
|
+ backgroundColor: "#E7E9EA",
|
|
|
+ borderColor: "#C3C7CB"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ text: "未开始/进行中",
|
|
|
+ backgroundColor: "rgba(91, 143, 249, 0.2)",
|
|
|
+ borderColor: "#5B8FF9"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ text: "逾期完成",
|
|
|
+ backgroundColor: "#FBCE99",
|
|
|
+ borderColor: "#F58300"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ text: "逾期未完成",
|
|
|
+ backgroundColor: "#FBB8B5",
|
|
|
+ borderColor: "#F54E45"
|
|
|
+ }
|
|
|
], // 图例
|
|
|
- timeType: 'month', // 甘特图时间类型
|
|
|
+ timeType: "month", // 甘特图时间类型
|
|
|
treeData: [], // 树结构数据
|
|
|
-
|
|
|
+
|
|
|
// 弹窗相关
|
|
|
showDetail: false, // 弹框显示状态
|
|
|
- detailTitle: '', // 弹窗标题
|
|
|
+ detailTitle: "", // 弹窗标题
|
|
|
pictures: [
|
|
|
- {id: 1, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
|
|
|
- {id: 2, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgSrc: require("../../assets/imgs/analysis/picture.png"),
|
|
|
+ title: "2019年5月高压用具检测报告.jpg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgSrc: require("../../assets/imgs/analysis/picture.png"),
|
|
|
+ title: "2019年5月高压用具检测报告.jpg"
|
|
|
+ }
|
|
|
], // 照片
|
|
|
reports: [
|
|
|
- {id: 1, imgSrc: require('../../assets/imgs/analysis/report_pdf.png'), title: '2019年5月高压用具检测报告.pdf'},
|
|
|
- {id: 2, imgSrc: require('../../assets/imgs/analysis/report_word.png'), title: '2019年5月高压用具检测报告.docx'},
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgSrc: require("../../assets/imgs/analysis/report_pdf.png"),
|
|
|
+ title: "2019年5月高压用具检测报告.pdf"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgSrc: require("../../assets/imgs/analysis/report_word.png"),
|
|
|
+ title: "2019年5月高压用具检测报告.docx"
|
|
|
+ }
|
|
|
], // 报告
|
|
|
ganttDetail: {}, // 甘特图明细
|
|
|
tableData: [], // 表数据
|
|
|
- }
|
|
|
+
|
|
|
+ showImgDetail: false // 查看更多图片弹框显示状态
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
components: {
|
|
@@ -177,16 +236,16 @@ export default {
|
|
|
* 获取系统列表数据
|
|
|
*/
|
|
|
getSystemList() {
|
|
|
- querySystemList().then((res) => {
|
|
|
- if (res.result === 'success') {
|
|
|
+ querySystemList().then(res => {
|
|
|
+ if (res.result === "success") {
|
|
|
let data = res.data;
|
|
|
let newData = [];
|
|
|
- _.forEach(data, (item) => {
|
|
|
+ _.forEach(data, item => {
|
|
|
newData.push({
|
|
|
id: item.code,
|
|
|
name: item.name
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
this.systemList = newData;
|
|
|
const { query } = this.$route;
|
|
|
if (!_.isEmpty(query) && query.smsxt) {
|
|
@@ -196,7 +255,7 @@ export default {
|
|
|
}
|
|
|
this.getGanttChartData();
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 处理请求数据的时间
|
|
@@ -204,9 +263,9 @@ export default {
|
|
|
disQueryTime() {
|
|
|
let startTime, endTime;
|
|
|
let curTime = new Date(),
|
|
|
- curYear = curTime.getFullYear(),
|
|
|
- curMonth = curTime.getMonth() + 1;
|
|
|
- if (this.timeType === 'month') {
|
|
|
+ curYear = curTime.getFullYear(),
|
|
|
+ curMonth = curTime.getMonth() + 1;
|
|
|
+ if (this.timeType === "month") {
|
|
|
startTime = `${curYear}0101000000`;
|
|
|
endTime = `${curYear + 1}0101000000`;
|
|
|
} else {
|
|
@@ -228,15 +287,15 @@ export default {
|
|
|
smsxt: this.systemId,
|
|
|
plazaId: 1000423,
|
|
|
startDate: 20000101000000, // time[0]
|
|
|
- endDate: 20200708000000, // time[1]
|
|
|
- }
|
|
|
- queryGanttChart('/data/base/queryGanttChart', param).then((res) => {
|
|
|
+ endDate: 20200708000000 // time[1]
|
|
|
+ };
|
|
|
+ queryGanttChart("/data/base/queryGanttChart", param).then(res => {
|
|
|
const { dsfList, wbList, zwList, result } = res;
|
|
|
- console.log('res', res)
|
|
|
- if (result === 'success') {
|
|
|
+ console.log("res", res);
|
|
|
+ if (result === "success") {
|
|
|
let newData = [],
|
|
|
- data = [wbList, zwList, dsfList],
|
|
|
- name = ['维保', '专维', '第三方检测'];
|
|
|
+ data = [wbList, zwList, dsfList],
|
|
|
+ name = ["维保", "专维", "第三方检测"];
|
|
|
_.forEach(data, (item, index) => {
|
|
|
newData.push({
|
|
|
id: index + 1,
|
|
@@ -244,66 +303,69 @@ export default {
|
|
|
open: true,
|
|
|
// children: name[index] === '专维'?[] : this.disGanttData(dsfList)
|
|
|
children: this.disGanttData(data[index])
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
+ });
|
|
|
this.treeData = newData;
|
|
|
-
|
|
|
- let taskData = _.map(_.cloneDeep(newData), (item) => {
|
|
|
+
|
|
|
+ let taskData = _.map(_.cloneDeep(newData), item => {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
type: item.name,
|
|
|
open: item.open,
|
|
|
- dataList: _.map(item.children, (_item) => {
|
|
|
+ dataList: _.map(item.children, _item => {
|
|
|
return {
|
|
|
id: _item.id,
|
|
|
title: _item.name,
|
|
|
tasks: _item.originData
|
|
|
- }
|
|
|
+ };
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
- console.log('taskData', taskData)
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log("taskData", taskData);
|
|
|
+ if (window.gc) {
|
|
|
+ gc.gCanvas.destroy();
|
|
|
+ }
|
|
|
let width = this.$refs.chartContainer.offsetWidth;
|
|
|
window.gc = new GanttChart({
|
|
|
- chartParentContainer: 'chartContainer',
|
|
|
- chartContainer: 'ganttContainer',
|
|
|
+ chartParentContainer: "chartContainer",
|
|
|
+ chartContainer: "ganttContainer",
|
|
|
viewWidth: width,
|
|
|
- cWidth: 3*width,
|
|
|
+ cWidth: 3 * width,
|
|
|
tasks: taskData,
|
|
|
- daysCount: parseInt(3*width/40),
|
|
|
+ daysCount: parseInt((3 * width) / 40),
|
|
|
callback: this.showDialog
|
|
|
});
|
|
|
- gc.main()
|
|
|
+ gc.main();
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 处理甘特图数据
|
|
|
*/
|
|
|
disGanttData(arr) {
|
|
|
let data = [];
|
|
|
- _.forEach(arr, (item) => {
|
|
|
+ _.forEach(arr, item => {
|
|
|
data.push({
|
|
|
id: item.id,
|
|
|
name: item.name,
|
|
|
- checked: 'uncheck',
|
|
|
- originData: _.map(item.data, (_item) => {
|
|
|
+ checked: "uncheck",
|
|
|
+ originData: _.map(item.data, _item => {
|
|
|
_item.startDate = moment.unix((new Date().getTime() - 1000*60*60*24*7)/1000).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ // _item.startDate = moment.unix(_item.startDate / 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
_item.endDate = moment.unix(new Date().getTime()/1000).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ // _item.endDate = moment.unix(_item.endDate / 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
_item.description = _item.parentname;
|
|
|
- return _item
|
|
|
+ return _item;
|
|
|
})
|
|
|
- })
|
|
|
- })
|
|
|
- return data
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return data;
|
|
|
},
|
|
|
/**
|
|
|
* 展开收起节点
|
|
|
*/
|
|
|
toggleNode(status) {
|
|
|
- console.log('status', status)
|
|
|
-
|
|
|
+ console.log("status", status);
|
|
|
},
|
|
|
/**
|
|
|
* 显示弹窗
|
|
@@ -323,28 +385,35 @@ export default {
|
|
|
plazaId: 1000423,
|
|
|
type: 2,
|
|
|
id: 1078467
|
|
|
- }
|
|
|
- queryGanttDetail('/data/base/queryGanttChartDetails', param).then((res) => {
|
|
|
+ };
|
|
|
+ queryGanttDetail("/data/base/queryGanttChartDetails", param).then(res => {
|
|
|
const { result, data } = res;
|
|
|
- if (result === 'success') {
|
|
|
- const { status, planStartDate, planEndDate, realStartDate, realEndDate } = data;
|
|
|
+ if (result === "success") {
|
|
|
+ const {
|
|
|
+ status,
|
|
|
+ planStartDate,
|
|
|
+ planEndDate,
|
|
|
+ realStartDate,
|
|
|
+ realEndDate
|
|
|
+ } = data;
|
|
|
let newData = {
|
|
|
status,
|
|
|
- color: '',
|
|
|
+ color: "",
|
|
|
planTime: this.dealDetailTime(planStartDate, planEndDate),
|
|
|
realTime: this.dealDetailTime(realStartDate, realEndDate)
|
|
|
- }
|
|
|
+ };
|
|
|
this.ganttDetail = newData;
|
|
|
+ this.tableData = data.assetList;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 处理时间
|
|
|
*/
|
|
|
dealDetailTime(startTime, endTime) {
|
|
|
- let start = moment.unix(startTime / 1000).format('YYYY.MM.DD HH:mm:ss'),
|
|
|
- end = moment.unix(endTime / 1000).format('YYYY.MM.DD HH:mm:ss');
|
|
|
- return `${start}-${end}`
|
|
|
+ let start = moment.unix(startTime / 1000).format("YYYY.MM.DD HH:mm:ss"),
|
|
|
+ end = moment.unix(endTime / 1000).format("YYYY.MM.DD HH:mm:ss");
|
|
|
+ return `${start}-${end}`;
|
|
|
},
|
|
|
/**
|
|
|
* 获取甘特图的图片/报告详情
|
|
@@ -354,18 +423,17 @@ export default {
|
|
|
file_type: 1,
|
|
|
file_type_id: 1985,
|
|
|
type: type
|
|
|
- }
|
|
|
- queryDetailData('/data/base/queryFileDetails', param).then((res) => {
|
|
|
- console.log('photo', res)
|
|
|
-
|
|
|
- })
|
|
|
+ };
|
|
|
+ queryDetailData("/data/base/queryFileDetails", param).then(res => {
|
|
|
+ console.log("photo", res);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang='less' scoped>
|
|
|
-.gantt-chart{
|
|
|
+.gantt-chart {
|
|
|
padding-left: 16px;
|
|
|
padding-right: 16px;
|
|
|
padding-top: 12px;
|
|
@@ -373,23 +441,23 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
- .condition-legend-bar{
|
|
|
+ .condition-legend-bar {
|
|
|
margin-bottom: 12px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- .legend-container{
|
|
|
+ .legend-container {
|
|
|
display: flex;
|
|
|
- .item-legend{
|
|
|
+ .item-legend {
|
|
|
padding-left: 18px;
|
|
|
position: relative;
|
|
|
font-size: 14px;
|
|
|
- color: #646C73;
|
|
|
+ color: #646c73;
|
|
|
line-height: 32px;
|
|
|
- &:not(:nth-of-type(4)){
|
|
|
+ &:not(:nth-of-type(4)) {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
- >div:first-child{
|
|
|
+ > div:first-child {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: calc(50% - 6px);
|
|
@@ -397,131 +465,173 @@ export default {
|
|
|
height: 12px;
|
|
|
border: 1px solid;
|
|
|
}
|
|
|
- &:nth-of-type(4){
|
|
|
+ &:nth-of-type(4) {
|
|
|
margin-right: 32px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .main-gantt-container{
|
|
|
+ .main-gantt-container {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 44px);
|
|
|
- background: #F2F5F7;
|
|
|
- border:1px solid rgba(239,240,241,1);
|
|
|
- border-radius:4px;
|
|
|
+ background: #f2f5f7;
|
|
|
+ border: 1px solid rgba(239, 240, 241, 1);
|
|
|
+ border-radius: 4px;
|
|
|
display: flex;
|
|
|
- .task-title{
|
|
|
+ .task-title {
|
|
|
width: 404px;
|
|
|
height: 100%;
|
|
|
- border-right: 1px solid #EFF0F1;
|
|
|
- .title{
|
|
|
+ border-right: 1px solid #eff0f1;
|
|
|
+ .title {
|
|
|
padding-left: 32px;
|
|
|
padding-top: 15px;
|
|
|
padding-bottom: 15px;
|
|
|
font-size: 14px;
|
|
|
- color: #646C73;
|
|
|
+ color: #646c73;
|
|
|
line-height: 19px;
|
|
|
- border-bottom: 1px solid #EFF0F1;
|
|
|
+ border-bottom: 1px solid #eff0f1;
|
|
|
}
|
|
|
- >div:nth-of-type(2){
|
|
|
+ > div:nth-of-type(2) {
|
|
|
max-height: calc(100% - 50px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
- .chart-container{
|
|
|
+ .chart-container {
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
background: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .dialog-container{
|
|
|
+ .dialog-container {
|
|
|
max-height: 580px;
|
|
|
- overflow: auto ;
|
|
|
- .row{
|
|
|
+ overflow: auto;
|
|
|
+ .row {
|
|
|
display: flex;
|
|
|
- >div:first-child{
|
|
|
+ > div:first-child {
|
|
|
margin-right: 24px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- &:not(:last-of-type){
|
|
|
+ &:not(:last-of-type) {
|
|
|
margin-bottom: 14px;
|
|
|
}
|
|
|
- .info{
|
|
|
+ .info {
|
|
|
font-size: 14px;
|
|
|
- color: #1F2429;
|
|
|
+ color: #1f2429;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
- .icon{
|
|
|
+ .icon {
|
|
|
margin-right: 6px;
|
|
|
width: 16px;
|
|
|
}
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
width: 84px;
|
|
|
font-size: 14px;
|
|
|
- color: #646C73;
|
|
|
+ color: #646c73;
|
|
|
line-height: 22px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
- .task-status>div:nth-of-type(2){
|
|
|
+ .task-status > div:nth-of-type(2) {
|
|
|
width: 58px;
|
|
|
height: 24px;
|
|
|
- background: rgba(91,143,249,0.2);
|
|
|
+ background: rgba(91, 143, 249, 0.2);
|
|
|
border-radius: 2px;
|
|
|
- color: #5B8FF9;
|
|
|
+ color: #5b8ff9;
|
|
|
line-height: 24px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .picture{
|
|
|
- margin-bottom: 19px!important;
|
|
|
- >div:first-child{
|
|
|
+ .picture {
|
|
|
+ margin-bottom: 19px !important;
|
|
|
+ > div:first-child {
|
|
|
align-items: baseline;
|
|
|
}
|
|
|
- >div:nth-of-type(2){
|
|
|
+ > div:nth-of-type(2) {
|
|
|
flex: 1;
|
|
|
}
|
|
|
- >div:nth-of-type(2)>div:first-child{
|
|
|
+ > div:nth-of-type(2) > div:first-child {
|
|
|
margin-bottom: 12px;
|
|
|
display: flex;
|
|
|
}
|
|
|
.num,
|
|
|
- .more{
|
|
|
+ .more {
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
- .num{
|
|
|
+ .num {
|
|
|
margin-right: 22px;
|
|
|
- color: #1F2429;
|
|
|
+ color: #1f2429;
|
|
|
}
|
|
|
- .more{
|
|
|
- color: #025BAA;
|
|
|
+ .more {
|
|
|
+ color: #025baa;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .pictrue-container{
|
|
|
- >div{
|
|
|
+ .pictrue-container {
|
|
|
+ > div {
|
|
|
padding: 10px 16px;
|
|
|
width: 100%;
|
|
|
- border-radius:4px;
|
|
|
- border:1px solid rgba(233,233,233,1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(233, 233, 233, 1);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
width: 24px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
}
|
|
|
- >div:not(:last-child){
|
|
|
+ > div:not(:last-child) {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
}
|
|
|
- .test-content{
|
|
|
+ .test-content {
|
|
|
display: block;
|
|
|
- >div:first-child{
|
|
|
+ > div:first-child {
|
|
|
margin-bottom: 13px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .detail-container {
|
|
|
+ display: flex;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+ .pictures-menu {
|
|
|
+ margin-right: 21px;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ width: 180px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ .item {
|
|
|
+ > img {
|
|
|
+ width: 180px;
|
|
|
+ border: 4px solid rgba(245, 246, 247, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1f2429;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:not(:last-of-type) {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|