修改任务清单的流程

This commit is contained in:
qq787203167
2022-05-18 13:45:38 +08:00
parent 450ff79029
commit 2c3a5b0192
10 changed files with 268 additions and 107 deletions
+3 -2
View File
@@ -779,7 +779,7 @@ module.exports = {
feedbackFromTheEngineer: 'Feedback from the Engineer', feedbackFromTheEngineer: 'Feedback from the Engineer',
completedBy: 'Completed by', completedBy: 'Completed by',
completedTime: 'Completed time', completedTime: 'Completed time',
replyFromProjectContactPerson: 'Reply from project contact person', replyFromProjectContactPerson: 'Responsible Persons reply',
answer: 'answer', answer: 'answer',
distributionEngineer: 'Distribution Engineer', distributionEngineer: 'Distribution Engineer',
reminderHandling: 'Reminder handling', reminderHandling: 'Reminder handling',
@@ -834,5 +834,6 @@ module.exports = {
verificationComplianceConfirmationProgress: 'Verification compliance confirmation progress', verificationComplianceConfirmationProgress: 'Verification compliance confirmation progress',
totalTable: 'Total', totalTable: 'Total',
newlyAdded: 'Newly Added', newlyAdded: 'Newly Added',
applicableSupplement: 'Applicable Supplement' applicableSupplement: 'Applicable Supplement',
taskDescription:'Task description',
} }
+3 -2
View File
@@ -787,7 +787,7 @@ module.exports = {
feedbackFromTheEngineer: '工程师反馈意见', feedbackFromTheEngineer: '工程师反馈意见',
completedBy: '填写人', completedBy: '填写人',
completedTime: '填写时间', completedTime: '填写时间',
replyFromProjectContactPerson: '工程接口人回复', replyFromProjectContactPerson: '责任人回复',
answer: '回复', answer: '回复',
distributionEngineer: '分发工程师', distributionEngineer: '分发工程师',
reminderHandling: '提醒办理', reminderHandling: '提醒办理',
@@ -839,5 +839,6 @@ module.exports = {
preHomeConfirmProgress: 'Pre-Home确认进度', preHomeConfirmProgress: 'Pre-Home确认进度',
verificationComplianceConfirmationProgress: '验证符合性确认进度', verificationComplianceConfirmationProgress: '验证符合性确认进度',
totalTable: '总数', totalTable: '总数',
applicableSupplement: '适用增补件' applicableSupplement: '适用增补件',
taskDescription: '任务说明'
} }
@@ -6,8 +6,8 @@
</div> </div>
</div> </div>
<div class="header-content"> <div class="header-content">
<!-- v-if="$route.query.TaskKey == 'zrrclrw'"-->
<div class="operator-text" <div class="operator-text"
v-if="$route.query.TaskKey == 'zrrclrw'"
@click="distributionEngineerClick($t('distributionEngineer'))"> @click="distributionEngineerClick($t('distributionEngineer'))">
<a-icon type="audit"/> <a-icon type="audit"/>
{{ $t('distributionEngineer') }} {{ $t('distributionEngineer') }}
@@ -18,6 +18,10 @@
<a-icon type="sound"/> <a-icon type="sound"/>
{{ $t('reminderHandling') }} {{ $t('reminderHandling') }}
</div> </div>
<a class="text"
@click="detailsClick()">
{{$t('details')}}
</a>
<div class="operator-text" <div class="operator-text"
v-if="$route.query.TaskKey == 'zrrclrw' || $route.query.TaskKey == 'dreDispose'" v-if="$route.query.TaskKey == 'zrrclrw' || $route.query.TaskKey == 'dreDispose'"
@click="distributionEngineerClick($t('addFeedback'))"> @click="distributionEngineerClick($t('addFeedback'))">
@@ -89,6 +93,23 @@
</a-form-model-item> </a-form-model-item>
</div> </div>
</a-col> </a-col>
<a-col :span="24" v-if="title == $t('distributionEngineer')">
<div v-if="formInline.userName">
<div class="box-title-text" v-for="item in formInline.userName.split(',')">
<div class="title-text">
<span class="Required">*</span>
<span class="title-text-text"
:title="item">{{item}}</span>
</div>
<a-form-model-item class="itemModel" prop="engineerFeedbackContent">
<a-textarea
:placeholder="$t('PleaseEnter')+$t('feedbackFromTheEngineer')"
:disabled="false"
v-model="formInline.engineerFeedbackContent" :rows="4"/>
</a-form-model-item>
</div>
</div>
</a-col>
<a-col :span="24" v-if="title == $t('addFeedback') || title == $t('edit')"> <a-col :span="24" v-if="title == $t('addFeedback') || title == $t('edit')">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
@@ -324,6 +345,18 @@
fixed: 'left', fixed: 'left',
customRender: (text, record, index) => `${index + 1}` customRender: (text, record, index) => `${index + 1}`
}, },
{
title: this.$t('completedBy'),
dataIndex: 'createBy',
ellipsis: true,
align: 'center'
},
{
title: this.$t('completedTime'),
dataIndex: 'createTime',
ellipsis: true,
align: 'center'
},
{ {
title: this.$t('feedbackFromTheEngineer'), title: this.$t('feedbackFromTheEngineer'),
dataIndex: 'engineerFeedbackContent', dataIndex: 'engineerFeedbackContent',
@@ -337,18 +370,6 @@
ellipsis: true, ellipsis: true,
scopedSlots: { customRender: 'Deliverables' } scopedSlots: { customRender: 'Deliverables' }
}, },
{
title: this.$t('completedBy'),
dataIndex: 'createBy',
ellipsis: true,
align: 'center'
},
{
title: this.$t('completedTime'),
dataIndex: 'createTime',
ellipsis: true,
align: 'center'
},
{ {
title: this.$t('replyFromProjectContactPerson'), title: this.$t('replyFromProjectContactPerson'),
dataIndex: 'engineeringInterfacePersonReply', dataIndex: 'engineeringInterfacePersonReply',
@@ -499,7 +520,7 @@
}) })
}, },
detailsClick(val) { detailsClick(val) {
this.formInlineDetails = val this.formInlineDetails = val || {}
this.visibleDetails = true this.visibleDetails = true
}, },
PersonnelSelectionChange(value, id) { PersonnelSelectionChange(value, id) {
@@ -45,6 +45,10 @@
projectInformationId: { projectInformationId: {
type: String, type: String,
default: '' default: ''
},
queryProject: {
type: Object,
default: {}
} }
}, },
data() { data() {
@@ -60,6 +64,9 @@
getAction(this.url.urlFrom, { id: this.projectInformationId }).then((res) => { getAction(this.url.urlFrom, { id: this.projectInformationId }).then((res) => {
if (res.success) { if (res.success) {
this.queryForm = res.result[0] || {} this.queryForm = res.result[0] || {}
if (this.queryProject) {
this.queryForm = { ...this.queryForm, ...this.queryProject }
}
} else { } else {
this.queryForm = {} this.queryForm = {}
} }
@@ -34,7 +34,7 @@
dataSource: [], dataSource: [],
loading: false, loading: false,
reviewResult: { reviewResult: {
'launch':this.$t('Launch'), 'launch': this.$t('Launch'),
'Compliance': this.$t('accord'), 'Compliance': this.$t('accord'),
'Non-Compliance': this.$t('nonConformity'), 'Non-Compliance': this.$t('nonConformity'),
'To be tracked': this.$t('Tracked'), 'To be tracked': this.$t('Tracked'),
@@ -81,10 +81,9 @@
methods: { methods: {
getList() { getList() {
let query = { let query = {
prcId: this.$route.query.actiProcInstId, actiProcInstId: this.$route.query.actiProcInstId
prcType: this.$route.query.flowType
} }
getAction('/workFlow/queryProcessHistoryByPrcId', query).then((res) => { getAction('/wkflow/processHistoryEO/list', query).then((res) => {
this.dataSource = res this.dataSource = res
}) })
} }
@@ -18,6 +18,7 @@
:projectInformationList="projectInformationList" :projectInformationList="projectInformationList"
:url="url" :url="url"
:projectInformationId="this.queryBy.projectLibraryId" :projectInformationId="this.queryBy.projectLibraryId"
:queryProject="queryProject"
/> />
<standardContent <standardContent
v-if="isDisplay" v-if="isDisplay"
@@ -85,45 +86,7 @@
title: this.$t('targetMarket'), title: this.$t('targetMarket'),
value: 'targetMarket_dictText' value: 'targetMarket_dictText'
}, },
{
title: this.$t('projectStatus'),
value: 'projectStatus_dictText'
},
{
title: this.$t('StudioEngineer'),
value: 'studioEngineerName'
},
{
title: this.$t('certifiedEngineer'),
value: 'certificationEngineerName'
},
{}, {},
{
title: this.$t('DigitalPlatform'),
value: 'digitalPlatform_dictText'
},
{
title: this.$t('ModelPlatform'),
value: 'vehiclePlatform_dictText'
},
{},
{
title: this.$t('IPDInformation'),
value: 'ipdInfo',
type: 1
},
{
title: this.$t('certificationProgram'),
value: 'attestationPlan',
type: 1
},
{
title: this.$t('dehicleDevelopmentPlan'),
value: 'vehicleDevelopmentPlan',
type: 1
}
],
standardContentList: [
{ {
title: this.$t('standard'), title: this.$t('standard'),
value: 'serialNumber' value: 'serialNumber'
@@ -133,13 +96,15 @@
value: 'title' value: 'title'
}, },
{ {
title: this.$t('subtitle'), title: this.$t('applicableSupplement'),
value: 'subtitle' value: 'applicableSupplement'
}, },
{ {
title: this.$t('correspondingStandard'), title: this.$t('remarks'),
value: 'correspondingStandard' value: 'remark'
}, }
],
standardContentList: [
{ {
title: this.$t('Sponsor'), title: this.$t('Sponsor'),
value: this.$route.query.Sponsor value: this.$route.query.Sponsor
@@ -149,14 +114,9 @@
value: this.$route.query.personLiable value: this.$route.query.personLiable
}, },
{ {
title: this.$t('regulatoryEngineer'), title: this.$t('cutoffTime'),
value: 'regulationOwnerName' value: this.$route.query.DueDate
}, },
{
title: this.$t('certifiedEngineer'),
value: 'homologationEngineerName'
},
{},
{ {
title: this.$t('typeOfDeliverables'), title: this.$t('typeOfDeliverables'),
value: this.$route.query.typeOfDeliverables value: this.$route.query.typeOfDeliverables
@@ -166,13 +126,10 @@
value: this.$route.query.deliverableTemplate, value: this.$route.query.deliverableTemplate,
type: 2 type: 2
}, },
{},
{ {
title: this.$t('technicalEvaluationResults'), title: this.$t('taskDescription'),
value: 'technicalEvaluationResults' value: this.$route.query.remarks
},
{
title: this.$t('remarks'),
value: 'remark'
} }
] ]
} }
@@ -289,6 +289,8 @@
personLiable: 'designDutyName', personLiable: 'designDutyName',
typeOfDeliverables: 'designDeliverableType_dictText', typeOfDeliverables: 'designDeliverableType_dictText',
deliverableTemplate: 'designDeliverableTemplate', deliverableTemplate: 'designDeliverableTemplate',
DueDate: 'designDueDate',
remarks: 'designRemark',
projectName: this.$route.query.projectName, projectName: this.$route.query.projectName,
projectNameId: this.$route.query.projectNameId, projectNameId: this.$route.query.projectNameId,
primaryKeyId: val.designTaskDetailId primaryKeyId: val.designTaskDetailId
@@ -309,6 +311,8 @@
personLiable: 'prehomoDutyName', personLiable: 'prehomoDutyName',
typeOfDeliverables: 'prehomoDeliverableType_dictText', typeOfDeliverables: 'prehomoDeliverableType_dictText',
deliverableTemplate: 'prehomoDeliverableTemplate', deliverableTemplate: 'prehomoDeliverableTemplate',
DueDate: 'prehomoDueDate',
remarks: 'prehomoRemark',
projectName: this.$route.query.projectName, projectName: this.$route.query.projectName,
projectNameId: this.$route.query.projectNameId, projectNameId: this.$route.query.projectNameId,
primaryKeyId: val.prehomoTaskDetailId primaryKeyId: val.prehomoTaskDetailId
@@ -329,6 +333,8 @@
personLiable: 'verifyDutyName', personLiable: 'verifyDutyName',
typeOfDeliverables: 'verifyDeliverableType_dictText', typeOfDeliverables: 'verifyDeliverableType_dictText',
deliverableTemplate: 'verifyDeliverableTemplate', deliverableTemplate: 'verifyDeliverableTemplate',
DueDate: 'verifyDueDate',
remarks: 'verifyRemark',
projectName: this.$route.query.projectName, projectName: this.$route.query.projectName,
projectNameId: this.$route.query.projectNameId, projectNameId: this.$route.query.projectNameId,
primaryKeyId: val.verifyTaskDetailId primaryKeyId: val.verifyTaskDetailId
@@ -281,6 +281,20 @@
</a-form-model-item> </a-form-model-item>
</div> </div>
</a-col> </a-col>
<a-col :span="12">
<div class="box-title-text">
<div class="title-text">
<span class="title-text-text"
:title="$t('applicableSupplement')">{{$t('applicableSupplement')}}</span>
</div>
<a-form-model-item class="itemModel" prop="applicableSupplement">
<a-input class="box-input"
:disabled="false"
v-model="formInline.applicableSupplement"
:placeholder="$t('PleaseEnter')+$t('applicableSupplement')"/>
</a-form-model-item>
</div>
</a-col>
</a-row> </a-row>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
@@ -418,6 +432,23 @@
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="title-text-text"
:title="$t('remarks')">{{$t('remarks')}}</span>
</div>
<a-form-model-item class="itemModel-text" :prop="'designRemark'">
<a-textarea
style="width: 100%"
:placeholder="$t('PleaseEnter')+$t('remarks')"
:disabled="formInline.taskAffirmStatus != 'Not started' && !formInline.designRemark ? true : false"
v-model="formInline.designRemark" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
</a-row>
<div class="header-text"> <div class="header-text">
&nbsp;{{$t('PrehomoConfirmation')}} &nbsp;{{$t('PrehomoConfirmation')}}
</div> </div>
@@ -540,6 +571,23 @@
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="title-text-text"
:title="$t('remarks')">{{$t('remarks')}}</span>
</div>
<a-form-model-item class="itemModel-text" :prop="'prehomoRemark'">
<a-textarea
style="width: 100%"
:placeholder="$t('PleaseEnter')+$t('remarks')"
:disabled="formInline.taskAffirmStatus != 'Not started' && !formInline.prehomoRemark ? true : false"
v-model="formInline.prehomoRemark" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
</a-row>
<div class="header-text"> <div class="header-text">
&nbsp;{{$t('verificationAndConformityconfirmation')}} &nbsp;{{$t('verificationAndConformityconfirmation')}}
</div> </div>
@@ -660,6 +708,23 @@
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="title-text-text"
:title="$t('remarks')">{{$t('remarks')}}</span>
</div>
<a-form-model-item class="itemModel-text" :prop="'verifyRemark'">
<a-textarea
style="width: 100%"
:placeholder="$t('PleaseEnter')+$t('remarks')"
:disabled="formInline.taskAffirmStatus != 'Not started' && !formInline.verifyRemark ? true : false"
v-model="formInline.verifyRemark" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
</a-row>
</a-form-model> </a-form-model>
</a-spin> </a-spin>
<div class="drawer-bootom-button"> <div class="drawer-bootom-button">
@@ -711,7 +776,35 @@
message: this.$t('remarks') + this.$t('cannotExceed') + 300 + this.$t('Characters'), message: this.$t('remarks') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
trigger: 'blur' trigger: 'blur'
} }
] ],
applicableSupplement: [
{
max: 100,
message: this.$t('applicableSupplement') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
trigger: 'blur'
}
],
designRemark:[
{
max: 300,
message: this.$t('remarks') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
trigger: 'blur'
}
],
verifyRemark:[
{
max: 300,
message: this.$t('remarks') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
trigger: 'blur'
}
],
prehomoRemark:[
{
max: 300,
message: this.$t('remarks') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
trigger: 'blur'
}
],
}, },
formInline: {}, formInline: {},
regulatoryEngineerList: [], regulatoryEngineerList: [],
@@ -146,7 +146,7 @@
{{ $t('deleteLib') }} {{ $t('deleteLib') }}
</a> </a>
<!-- <a class="text-operation" @click="resultReportedClick(record)">{{$t('resultReported')}}</a>--> <!-- <a class="text-operation" @click="resultReportedClick(record)">{{$t('resultReported')}}</a>-->
<!-- <a @click="addProcess(record)">发起</a>--> <!-- <a @click="addProcess(record)">发起</a>-->
</span> </span>
<span slot="titleName" slot-scope="text,record" :title="text"> <span slot="titleName" slot-scope="text,record" :title="text">
{{ text && text.length > 10 ? text.slice(0, 9) + '...' : text }} {{ text && text.length > 10 ? text.slice(0, 9) + '...' : text }}
@@ -418,6 +418,13 @@
width: 180, width: 180,
scopedSlots: { customRender: 'titleName' } scopedSlots: { customRender: 'titleName' }
}, },
{
title: this.$t('applicableSupplement'),
align: 'center',
width: 180,
dataIndex: 'applicableSupplement',
scopedSlots: { customRender: 'titleName' }
},
{ {
title: 'WVTA ID', title: 'WVTA ID',
align: 'center', align: 'center',
@@ -1457,12 +1464,14 @@
color: #040B29; color: #040B29;
margin-bottom: 22px; margin-bottom: 22px;
} }
.itemModelComment{
.itemModelComment {
width: calc(100% - 64px); width: calc(100% - 64px);
display: inline-block; display: inline-block;
margin-top: 2px; margin-top: 2px;
} }
.title-text-Comment{
.title-text-Comment {
width: 74px; width: 74px;
text-align: right; text-align: right;
display: inline-block; display: inline-block;
@@ -1497,7 +1506,8 @@
padding: 0; padding: 0;
border-top: none; border-top: none;
} }
.itemModelComment .ant-form-item-control-wrapper{
.itemModelComment .ant-form-item-control-wrapper {
width: 100% !important; width: 100% !important;
} }
</style> </style>
@@ -34,6 +34,7 @@
<span class="box-top-text">{{$t('regulatoryCertificationTaskPlan')}}</span> <span class="box-top-text">{{$t('regulatoryCertificationTaskPlan')}}</span>
<div class="box-top-content"> <div class="box-top-content">
<div id="main"></div> <div id="main"></div>
<div class="axis-tip"></div>
</div> </div>
</div> </div>
<div class="box-bottom"> <div class="box-bottom">
@@ -94,7 +95,9 @@
loading: false, loading: false,
dataSource: [], dataSource: [],
url: { url: {
list: '/project/ProjectStatusBoardController/scheduleInfoList' list: '/project/ProjectStatusBoardController/scheduleInfoList',
timeline: '/project/ProjectStatusBoardController/timeline',
timelineList: '/project/ProjectStatusBoardController/timelineList'
}, },
columns: [ columns: [
{ {
@@ -157,32 +160,59 @@
}, },
mounted() { mounted() {
this.getList() this.getList()
this.getEcharts() this.getTimeline()
}, },
methods: { methods: {
getEcharts() { getTimeline() {
getAction(this.url.timeline, {}).then((res) => {
if (res.success) {
this.getTimelineList(res.result)
}
})
},
getTimelineList(time) {
getAction(this.url.timelineList, {}).then((res) => {
if (res.success) {
this.getEcharts(time, res.result)
}
})
},
getEcharts(timeList, timeData) {
var chartDom = document.getElementById('main') var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom) var myChart = echarts.init(chartDom)
var option var option
let list = []
let listTime = []
for (let i = 0; i < timeList.length; i++) {
for (let j = 0; j < 31; j++) {
let num
if ((j + 1) < 10) {
num = '0' + (j + 1)
} else {
num = (j + 1)
}
listTime.push(timeList[i])
list.push(timeList[i] + '-' + num)
}
}
console.log(listTime)
const hours = listTime
const days = []
// prettier-ignore if (timeData && timeData.length > 0) {
const hours = [ timeData.forEach(res => {
'12a', '1a', '2a', '3a', '4a', '5a', '6a', days.push(res.projectName)
'12a', '1a', '2a', '3a', '4a', '5a', '6a' })
] }
const days = [
'Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
]
const data = [ const data = [
[0, 0, 14], [0, 1, 5], [0, 2, 5], [0, 3, 5], [0, 4, 5], [0, 5, 5], [0, 6, 5], [0, 7, 5], [0, 0, 14], [0, 1, 5], [0, 2, 5], [0, 3, 5], [0, 4, 5], [0, 5, 5],
[1, 0, 5], [1, 2, 5], [1, 3, 5], [1, 4, 5], [1, 5, 5], [1, 6, 5], [1, 7, 5], [1, 1, 5], [1, 0, 5], [1, 2, 5], [1, 3, 5], [1, 4, 5], [1, 5, 5], [1, 6, 5],
[2, 0, 14], [2, 1, 14], [2, 2, 14], [2, 3, 14], [2, 4, 14], [2, 5, 14], [2, 6, 14], [2, 7, 14], [2, 0, 14], [2, 1, 14], [2, 2, 14], [2, 3, 14], [2, 4, 14], [2, 5, 14],
[3, 0, 14], [3, 1, 14], [3, 2, 14], [3, 3, 14], [3, 4, 14], [3, 5, 14], [3, 6, 14], [3, 7, 14], [3, 0, 14], [3, 1, 14], [3, 2, 14], [3, 3, 14], [3, 4, 14], [3, 5, 14],
[4, 0, 14], [4, 1, 14], [4, 2, 14], [4, 3, 14], [4, 4, 14], [4, 5, 14], [4, 6, 14], [4, 7, 14], [4, 0, 14], [4, 1, 14], [4, 2, 14], [4, 3, 14], [4, 4, 14], [4, 5, 14],
[5, 0, 14], [5, 1, 14], [5, 2, 14], [5, 3, 14], [5, 4, 14], [5, 5, 14], [5, 6, 14], [5, 7, 14], [5, 0, 14], [5, 1, 14], [5, 2, 14], [5, 3, 14], [5, 4, 14], [5, 5, 14],
[6, 0, 14], [6, 1, 14], [6, 2, 14], [6, 3, 14], [6, 4, 14], [6, 5, 14], [6, 6, 14], [6, 7, 14], [6, 0, 14], [6, 1, 14], [6, 2, 14], [6, 3, 14], [6, 4, 14], [6, 5, 14]
[6, 8, 14], [6, 9, 14], [6, 10, 14], [6, 11, 14], [6, 12, 14], [6, 13, 14], [6, 14, 14], [6, 15, 14]
].map(function(item) { ].map(function(item) {
return [item[1], item[0], item[2]] return [item[1], item[0], item[2]]
}) })
@@ -206,7 +236,7 @@
grid: { grid: {
top: 0, top: 0,
left: 2, left: 2,
right: 20, right: 40,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@@ -222,8 +252,7 @@
position: 'top', position: 'top',
axisLabel: { axisLabel: {
showMinLabel: true, showMinLabel: true,
showMaxLabel: true, interval: 31,
interval: 2,
textStyle: { textStyle: {
fontFamily: 'Blue Sky Noto', fontFamily: 'Blue Sky Noto',
color: '#000F16', color: '#000F16',
@@ -246,13 +275,24 @@
axisTick: { axisTick: {
show: false show: false
}, },
scale: true,
triggerEvent: true,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontFamily: 'Blue Sky Noto', fontFamily: 'Blue Sky Noto',
color: '#000F16', color: '#000F16',
fontSize: '16' fontSize: '16'
}, },
margin: 50 margin: 50,
formatter: function(params) {
var val = ''
if (params.length > 8) {
val = params.substr(0, 8) + '...'
return val
} else {
return params
}
}
} }
}, },
series: [ series: [
@@ -270,6 +310,20 @@
} }
option && myChart.setOption(option) option && myChart.setOption(option)
myChart.on('mouseover', 'yAxis.category', function(e) {
console.log(e)
let axisTip = document.querySelector('.axis-tip')
console.log(axisTip)
axisTip.innerText = e.value
axisTip.style.left = 100 + 'px'
axisTip.style.top = (e.event.event.y) - 180 + 'px'
axisTip.style.display = 'block'
})
myChart.on('mouseout', 'yAxis.category', function(e) {
let axisTip = document.querySelector('.axis-tip')
axisTip.innerText = ''
axisTip.style.display = 'none'
})
}, },
searchQuery() { searchQuery() {
this.getList() this.getList()
@@ -350,4 +404,16 @@
width: 100%; width: 100%;
height: 200%; height: 200%;
} }
.axis-tip {
display: none;
position: absolute;
padding: 5px 5px;
font-size: 12px;
line-height: 18px;
color: #575757;
background: #ffffff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
</style> </style>