kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ai助手完成

Browse Source
This commit is contained in:
aixianling
2024-01-15 19:11:44 +08:00
parent fdb5226b31
commit ee78546e7a
3 changed files with 361 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
components/AiAssist.vue
View File

@@ -1,40 +1,123 @@
<script>
import AiDrag from "./AiDrag.vue";
import {Loading} from "element-ui";
import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
import AiEchart from "dui/packages/tools/AiEchart.vue";
export default {
name: "AiAssist",
components: {AiDrag},
components: {AiEchart, AiDvSvg, AiDrag},
data() {
return {
dialog: false,
prompt: "",
content: "",
assistPos: {}
assistPos: {},
reply: {
table: [
{address: "张家堡街道", count: 132, handle: 132},
{address: "徐家湾街道", count: 125, handle: 225},
{address: "未央湖街道", count: 157, handle: 572},
{address: "辛家庙街道", count: 142, handle: 422},
{address: "六村堡街道", count: 233, handle: 453},
],
chart: {
ops: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color: '#00EFFF',
yAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(179, 223, 255, 0.5)',
width: 1
}
},
axisLabel: {
color: '#8FABBF',
},
axisTick: {
alignWithLabel: true,
show: false
},
data: ['贷款', '诈骗', '失火', '消防', '醉酒']
},
xAxis: {
type: 'value',
axisLabel: {
color: '#8FABBF',
interval: 0
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(61, 82, 102, 0.65)',
width: 1,
type: 'dashed'
}
}
},
grid: {
left: '4%',
right: '1%',
bottom:0,
top: 0,
containLabel: true
},
series: [
{
data: [919, 1210, 9794, 3559, 743],
type: 'bar',
barWidth: '25%',
itemStyle: {
color: {
type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [
{offset: 0, color: '#02FEFF'},
{offset: 1, color: '#00527d1c'}
]
}
},
backgroundStyle: {
color: '#00527d1c'
}
}
]
}
}
}
}
},
computed: {
isAiResult: v => v.content == "您好!一下是这个月敏感词触发情况概览:"
},
methods: {
confirm() {
const loading = Loading.service({fullscreen: true, text: "助手回复中..."});
if (this.prompt.includes("")) {
const loading = Loading.service({fullscreen: true, text: "助手回复中...", background: "rgba(0, 0, 0, 0.2)"});
if (/(网格建设|居民报事|居民档案|两委干部|敏感词)/.test(this.prompt)) {
setTimeout(() => {
loading.close()
this.dialog = false
if (/(网格建设|居民报事|居民档案|两委干部|敏感词)/.test(this.prompt)) {
}
},)
this.content = "您好!一下是这个月敏感词触发情况概览:"
}, 3000)
} else {
this.content = "抱歉，我还没有学习到关于这个话题的内容，无法提供相关信息。您可以选择其他问题，我将努力为您解答。"
loading.close()
this.dialog = false
// this.dialog = false
}
this.prompt = ""
}
},
},
watch: {
dialog(v) {
document.body.onclick = v ? () => this.dialog = false : null
if (!v) {
this.content = ""
}
}
},
mounted() {
@@ -51,8 +134,8 @@ export default {
<div class="avatar-text" v-text="'全局AI助手'"/>
</div>
<ai-drag class="assistDialog" v-if="dialog" :resizable="false">
<div class="inbox" :style="assistPos" v-if="!content">
<dv-border-box-1 background-color="#001C30">
<div class="inbox" :style="assistPos">
<dv-border-box-1 v-if="!content" background-color="#001C30">
<div class="title mar-b32 mar-t16">慧智会言</div>
<el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
<template #append><i class="el-icon-microphone">语音输入</i></template>
@@ -62,9 +145,28 @@ export default {
<div class="btn" @click="confirm">确定</div>
</div>
</dv-border-box-1>
<div class="reply">
<div v-html="content"/>
</div>
<ai-dv-svg v-else class="reply" @close="dialog=false">
<div class="w100" v-html="content"/>
<template v-if="isAiResult">
<div class="glass flex mar-v8">
<div class="sta fill">网格员总人数<span>5118</span>
<p>人</p></div>
<div class="sta">网格划分<span>3118</span>
<p>个</p></div>
</div>
<h2>敏感词处理情况</h2>
<el-table size="mini" :data="reply.table" stripe class="w100 mar-v8">
<el-table-column prop="address" label="地方"/>
<el-table-column prop="count" label="触发次数" width="100" align="right"/>
<el-table-column prop="handle" label="已处理" width="100" align="right"/>
</el-table>
<h2>敏感词触发统计</h2>
<ai-echart v-bind="reply.chart" class="mar-v8" id="KeywordChart"/>
<div class="flex column">
<div class="btn">导出到本地</div>
</div>
</template>
</ai-dv-svg>
</div>
</ai-drag>
</section>
@@ -138,17 +240,106 @@ $theme-color: #23ECFD;
}
.reply {
min-width: 300px;
min-height: 400px;
$bg: rgba(#0A2234, .88);
background-image: linear-gradient(to bottom, #5ac8f6 0, $bg 20px, $bg 100%);
box-shadow: 1px 1px 1px $theme-color inset, -1px -1px 1px $theme-color inset;
$w: 16px;
$h: 14px;
$r: 200px;
$vv: calc(100% - #{$w});
$hh: calc(100% - #{$h});
clip-path: polygon($w 0, calc(100% - #{$w} * 2 - #{$r}) 0, calc(100% - #{$w} - #{$r}) $h, $vv $h, 100% calc(#{$h} * 2), 100% $hh, $vv 100%, $w 100%, 0 $hh, 0 $h);
font-size: 14px;
.glass {
width: 100%;
padding: 18px 14px;
background: hsla(0, 0%, 100%, .04);
}
.sta {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
span {
font-family: D-DIN;
font-size: 18px;
color: $theme-color;
}
p {
color: $theme-color;
}
}
h2 {
font-size: 14px;
height: 30px;
line-height: 30px;
padding: 0px 10px;
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
}
.el-table {
font-size: 13px;
color: #fff;
background-color: transparent !important;
.el-table__header {
background: rgba(33, 180, 253, 0.1);
}
&::before {
display: none !important;
}
tr.el-table__row--striped td {
background: rgba(33, 180, 253, 0.1) !important;
}
.el-table th.el-table__cell {
background: transparent !important;
}
.el-table__header tr th:first-child .cell {
padding-left: 20px !important;
}
.el-table__header tr th.is-right .cell {
padding-right: 20px !important;
}
.el-table__body tr td.is-right .cell {
padding-right: 20px !important;
}
.el-table__body tr td:first-child .cell {
padding-left: 20px !important;
}
&.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: rgba(33, 180, 253, 0.1) !important;
}
td.el-table__cell, th.el-table__cell.is-leaf {
border-bottom: none !important;
}
th.el-table__cell {
background-color: transparent !important;
}
tr {
background-color: transparent !important;
}
.el-table__cell {
padding: 7px 0;
color: #d0e1e8;
}
.el-table__header tr .cell {
color: #02FEFF !important;
}
}
#KeywordChart {
width: 100%;
height: 180px;
}
}
}

143
components/layout/AiDvSvg/AiDvSvg.vue Normal file
View File

@@ -0,0 +1,143 @@
<script>
const w = 12, h = 10, r = 200
export default {
name: "AiDvSvg",
data() {
return {
border: "",
box: {},
height: 0,
width: 0
}
},
methods: {
init() {
let {width, height} = this.$el.getBoundingClientRect()
width -= 13 * 2
height -= 13 * 2
this.width = width
this.height = height
this.getBorder(width, height)
const vv = width - w, hh = height - h
this.box = {
top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
rightBottom: `m${vv - 8},${height + 8}l-2.5,3l7,0l2.5,-3l-7,0zm17.5,-2.5l-7,0l-4.5,5.5l7,0l4.5,-5.5zm-3.5,5.5l7,0l6,-7l-7,0l-6,7z`,
}
},
getBorder(cw, ch) {
const vv = cw - w, hh = ch - h
this.border = `${w} 0,${cw - w * 2 - r} 0,${cw - w - r} ${h}, ${vv} ${h},${cw} ${h * 2},${cw} ${hh}, ${vv} ${ch},${w} ${ch},0 ${hh},0 ${h}`
},
},
mounted() {
this.$nextTick(() => this.init())
}
}
</script>
<template>
<section class="AiDvSvg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<polygon :points="border" id="path-1"/>
<filter id="filter-2" filterUnits="objectBoundingBox" height="105.6%" width="108.5%" y="-3.3%" x="-4.2%">
<feGaussianBlur result="shadowBlurOuter1" in="shadowOffsetOuter1" stdDeviation="6"/>
</filter>
<linearGradient id="linearGradient-3" y2="50.1547687%" x2="23.733%" y1="49.6234888%" x1="23.7333333%">
<stop offset="0%" stop-color="#0D5B8C"/>
<stop offset="61.81%" stop-opacity="0.18" stop-color="#1275B3"/>
<stop offset="100%" stop-opacity="0.01" stop-color="#137ABA"/>
</linearGradient>
<linearGradient id="linearGradient-4" y2="50%" x2="100%" y1="50%" x1="0%">
<stop offset="0%" stop-opacity="0" stop-color="#4ACCED"/>
<stop offset="48.88%" stop-color="#4ACCED"/>
<stop offset="100%" stop-opacity="0" stop-color="#49CDEE"/>
</linearGradient>
<linearGradient id="linearGradient-5" y2="50%" x2="100%" y1="50%" x1="0%">
<stop offset="0%" stop-opacity="0" stop-color="#A4EEEF"/>
<stop offset="48.88%" stop-color="#A4EEEF"/>
<stop offset="100%" stop-opacity="0" stop-color="#A4EEEF"/>
</linearGradient>
<linearGradient id="linearGradient-6" y2="50%" x2="100%" y1="50%" x1="0%">
<stop offset="0%" stop-color="#21EDED"/>
<stop offset="100%" stop-color="#276269"/>
</linearGradient>
<linearGradient id="linearGradient-7" y2="50%" x2="0%" y1="50%" x1="100%">
<stop offset="0%" stop-color="#21EDED"/>
<stop offset="100%" stop-color="#276269"/>
</linearGradient>
<linearGradient id="linearGradient-8" y2="50%" x2="100%" y1="50%" x1="0%">
<stop offset="0%" stop-opacity="0" stop-color="#0061AB"/>
<stop offset="51.39%" stop-color="#0061AB"/>
<stop offset="100%" stop-opacity="0" stop-color="#0062AB"/>
</linearGradient>
</defs>
<g>
<g fill-rule="evenodd" fill="none" id="未央区">
<g id="弹窗6备份">
<g id="编组-11">
<g stroke-dasharray="0,0" id="路径">
<use id="svg_1" x="13" y="17" xlink:href="#path-1" filter="url(#filter-2)" fill="black"/>
<use id="svg_2" x="13" y="17" xlink:href="#path-1" fill-rule="evenodd" fill="#0A2234" fill-opacity="0.88" stroke="#22D3D4"/>
</g>
<!-- <path fill="url(#linearGradient-3)" id="路径" d="m497,46.5l-15,-14l-250.5,0l-16.5,-15.5l-188.5,0l-13.5,15.5l0,26.5l484,0l0,-12.5z"/>-->
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-4)" id="路径-3" y2="17.5" x2="175" y1="17.5" x1="26.5"/>
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-5)" id="路径-3" y2="17.5" x2="149.5" y1="17.5" x1="58"/>
<path fill="url(#linearGradient-6)" id="上部拼合图形" :d="box.top"/>
<path fill="url(#linearGradient-6)" id="左下拼合图形" :d="box.leftBottom"/>
<path fill="url(#linearGradient-7)" id="右下拼合图形" :d="box.rightBottom"/>
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="底部亮线" :y2="height+10" :x2="width/2+110" :y1="height+10" :x1="width/2-110+26"/>
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="标题下划线" y2="65" x2="248" y1="65" x1="23"/>
</g>
</g>
</g>
</g>
</svg>
<div class="close" @click="$emit('close')"/>
<div class="content">
<div class="header">慧智会言</div>
<slot/>
</div>
</section>
</template>
<style scoped lang="scss">
.AiDvSvg {
position: relative;
width: max(400px, 100%);
height: auto;
& > svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content {
width: 100%;
height: 100%;
padding: 14px 33px;
.header {
padding: 16px 0;
font-weight: bold;
}
}
.close {
background-image: url("./assets/close.png");
width: 24px;
height: 24px;
position: absolute;
right: 20px;
top: 35px;
z-index: 6;
}
}
</style>

BIN
components/layout/AiDvSvg/assets/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 B