树图样式修改，接口修改，仁策智答pc页面优化4处

jialh

2024-12-09 002ac4bd7c3ed67cb73a3cebfcfe2a2ba2baeee1

树图样式修改，接口修改，仁策智答pc页面优化4处

 src/view/IntelligentAgent/allAgent.vue

@@ -44,10 +44,11 @@
                            </Poptip>
                        </div>
                        <Poptip :content="item.Description" placement="top" trigger="hover" word-wrap width="300">
                            <div>{{ item.Description.length > 20 ?
                                item.Description.substring(0, 20) + '...' : item.Description }}</div>
                            <div>{{ item.Description.length > 25 ?
                                item.Description.substring(0, 25) + '...' : item.Description }}</div>
                        </Poptip>
                        <div>
                            <span style="margin-right: 10px;">{{item.UserNo}}人聊过</span>
                            <Tooltip :content="item.FavoriteFlag == 1 ? '取消收藏' : '收藏'" class="tableActionMargin"
                                theme="light" transfer placement="top">
                                <Icon custom="custom custom-xingbiao" size="18"

 src/view/IntelligentAgent/myAgent.vue

@@ -94,11 +94,15 @@
                </Option>
            </Select>
            <div style="margin-top: 10px;font-weight: 600;">描述(必填)</div>
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100" show-word-limit
                placeholder="请输入智能体描述" />
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100"
                show-word-limit placeholder="请输入智能体描述" />
            <div style="margin-top: 10px;font-weight: 600;">提示词(必填)</div>
            <Input v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
                placeholder="示例：你是一位经验丰富的英语老师，拥有激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味。" />
            <div style="margin-top: 10px;font-weight: 600;">模型API(非必填)</div>
            <Input v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">模型KEY(非必填)</div>
            <Input v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">权限设置</div>
            <Select v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
                <Option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}
@@ -136,11 +140,15 @@
                </Option>
            </Select>
            <div style="margin-top: 10px;font-weight: 600;">描述(必填)</div>
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100" show-word-limit
                placeholder="请输入智能体描述" />
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100"
                show-word-limit placeholder="请输入智能体描述" />
            <div style="margin-top: 10px;font-weight: 600;">提示词(必填)</div>
            <Input v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
                placeholder="示例：你是一位经验丰富的英语老师，拥有激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味。" />
            <div style="margin-top: 10px;font-weight: 600;">模型API(非必填)</div>
            <Input v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">模型KEY(非必填)</div>
            <Input v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">权限设置</div>
            <Select v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
                <Option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}
@@ -185,7 +193,9 @@
                AvatarLink: 0,
                AgentType: Number(this.type),
                CreatorId: this.userId,
                Prompt: ''
                Prompt: '',
                ModelApi: '',
                ModelKey: ''
            },

            isDisabled: false, // 展示详情时为TRUE

 src/view/echarts/tree.vue

@@ -32,7 +32,7 @@
        return {
            loadingSub: false,
            disableButton: false,
            message:'',
            message: '',
            // message: '苏州宝丽迪材料科技股份有限公司',
            // treeData: {
            //     name: '总企业',
@@ -127,91 +127,91 @@
            this.Echarts = echarts.init(this.$refs['ent-tree']);
            // this.Echarts.setOption(this.getTreeOptions());
        },
        // getTreeOptions() {
        //     return {
        //         tooltip: {
        //             trigger: 'item',
        //             triggerOn: 'mousemove'
        //         },
        //         series: [
        //             {
        //                 type: 'tree',
        //                 data: [this.treeData],
        //                 nodePadding: 30,
        //                 layerPadding: 10,
        //                 name: '树图',
        //                 top: '1%',
        //                 left: '1%',
        //                 bottom: '1%',
        //                 right: '1%',
        //                 layout: 'orthogonal',
        //                 orient: 'horizontal',
        //                 zoom: 0.8,
        //                 roam: true,
        //                 scaleLimit: {
        //                     min: 0.2,
        //                     max: 1
        //                 },
        //                 initialTreeDepth: undefined,
        //                 symbol: 'circle',
        //                 symbolSize: 6,
        //                 itemStyle: {
        //                     color: '#0780ED',
        //                     borderCap: 'round'
        //                 },
        //                 label: {
        //                     show: true,
        //                     distance: 8,
        //                     position: ['50%', '50%'],
        //                     verticalAlign: 'middle',
        //                     align: 'center',
        //                     fontSize: 16,
        //                     color: '#333',
        //                     backgroundColor: '#F8F9FA',
        //                     borderColor: '#CED4DA',
        //                     borderWidth: 1,
        //                     borderType: 'solid',
        //                     borderRadius: 2,
        //                     padding: [6, 12],
        //                     shadowColor: 'rgba(0,121,221,0.3)',
        //                     shadowBlur: 6
        //                 },
        //                 labelLayout: {
        //                     dy: -20,
        //                     verticalAlign: 'top'
        //                 },
        //                 lineStyle: {
        //                     width: 1,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                 },
        //                 blur: {
        //                     itemStyle: {},
        //                     lineStyle: {},
        //                     label: {}
        //                 },
        //                 leaves: {
        //                     label: {
        //                         distance: 0,
        //                         position: 'bottom',
        //                         verticalAlign: 'middle'
        //                     },
        //                     itemStyle: {},
        //                     emphasis: {},
        //                     blur: {},
        //                     select: {}
        //                 },
        //                 animation: true,
        //                 expandAndCollapse: true,
        //                 animationDuration: 550,
        //                 animationEasing: 'linear',
        //                 animationDelay: 0,
        //                 animationDurationUpdate: 750,
        //                 animationEasingUpdate: 'cubicInOut',
        //                 animationDelayUpdate: 0
        //             }
        //         ]
        //     };
        // },
        getTreeOptions() {
            return {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: [this.treeData],
                        nodePadding: 30,
                        layerPadding: 10,
                        name: '树图',
                        top: '1%',
                        left: '1%',
                        bottom: '1%',
                        right: '1%',
                        layout: 'orthogonal',
                        orient: 'horizontal',
                        zoom: 0.8,
                        roam: true,
                        scaleLimit: {
                            min: 0.2,
                            max: Infinity
                        },
                        initialTreeDepth: undefined,
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#0780ED',
                            borderCap: 'round'
                        },
                        label: {
                            show: true,
                            distance: 8,
                            position: ['50%', '50%'],
                            verticalAlign: 'middle',
                            align: 'center',
                            fontSize: 16,
                            color: '#333',
                            backgroundColor: '#F8F9FA',
                            borderColor: '#CED4DA',
                            borderWidth: 1,
                            borderType: 'solid',
                            borderRadius: 2,
                            padding: [6, 12],
                            shadowColor: 'rgba(0,121,221,0.3)',
                            shadowBlur: 6
                        },
                        labelLayout: {
                            dy: -20,
                            verticalAlign: 'top'
                        },
                        lineStyle: {
                            width: 1,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        blur: {
                            itemStyle: {},
                            lineStyle: {},
                            label: {}
                        },
                        leaves: {
                            label: {
                                distance: 0,
                                position: 'bottom',
                                verticalAlign: 'middle'
                            },
                            itemStyle: {},
                            emphasis: {},
                            blur: {},
                            select: {}
                        },
                        animation: true,
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationEasing: 'linear',
                        animationDelay: 0,
                        animationDurationUpdate: 750,
                        animationEasingUpdate: 'cubicInOut',
                        animationDelayUpdate: 0
                    }
                ]
            };
        },
        generateChart() {
            if (!this.message) {
                alert('请输入正确的公司名称！');
@@ -222,6 +222,47 @@
            }
        },
        getTreeData(name) {
            this.loadingSub = true;

            const params = {
                CompanyName: name
            };

            axios.request({
                url: `/TreeDiagramRecord/GetTreeDiagramRecordIsName`,
                method: 'POST',
                data: params
            }).then(response => {
                console.log('Response:', response.data.Data);
                if (response.data.Data == null) {
                    this.getNewTreeData(name)
                } else {
                    const res = response.data.Data[0].Content
                    const jsonString1 = JSON.parse(JSON.stringify(res))
                    const jsonString2 = "[" + jsonString1.replace(/[\n\t\r]/g, "").replace(/\\/g, '').replace(/[ ]/g, "").replace(/^\"|\"$/g, '') + "]"

                    this.treeData = {
                        "name": name,
                        "relationType": 0,
                        "children": JSON.parse(jsonString2)
                    };

                    console.log('Response:', this.treeData);
                    this.formatData(this.treeData); // 重新渲染树图
                    this.loadingSub = false;
                    // alert('已生成:\n' + this.message + '公司产业链图谱');
                    // 重新启用按钮
                    this.disableButton = false;
                }
            }).catch(error => {
                console.error('Error:', error);
                this.loadingSub = false;
                alert('提交时发生错误，请重试。');
                // 重新启用按钮
                this.disableButton = false;
            });
        },
        getNewTreeData(name) {
            this.loadingSub = true;
            const apiUrl = 'http://122.51.217.202/v1/workflows/run';
            const headers = {
@@ -313,6 +354,53 @@
            this.childLength = []
            this.Echarts = echarts.init(this.$refs['ent-tree'])


            // 定义自定义图形
            // const customSymbol = {
            //     type: 'custom',
            //     shape: {
            //         x: 0,
            //         y: 0,
            //         width: 100,
            //         height: 2
            //     },
            //     style: {
            //         stroke: '#000',
            //         lineWidth: 2
            //     },
            //     render: function (params, api) {
            //         const x = api.value(0);
            //         const y = api.value(1);
            //         const width = api.size([1, 0])[0];
            //         const height = api.size([0, 1])[1];

            //         const points = [
            //             [x - width / 2, y],
            //             [x + width / 2, y]
            //         ];

            //         const line = echarts.graphic.clipPointsByRect(points, {
            //             x: params.coordSys.x,
            //             y: params.coordSys.y,
            //             width: params.coordSys.width,
            //             height: params.coordSys.height
            //         });

            //         if (line.length >= 2) {
            //             return {
            //                 type: 'line',
            //                 shape: {
            //                     x1: line[0][0],
            //                     y1: line[0][1],
            //                     x2: line[1][0],
            //                     y2: line[1][1]
            //                 },
            //                 style: api.style()
            //             };
            //         }
            //     }
            // };

            const options = {
                tooltip: {
                    // 提示框浮层设置
@@ -326,93 +414,53 @@
                        nodePadding: 30, //结点间距 （发现没用）
                        layerPadding: 10, //连接线长度 （发现没用）
                        name: '树图',
                        top: '1%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
                        left: '1%', // 组件离容器左侧的距离
                        bottom: '1%', // 组件离容器下侧的距离
                        right: '1%', // 组件离容器右侧的距离
                        layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
                        orient: 'horizontal', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效  放置组件的方式：水平（'horizontal'）或者竖直（'vertical'）
                        // edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',
                        symbolSize: 10,
                        label: {
                            position: 'top',
                            verticalAlign: 'middle',
                            align: 'center',
                            fontSize: 18, // 放大字体
                            fontWeight: 'bold', // 加粗字体
                            offset: [0, -5] // 向上偏移10个像素
                        },
                        leaves: {
                            label: {
                                position: 'top',
                                verticalAlign: 'middle',
                                align: 'center',
                                fontSize: 18, // 放大字体
                                fontWeight: 'bold' ,// 加粗字体
                                offset: [0, -5] // 向上偏移10个像素
                            }
                        },
                        lineStyle: {
                            width: 3, // 加粗线条
                            color: '#555' // 设置线条颜色
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                        zoom: 0.8, //当前视角的缩放比例
                        roam: true, //是否开启平游或缩放  // 是否开启鼠标缩放或平移，默认false
                        scaleLimit: {
                            //滚轮缩放的极限控制
                            min: 0.2,
                            max: 1
                            max: Infinity
                        },
                        initialTreeDepth: undefined, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
                        symbol: 'circle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
                        // symbolRotate: 270, // 配合arrow图形使用效果较好
                        symbolSize: 6, // 大于0时是圆圈，等于0时不展示，标记的大小
                        itemStyle: {
                            // 树图中每个节点的样式
                            color: '#0780ED', // 节点未展开时的填充色
                            // borderWidth: 1, // 描边线宽，为0时无描边
                            // borderType: 'dotted', // 描边类型
                            borderCap: 'round' // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
                            // shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
                            // shadowBlur: 16, // 图形阴影的模糊大小
                            // opacity: 1 // 图形透明度
                        },
                        label: {
                            // 每个节点对应的文本标签样式
                            show: true, // 是否显示标签
                            distance: 8, // 文本距离图形元素的距离
                            position: ['50%', '50%'], // 标签位置
                            verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
                            align: 'center', // 文字水平对齐方式，默认自动，left，right，center
                            fontSize: 16, // 字体大小
                            color: '#333', // 字体颜色
                            // color: 'red', // 字体颜色
                            backgroundColor: '#F8F9FA', // 文字块的背景颜色
                            borderColor: '#CED4DA', // 文字块边框颜色
                            borderWidth: 1, // 文字块边框宽度
                            borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
                            borderRadius: 2, // 文字块的圆角
                            padding: [6, 12], // 文字块内边距
                            shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
                            shadowBlur: 6 // 文字块的背景阴影长度
                        },

                        labelLayout: {
                            dy: -20,
                            verticalAlign: 'top'
                        },
                        lineStyle: {
                            // 树图边的样式
                            // color: 'rgba(0,0,0,.35)', // 树图边的颜色
                            width: 3, // 树图边的宽度
                            // curveness: 1, // 树图边的曲度
                            shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                            // shadowBlur: 10 // 图形阴影的模糊大小
                        },
                        blur: {
                            // 淡出状态的相关配置，开启emphasis.focus后有效
                            itemStyle: {}, // 节点的样式
                            lineStyle: {}, // 树图边的样式
                            label: {} // 淡出标签的文本样式
                        },
                        leaves: {
                            // 叶子节点的特殊配置
                            label: {
                                // 叶子节点的文本标签样式
                                distance: 0,
                                position: 'bottom',
                                verticalAlign: 'middle'
                            },
                            itemStyle: {}, // 叶子节点的样式
                            emphasis: {}, // 叶子节点高亮状态的配置
                            blur: {}, // 叶子节点淡出状态的配置
                            select: {} // 叶子节点选中状态的配置
                        },
                        animation: true, // 是否开启动画
                        expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
                        animationDuration: 550, // 初始动画的时长
                        animationEasing: 'linear', // 初始动画的缓动效果
                        animationDelay: 0, // 初始动画的延迟
                        animationDurationUpdate: 750, // 数据更新动画的时长
                        animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
                        animationDelayUpdate: 0 // 数据更新动画的延迟
                      
                        // animation: true, // 是否开启动画
                        // expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
                        // animationDuration: 550, // 初始动画的时长
                        // animationEasing: 'linear', // 初始动画的缓动效果
                        // animationDelay: 0, // 初始动画的延迟
                        // animationDurationUpdate: 750, // 数据更新动画的时长
                        // animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
                        // animationDelayUpdate: 0 // 数据更新动画的延迟
                    }
                ]
            }
@@ -484,7 +532,7 @@
                PageSize: 10
            };
            if (data.typeId == 2) {
                params.KeywordProduct = data.name.slice(-2);
                params.KeywordProduct = data.name.replace('系统', "").replace('解决方案', "").slice(-2);
                console.log(params.KeywordProduct);
            } else if (data.typeId == 3) {
                params.KeywordIndustry = data.name
@@ -635,6 +683,7 @@

.ent-tree {
    width: 100%;
    min-width: 800px;
    height: 100%;
    overflow: auto;
}

 src/view/policyMatching/precise.vue

@@ -47,7 +47,7 @@
                                    </li>
                                </ul>
                            </Poptip>
                            <Button size="large" type="primary" @click="UpdateDefaultCompany">设为默认企业</Button>
                            <span size="large" class="normal" @click="UpdateDefaultCompany">设为默认企业</span>
                        </div>
                    </div>
                    <div v-if="tab == 'tab2'" style="padding-bottom: 50px;">
@@ -492,4 +492,10 @@
.bottom {
    text-align: center;
}
.normal{
    border: none;
    color: #2D8CF0;
    line-height: 40px;
    font-size: 16px;
}
</style>