You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
7.5 KiB
197 lines
7.5 KiB
10 months ago
|
<template>
|
||
|
|
<view class="chart-list">
|
||
|
|
<view :class="['bar', item.answerId == '0' ? 'currAnswer' : '']" v-for="(item, i) in msgList" :key="item.id">
|
||
|
|
<view class="user-box">
|
||
|
|
<image :src="
|
||
|
|
item.answerId == '0'
|
||
|
|
? 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwQjdBNUI1OTNGMzExRTk5OEMyRUJEREM0NTA0NzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwQjdBNUI2OTNGMzExRTk5OEMyRUJEREM0NTA0NzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjBCN0E1QjM5M0YzMTFFOTk4QzJFQkREQzQ1MDQ3MUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjBCN0E1QjQ5M0YzMTFFOTk4QzJFQkREQzQ1MDQ3MUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6ceP8WAAAFRUlEQVR42sxYa0xbVRzvvb29bS9taQvtYBQ63kxhsBlw6mbwQZyabE4H6geTZfOR+MFPiyZO4jRxiYl+UOOXOdTERxyLcxs+trkFxbGxwZgb22CAPDoKpQ8ofVFa7q3/g7ekK33ce9st/pNfbnLPOf/zyzn/839hoVBIJEBKAHWAdYACQA5Azo7NAywAE+Aq4CJgmO8GGA9iFGA7YBugiOc+I4BjgJ8AvnQREwOaAC8DMkWpyRzgIKAVQKdCDF3TB4C1ovRKP2Ave90xBU+weDPgmztASsTq/JbdgxexJwEfATJEd04odo+nuF7lw+wCXHR3hAHsAXQkImZkr4/iorHvHxv13cl+fdf1KbXPHxSH/5OEmKkqznY3PV5urV9f4MKwpKrQS30JMB6LGFL8dTKbYpiQ6LeuUfWP7YP6ayN25ZI9YFho59OV5qK8TL911idpaevL884HCTSWp1P4n60vs+54pMwhlxJMkgexM/xaI6+riYuh/3B6IPu9lnPFYVLLRvlA4WzXtSnV5mqDi4ogYLZ5ZJ8d7i34+PvuPA4P4vlo46dYP5VU6u7JdeMx7iZHmxEkJWIGkZKRxAofdV9FjpuD+t1hMwoT287VeZYY1AsNdUbbbdcbCmG79p8oz9crF97/6rzxltUtjxwvK9B4tmwsdHJQn8lyWbaxVj5hxulZEL/24akytBQdXiBIwyH+d4oSAmdoOoRRMoImxHgI4fXnasw1pXofR/UofDUhAy3lG/vUCikNRi4FAxcnm4sehlYlW+ShHnEpRcRqhTifrZuKrRaHj7wxZlcgktHuEMgHy41ar05NBQpWqQI81dciYpVCiP15eUJjc/rI0nyNt7Io24PjWAg9CoZl6JjzS64M2ZRZmbKgAPVViFihEGKrwT9N2j2yG6MOJSDuvNxshVuA+jXoVeqFENt4b64rnfOiRI9zDT/RAt7ckSGXJMypYHwRzRMS4AUHaoVcwry6rXoi0RwYN6N5QvTjXFPdWPJiQ4UdQpEtZt4E/9G4QNU+RMyaSs7y7q4HTcg1RLsK9D8FtVZEbCwVYl5Id7Co2IlcBgpTKagdQ+6iD9DAZ5VnPoh3XjWregYsio7LE9rP9zw2+PeQjfqk9ZIR2d0T969xvtD889oN5XoXBG/PQ+vyXDxtrQ8R6+Y62zbrIz493Lu6vfdWFoqP4f+nLoyraTihhQCNO91+4gTka6ZplxzhaMfwKikpZurX5zveaNwwqdNQXMJTN1I+xAbOhHK6ezyz8Z22ypMXxnSRpJYMwumT7KgvtZcYNN5N1YY564yPjBxHhNG6pua2yjM948myGMRlKLzB8UQz4dqUzQfOFkemz5HSUGt0nr8+pRyemM34/eKYZvfWKgsKUSvsEYJ+84HO4nN9k4oE2x2PzMeOsMVoTIHrM9BMfGM+9tdwloJ1tih9bj1zM5uJM3+RZjDIaA1xVLlYLsvEkC9ribexFDLTRCd69opZq5CTS8SMOSr/L50juoR1Q/wXezDsV4mIn4fYenJF3v/l3i2DR/4Y0rZfMmkGTDMZ4UIj8hR6+i1KJUUuznkWCMuMVxqtA9JtBrJf7+Yag7Px0fJYjvcmy0F4+TZl90igyCCnoSKanvGSyLgpmYSGrJVBX5PFJSMIPAS5WDBHSwUgEwkYdMoA2J2g8u1/VfDG2hxN2McuuBuk9kWTStS7+BXwZioBnkugBrzF7iWoDbUfUJFmUgOAtxO1ofg07l4BqFIkhPzUF+lo3N2WGwKeYVudfOuEUbbVeRTlAOnuwSZrDlMRtpNyc/hfAQYAFFwdv9Iba+4AAAAASUVORK5CYII='
|
||
|
|
: '/static/task/3804.png'
|
||
|
|
" class="img" />
|
||
|
|
<view class="user-name font-family-SM" v-show="item.answerId != '0'">
|
||
|
|
智能排查助手
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<view style="width: 100%;">
|
||
|
|
<zeroMarkdownView :markdown="item.data || ''" />
|
||
|
|
</view>
|
||
|
|
<!-- <ua-markdown :source="mdvalue" /> -->
|
||
|
|
<view class="btnBox">
|
||
|
|
<view class="btn" v-for="(text, index) in item.options" :key="index">
|
||
|
|
{{ text||'' }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 1"
|
||
|
|
style="display: flex; flex-wrap: wrap;" :class="item.answerOptions.length > 1 ? '' : 'btnBox'">
|
||
|
|
<u-checkbox-group v-model="item.checkboxValue1" placement="column" iconPlacement="right"
|
||
|
|
style="width: 100%; padding: 0 15px; box-sizing: border-box">
|
||
|
|
<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in item.answerOptions"
|
||
|
|
:key="index" :label="item" :name="item" style="background-color: #ededed;padding: 8px;">
|
||
|
|
</u-checkbox>
|
||
|
|
</u-checkbox-group>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 0"
|
||
|
|
:style="item.answerOptions.length > 2 ? 'display: flex; flex-wrap: wrap;' : ''"
|
||
|
|
:class="item.answerOptions.length > 2 ? '' : 'btnBox'">
|
||
|
|
<view v-for="(it, ind) in item.answerOptions" :key="ind"
|
||
|
|
:style="item.answerOptions.length > 2 ? 'padding: 8px 8px;margin:0 0 8px 8px;background-color: #ededed' : ''"
|
||
|
|
:class="item.answerOptions.length > 2 ? '' : 'btn'">
|
||
|
|
{{ it ||''}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="btnBox" v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 1">
|
||
|
|
<view class="btn">清空</view>
|
||
|
|
<view class="btn">确认</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import zeroMarkdownView from "@/components/zeroMarkdownView/zeroMarkdownView.vue";
|
||
|
|
export default {
|
||
|
|
name: 'chart-list',
|
||
|
|
components: {
|
||
|
|
zeroMarkdownView
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
chartList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ([])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
msgList() {
|
||
|
|
if (this.chartList && this.chartList.length) {
|
||
|
|
let id = 1
|
||
|
|
let arr = []
|
||
|
|
this.chartList.forEach((item, index) => {
|
||
|
|
let questionList = {
|
||
|
|
answerId: '1',
|
||
|
|
id,
|
||
|
|
data: item.question
|
||
|
|
}
|
||
|
|
let responseList = {
|
||
|
|
answerId: '0',
|
||
|
|
id: id + 1,
|
||
|
|
data: item.response
|
||
|
|
}
|
||
|
|
arr.push(questionList)
|
||
|
|
arr.push(responseList)
|
||
|
|
id += 2
|
||
|
|
})
|
||
|
|
return arr
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.chart-list {
|
||
|
|
width: calc(100% - 16px);
|
||
|
|
margin: auto;
|
||
|
|
// height: calc(100% - 340rpx);
|
||
|
|
background-color: #f0f2f7;
|
||
|
|
padding: 8px;
|
||
|
|
|
||
|
|
.bar {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 80rpx;
|
||
|
|
|
||
|
|
// overflow: hidden;
|
||
|
|
.user-box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.user-name {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
color: rgba(54, 63, 77, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btnBox {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
position: absolute;
|
||
|
|
right: -2px;
|
||
|
|
bottom: -44px;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
color: #2663BF !important;
|
||
|
|
background-color: rgba(0, 102, 255, 0.1) !important;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
// width: 132px;
|
||
|
|
min-width: 72rpx;
|
||
|
|
padding: 10rpx 14rpx;
|
||
|
|
margin: 10rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 0;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
// flex: 1;
|
||
|
|
// overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
background-color: #ffffff;
|
||
|
|
width: calc(100% - 6rpx);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
._img {
|
||
|
|
max-width: 80%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.currAnswer {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
position: relative;
|
||
|
|
padding-top: 10px;
|
||
|
|
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: #cce0ff;
|
||
|
|
max-width: 80%;
|
||
|
|
margin: 0rpx 26rpx;
|
||
|
|
width: auto;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-width: 10px;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: transparent transparent transparent rgba(204, 224, 255, 1);
|
||
|
|
right: -17px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.zero-markdown-view {
|
||
|
|
padding: 0rpx 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|