fabu

src/components/OP/ConferenceTask.vue

@@ -0,0 +1,940 @@
+<template>
+    <div class="ConferenceTask-all" v-loading.fullscreen.lock="SPLoading">
+        <div class="ConferenceTask-Search">
+            <div class="ConferenceTask-Search-ul">
+                <div class="ConferenceTask-Search-li">
+                    <label>选择团组:</label>
+                    <el-select size="small" style="width:200px" v-model="Groupid" filterable placeholder="请选择">
+                        <el-option v-for="item in GroupidArr" :key="item.id" :label="item.name" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="ConferenceTask-Search-li">
+                    <label>情况选择:</label>
+                    <el-select size="small" style="width:200px" v-model="Situation" filterable placeholder="请选择">
+                        <el-option v-for="item in SituationArr" :key="item.id" :label="item.name" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+            </div>
+             <el-button size="small" type="primary">保存</el-button>
+        </div>
+        <div class="ConferenceTask-diagram">
+            <div :class="item.statusText == '已完成' ? 'ConferenceTask-diagram-' + activities.length + 's' : 'ConferenceTask-diagram-' + activities.length"
+                v-for="(item, index) in activities" :key="index">
+                <el-popover v-if="item.nodeDescTips != ''" placement="top-start" title="PS" width="200" trigger="hover"
+                    :content="item.nodeDescTips">
+                    <div style="white-space: pre-wrap;">{{ item.nodeDescTips }}</div>
+                    <div slot="reference">
+                        <div style="font-weight: 600;font-size: 12px;">{{ item.nodeName }}</div>
+                        <div>{{ item.statusText }}</div>
+                        <div>{{ item.operator }}</div>
+                        <!-- <div>{{item.opeateTime}}</div> -->
+                        <div @click.stop="">
+                            <el-date-picker style="width: 100%;"
+                                size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
+                            </el-date-picker>
+                            <div v-if="item.isEnaPartBtn" @click.stop=""
+                                style="display: flex;align-items: center;margin-top: 5px;">
+                                <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
+                                <el-radio-group v-model="item.isPart">
+                                    <el-radio :label="true">是</el-radio>
+                                    <el-radio :label="false">否</el-radio>
+                                </el-radio-group>
+                            </div>
+                            <div v-if="item.isEnaAssistBtn" @click.stop=""
+                                style="display: flex;align-items: center;margin-top: 5px">
+                                <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
+                                <el-radio-group v-model="item.isAssist">
+                                    <el-radio :label="true">是</el-radio>
+                                    <el-radio :label="false">否</el-radio>
+                                </el-radio-group>
+                            </div>
+                            <div v-if="item.isEnaFileUpBtn" @click.stop=""
+                                style="display: flex;align-items: center;margin-top: 5px;">
+                                <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
+                                <el-radio-group v-model="item.isFileUp">
+                                    <el-radio :label="true">是</el-radio>
+                                    <el-radio :label="false">否</el-radio>
+                                </el-radio-group>
+                            </div>
+                        </div>
+                    </div>
+                </el-popover>
+                <div v-else>
+                    <div style="font-weight: 600;font-size: 12px;">{{ item.nodeName }}</div>
+                    <div>{{ item.statusText }}</div>
+                    <div>{{ item.operator }}</div>
+                    <!-- <div>{{item.opeateTime}}</div> -->
+                    <div @click.stop="">
+                        <el-date-picker style="width: 100%;" size="mini"
+                            v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
+                        </el-date-picker>
+                        <div v-if="item.isEnaPartBtn" @click.stop=""
+                            style="display: flex;align-items: center;margin-top: 5px;">
+                            <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
+                            <el-radio-group v-model="item.isPart">
+                                <el-radio :label="true">是</el-radio>
+                                <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                        </div>
+                        <div v-if="item.isEnaAssistBtn" @click.stop=""
+                            style="display: flex;align-items: center;margin-top: 5px;">
+                            <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
+                            <el-radio-group v-model="item.isAssist">
+                                <el-radio :label="true">是</el-radio>
+                                <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                        </div>
+                        <div v-if="item.isEnaFileUpBtn" @click.stop=""
+                            style="display: flex;align-items: center;margin-top: 5px;">
+                            <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
+                            <el-radio-group v-model="item.isFileUp">
+                                <el-radio :label="true">是</el-radio>
+                                <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <div class="ConferenceTask-Search" style="margin-top: 30px;">
+            <div class="ConferenceTask-Search-ul">
+                <div class="ConferenceTask-Search-li">
+                    <label>选择月份:</label>
+                    <el-date-picker @change="CompanyDailyKpiInfo" size="small" style="width:200px" v-model="months" type="month" placeholder="选择月">
+                    </el-date-picker>
+                </div>
+                <div class="ConferenceTask-Search-li">
+                    <label>人员名称:</label>
+                    <el-select @change="CompanyDailyKpiInfo" size="small" style="width:200px" v-model="value" filterable placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+            </div>
+             <el-button @click="CompanyDailyKpiSave" size="small" type="primary">保存</el-button>
+        </div>
+        <div class="ConferenceTask-Search-table">
+            <el-table :data="tableData" border style="width: 100%">
+                <el-table-column prop="evalContentOrder" label="序号" width="80">
+                </el-table-column>
+                <el-table-column prop="evalContent" label="工作内容" width="520">
+                    <template slot-scope="scope">
+                        <div style="text-align: left;">{{ scope.row.evalContent }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="工作是否失误" width="100">
+                    <template slot-scope="scope">
+                        <el-checkbox v-model="scope.row.isMistake"></el-checkbox>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="address" label="失误原因描述">
+                    <template slot-scope="scope">
+                        <el-input style="width:100%" v-model="scope.row.mistakeReason" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            userId:'',
+            months:new Date(),
+            value:'',
+            options:[],
+            tableData: [],
+            SPLoading:false,
+            Groupid:'',
+            GroupidArr:[],
+            Situation:'',
+            SituationArr:[],
+            activities:[
+                {
+                    id: 1,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 1,
+                    nodeName: "报批基础资料准备",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "更新报批行程和请示，提供其他报批所需材料，4个工作日内完成。",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                },
+                {
+                    id: 2,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 2,
+                    nodeName: "报批邀请函资料准备",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "客户提供完整名单后，2周内取得邀请函（翻译件）。",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                },
+                {
+                    id: 3,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 3,
+                    nodeName: "获得批件",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "提供完整的报批全套资源。",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                },
+                {
+                    id: 4,
+                    ConferenceTaskI: 1,
+                    nodeOrder: 4,
+                    nodeName: "对接公务",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "请于2026年05月12日内完成该项工作(按进度实际公务活动落实情况，出发前5日落实公务)",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                },
+                {
+                    id: 5,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 5,
+                    nodeName: "参与翻译对接",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: true,
+                    isPart: true,
+                    visaSubNodes: []
+                },
+                {
+                    id: 6,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 6,
+                    nodeName: "商邀文案配合",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: false,
+                    isFileUp: false,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                },
+                {
+                    id: 7,
+                    ConferenceTaskId: 1,
+                    nodeOrder: 7,
+                    nodeName: "票据上传(相关票据)",
+                    overallStatus: 2,
+                    statusText: "进行中",
+                    operator: "-",
+                    opeateTime: "-",
+                    actualDone: "",
+                    nodeDescTips: "请于2026年05月17日内完成该项工作(团组结束前完成)",
+                    isEnaAssistBtn: false,
+                    isAssist: false,
+                    isEnaFileUpBtn: true,
+                    isFileUp: true,
+                    isEnaPartBtn: false,
+                    isPart: false,
+                    visaSubNodes: []
+                }
+            ]
+        }
+    },
+    methods: {
+        //获取人员名单
+        CompanyDailyKpiInit() {
+            var url = "/api/PersonnelModule/CompanyDailyKpiInit";
+            var that = this;
+            this.$axios({
+                method: 'get',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                }
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    that.options=res.data.data;
+                    if(that.value==''){
+                        that.value=that.options[0].id;
+                    }
+                    that.CompanyDailyKpiInfo();
+                } else {
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //处理日期
+        datetime(val){
+            var date=new Date(val);
+            var y=date.getFullYear();
+            var m=date.getMonth()+1>=10?date.getMonth()+1:'0'+(date.getMonth()+1).toString();
+            var d=date.getDate()>=10?date.getDate():'0'+(date.getDate()).toString();
+            return y+'-'+m
+        },
+        //获取任务明细
+        CompanyDailyKpiInfo() {
+            this.SPLoading=true;
+            if (this.months==''||this.months==null){
+                this.$message.error('请选择月份！');
+                return
+            }
+            var url = "/api/PersonnelModule/CompanyDailyKpiInfo?month="+this.datetime(this.months)+"&evaluator="+this.value;
+            var that = this;
+            this.$axios({
+                method: 'get',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                }
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    that.tableData=res.data.data;
+                    that.SPLoading=false;
+                } else {
+                    that.SPLoading=false;
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //保存任务
+        CompanyDailyKpiSave() {
+            this.SPLoading=true;
+            var url = "/api/PersonnelModule/CompanyDailyKpiSave";
+            var that = this;
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    currUserId:that.userId,
+                    infos:that.tableData
+                }
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    that.$message.success(res.data.msg);
+                    that.CompanyDailyKpiInfo();
+                } else {
+                    that.SPLoading=false;
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+    },
+    mounted() {
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
+        this.CompanyDailyKpiInit();
+    }
+}
+</script>
+<style>
+.ConferenceTask-all {
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+    min-height: 780px;
+}
+.ConferenceTask-Search{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.ConferenceTask-Search-ul{
+    display: flex;
+    align-items: center;
+}
+.ConferenceTask-Search-li{
+    margin-right: 20px;
+}
+
+/**/
+.progress-content {
+    display: flex;
+    justify-content: space-around;
+}
+
+.progress-content>div {
+    font-size: 17px;
+    font-weight: bold;
+}
+
+.progress-table-content {
+    text-align: left;
+}
+
+.progress-content div {
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.ConferenceTask-diagram {
+    color: #606266;
+    margin: 80px 0 30px 0;
+    display: flex;
+    justify-content: space-around;
+}
+
+/*6*/
+.ConferenceTask-diagram-6 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-6::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-6:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 117%;
+    height: 2px;
+    background-color: #606266;
+    left: 53%;
+    top: -26px;
+    border-radius: 50%;
+}
+
+.ConferenceTask-diagram-6s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-6s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-6s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 117%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 53%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram>div {
+    cursor: pointer;
+}
+
+.ConferenceTask-diagram .el-popover {
+    left: 110%;
+    top: -7px;
+}
+
+/*3*/
+.ConferenceTask-diagram-3 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-3::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-3:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 242%;
+    height: 2px;
+    background-color: #606266;
+    left: 54%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-3s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-3s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-3s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 242%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 54%;
+    top: -26px;
+    border-radius: 50%
+}
+
+/*5*/
+.ConferenceTask-diagram-5 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-5::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%7
+}
+
+.ConferenceTask-diagram-5:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 142%;
+    height: 2px;
+    background-color: #606266;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-5s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-5s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-5s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 142%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram .el-radio {
+    color: #606266;
+    text-align: left;
+    font-weight: 500;
+    line-height: 1;
+    width: 44px;
+    cursor: pointer;
+    white-space: nowrap;
+    outline: 0;
+    margin-right: 0;
+}
+
+.progress-table-form .el-radio {
+    color: #606266;
+    text-align: left;
+    font-weight: 500;
+    line-height: 1;
+    width: 44px;
+    cursor: pointer;
+    white-space: nowrap;
+    outline: 0;
+    margin-right: 0;
+}
+
+.progress-table-form>div {
+    margin-right: 15px;
+}
+
+.progress-table-form {
+    margin-top: 10px;
+}
+
+/*2*/
+.ConferenceTask-diagram-2 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-2::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-2:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 368%;
+    height: 2px;
+    background-color: #606266;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-2s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-2s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-2s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 368%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+/*4*/
+.ConferenceTask-diagram-4 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-4::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-4:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 180%;
+    height: 2px;
+    background-color: #606266;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-4s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-4s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-4s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 180%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+/*7*/
+.ConferenceTask-diagram-7 {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-7::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-7:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: #606266;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-7s {
+    width: 12%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-7s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-7s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+/*8*/
+.ConferenceTask-diagram-8 {
+    width: 11%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-8::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #606266;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-8:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 93%;
+    height: 2px;
+    background-color: #606266;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-8s {
+    width: 11%;
+    text-align: center;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #0005;
+}
+
+.ConferenceTask-diagram-8s::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #67C23A;
+    left: 46%;
+    top: -30px;
+    border-radius: 50%
+}
+
+.ConferenceTask-diagram-8s:not(:last-child)::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 93%;
+    height: 2px;
+    background-color: #67C23A;
+    left: 52.5%;
+    top: -26px;
+    border-radius: 50%
+}
+</style>

src/components/OP/SpecialPerformance.vue

@@ -21,7 +21,10 @@
             <el-table :data="tableData" border style="width: 100%">
                 <el-table-column prop="evalContentOrder" label="序号" width="80">
                 </el-table-column>
-                <el-table-column prop="evalContent" label="工作内容">
+                <el-table-column prop="evalContent" label="工作内容" width="520">
+                    <template slot-scope="scope">
+                        <div style="text-align: left;">{{ scope.row.evalContent }}</div>
+                    </template>
                 </el-table-column>
                 <el-table-column prop="name" label="工作是否失误" width="100">
                     <template slot-scope="scope">

src/router/index.js

@@ -146,6 +146,7 @@ import TaskReview from '@/components/OP/TaskReview'
 import GroupProgress from '@/components/OP/GroupProgress'
 import performanceanalysis from '@/components/OP/performanceanalysis'
 import SpecialPerformance from '@/components/OP/SpecialPerformance'
+import ConferenceTask from '@/components/OP/ConferenceTask'
 
 
 Vue.use(Router)
@@ -873,6 +874,11 @@ export default new Router({
           name: 'SpecialPerformance',
           component: SpecialPerformance
         },
+        {
+          path: '/home/ConferenceTask',
+          name: 'ConferenceTask',
+          component: ConferenceTask
+        },
       ]
     },
     {