合并版本v0.8.2.4

back/src/views/modules/abilityStatistics/componentUsed.vue

@@ -5,7 +5,7 @@
             <span class='page-introduction'>使用情况统计</span>
             <button class='back-btn' @click="backBtn">返回</button>
         </div>
-        
+
         <div class='container-body'>
             <!-- <div class='container-body1'>
                 <span style='font-size:18px;color;#000000;'>评分发布情况</span>
@@ -58,503 +58,497 @@
     </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 
 export default {
-    props:{
-        tableId:{
-            type:String,
-            default:''
+  props: {
+    tableId: {
+      type: String,
+      default: ''
+    },
+    fatherId: {
+      type: Number,
+      default: null
+    }
+  },
+  data () {
+    return {
+      data1: [],
+      data2: [
+        // { value: 1048,name: '算法' },
+        // { value: 735, name: '图层' },
+        // { nums: 580, attr_value: '开发' },
+        // { nums: 484, attr_value: '业务' },
+      ],
+      data3: [
+        // { value: 1048,name: '算法' },
+      ],
+      colorList: ['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)', 'linear-gradient(to right,rgba(250, 179, 2,.6),transparent)', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent)'],
+      widthList: ['90px', '80px', '70px', '60px', '50px'],
+      numColorList: ['#fc5656', '#ff8a00', '#f9af0a', '#808fff', '#808fff'],
+      usedList: [{ name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称四', useNum: 111 }, { name: '组件名称五', useNum: 111 }],
+      applicationList: [{ name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称四', score: 111 }, { name: '组件名称五', score: 111 }]
+    }
+  },
+  created () {
+    if (this.fatherId === 1) {
+      this.getBeCalled()
+      this.getBeApplied()
+      this.getAlgorithm()
+      this.getDistributed()
+      this.getScoreList()
+    } else {
+
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 评分发布情况
+    getScoreList () {
+      this.$http.get('/census/center/v3/assemblerScoreInfo', {
+        params: {
+          id: this.tableId,
+          resourceType: '应用资源'
+          // pageNo: pageNo || 1,
+          // pageSize: 20
+        }
+      }).then(res => {
+        let arry = []
+        arry = res.data.data
+        arry.forEach((item) => {
+          const single = {
+            value: item.scoreNum,
+            name: item.score
+          }
+          // const newList=[]
+          this.data1.push(single)
+          // this.data2=newList
+          this.myEcharts1()
+        })
+      })
+    },
+    // 算法图层开发业务
+    getAlgorithm () {
+      this.$http.get('/census/center/v3/assemblerUsedInfo', {
+        params: {
+          id: this.tableId,
+          resourceType: '组件服务'
+          // pageNo: pageNo || 1,
+          // pageSize: 20
+        }
+      }).then(res => {
+        let arry = []
+        arry = res.data.data
+        arry.forEach((item) => {
+          const single = {
+            value: item.nums,
+            name: item.attr_value
+          }
+          // const newList=[]
+          this.data2.push(single)
+          // this.data2=newList
+          this.myEcharts2()
+        })
+      })
+    },
+    // 应用领域分布
+    getDistributed () {
+      this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList', {
+        params: {
+          id: this.tableId,
+          resourceType: '组件服务'
+        }
+      }).then(res => {
+        let arry = []
+        arry = res.data.data
+        arry.forEach((item) => {
+          const single = {
+            value: item.total,
+            name: item.type
+          }
+          this.data3.push(single)
+          this.myEcharts3()
+        })
+      })
+    },
+    // top5使用组件
+    getBeCalled () {
+      this.$http.get('/census/center/v3/assemblerUseTopInfo', {
+        params: {
+          id: this.tableId,
+          resourceType: '组件服务'
+          // pageNo: pageNo || 1,
+          // pageSize: 20
+        }
+      }).then(res => {
+        this.usedList = res.data.data
+      })
+    },
+    // 使用组件评分5
+    getBeApplied () {
+      this.$http.get('/census/center/v3/assemblerUseScoreTopInfo', {
+        params: {
+          id: this.tableId,
+          resourceType: '应用资源'
+          // pageNo: pageNo || 1,
+          // pageSize: 20
+        }
+      }).then(res => {
+        this.applicationList = res.data.data
+      })
+    },
+    myEcharts1 () {
+      var chartDom = document.getElementById('main1')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'item'
         },
-        fatherId:{
-            type:Number,
-            default:null,
-        }
-    },
-    data(){
-        return{
-            data1:[],
-             data2: [
-                // { value: 1048,name: '算法' },
-                // { value: 735, name: '图层' },
-                // { nums: 580, attr_value: '开发' },
-                // { nums: 484, attr_value: '业务' },
-            ],
-              data3: [
-                // { value: 1048,name: '算法' },
-            ],
-            colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
-            widthList:['90px','80px','70px','60px','50px'],
-            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
-            usedList:[{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},],
-            applicationList:[{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称四',score:111},{name:'组件名称五',score:111},]
-        }
-    },
-    created(){
-        if(this.fatherId===1){
-            this.getBeCalled()
-            this.getBeApplied()
-            this.getAlgorithm()
-            this.getDistributed()
-            this.getScoreList()
-        }else{
+        legend: {
+          orient: '',
+          top: '14%',
+          left: '55%',
+          width: 'auto',
+          height: 'auto',
+          orient: 'vertical',
+          itemGap: 15,
+          itemWidth: 14,
+          // 使用回调函数
+          formatter: function (name) {
+            var data = option.series[0].data
+            var total = 0
+            var tarValue
+            for (var i = 0; i < data.length; i++) {
+              total += Number(data[i].value)
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            var v = tarValue
+            var p = Math.round(((v / total) * 100))
+            return `${name}            ${p}%`
+          },
+          itemStyle: {},
+          textStyle: {
+            color: '#666666',
+            padding: [0, 8, 0, 18]
+          }
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center: ['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data1
+          }
+        ]
+      }
 
-        }
-       
+      option && myChart.setOption(option)
     },
-    mounted(){
-        
-       
+    myEcharts2 () {
+      var chartDom = document.getElementById('main2')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: '',
+          top: '22%',
+          left: '50%',
+          width: 'auto',
+          height: 'auto',
+          orient: 'vertical',
+          itemGap: 15,
+          itemWidth: 14,
+          // 使用回调函数
+          formatter: function (name) {
+            var data = option.series[0].data
+            var total = 0
+            var tarValue
+            for (var i = 0; i < data.length; i++) {
+              total += Number(data[i].value)
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            var v = tarValue
+            var p = Math.round(((tarValue / total) * 100))
+            return `${name}         ${p}%`
+          },
+          itemStyle: {},
+          textStyle: {
+            color: '#666666',
+            padding: [0, 8, 0, 18]
+          }
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center: ['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data2
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
     },
-   methods:{
-      // 评分发布情况
-        getScoreList () {               
-            this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
-                  params : {
-                   id:this.tableId,
-                   resourceType:"应用资源"
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                let arry=[]
-                arry=res.data.data
-                arry.forEach((item)=>{
-                    
-                    const single={
-                        value:item.scoreNum,
-                        name:item.score
-                    }
-                    // const newList=[]
-                   this.data1.push(single)
-                    // this.data2=newList
-                    this.myEcharts1()
-               })             
-            })            
-            
-            },
-      // 算法图层开发业务
-        getAlgorithm () {               
-            this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
-                  params : {
-                   id:this.tableId,
-                   resourceType:"组件服务"
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                let arry=[]
-                arry=res.data.data
-                arry.forEach((item)=>{
-                    
-                    const single={
-                        value:item.nums,
-                        name:item.attr_value
-                    }
-                    // const newList=[]
-                   this.data2.push(single)
-                    // this.data2=newList
-                    this.myEcharts2()
-               })             
-            })            
-            
-            },
-             // 应用领域分布
-        getDistributed () {               
-            this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{
-                  params : {
-                  id:this.tableId,
-                   resourceType:"组件服务"
-                    }                    
-            }).then(res => {
-                let arry=[]
-                arry=res.data.data
-                arry.forEach((item)=>{                   
-                    const single={
-                        value:item.total,
-                        name:item.type
-                    }
-                    this.data3.push(single)
-                    this.myEcharts3()
-               })             
-            })            
-            
-            },
-     // top5使用组件
-        getBeCalled () {               
-            this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{
-                  params : {
-                  id:this.tableId,
-                   resourceType:"组件服务"
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                this.usedList =res.data.data
-            })
-            },
-        // 使用组件评分5
-        getBeApplied () {               
-            this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{
-                  params : {
-                   id:this.tableId,
-                   resourceType:"应用资源"
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                this.applicationList =res.data.data
-            })
-            },
-        myEcharts1(){
-            var chartDom = document.getElementById('main1');
-            var myChart = echarts.init(chartDom);
-            var option;
-            option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            legend: {
-                orient: '',
-                top: '14%',
-                left: '55%',
-                width:"auto",
-                height:"auto",
-                orient: "vertical",
-                itemGap: 15,
-                itemWidth: 14,
-                // 使用回调函数
-            formatter: function(name) {
-                var data = option.series[0].data;
-                var total = 0;
-                var tarValue;
-                for (var i = 0; i < data.length; i++) {
-                total += Number(data[i].value);
-                if (data[i].name == name) {
-                    tarValue = data[i].value;
-                }
-                }
-                var v = tarValue;
-                var p = Math.round(((v / total) * 100));
-                return `${name}            ${p}%`;
-            },
-            itemStyle:{},
-            textStyle: {
-                color: "#666666",
-                padding:[0,8,0,18]
-            },
-            },
-            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
-            series: [
-                {
-                type: 'pie',
-                radius: ['40%', '60%'],
-                center:['22%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                },
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: this.data1
-                }
-            ]
-            };
+    myEcharts3 () {
+      var chartDom = document.getElementById('main3')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          type: 'scroll',
+          top: '22%',
+          left: '50%',
+          width: 'auto',
+          height: 'auto',
+          orient: 'vertical',
+          itemGap: 15,
+          itemWidth: 14,
 
-            option && myChart.setOption(option);
-                },
-        myEcharts2(){
-            var chartDom = document.getElementById('main2');
-            var myChart = echarts.init(chartDom);
-            var option;
-            option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            legend: {
-                orient: '',
-                top: '22%',
-                left: '50%',
-                width:"auto",
-                height:"auto",
-                orient: "vertical",
-                itemGap: 15,
-                itemWidth: 14,
-                // 使用回调函数
-            formatter: function(name) {
-                var data = option.series[0].data;
-                var total = 0;
-                var tarValue;
-                for (var i = 0; i < data.length; i++) {
-               total += Number(data[i].value);
-                if (data[i].name == name) {
-                    tarValue = data[i].value;
-                }
-                }
-                var v = tarValue;
-                var p = Math.round(((tarValue / total) * 100));
-                return `${name}         ${p}%`;
-            },
-            itemStyle:{},
-            textStyle: {
-                color: "#666666",
-                padding:[0,8,0,18]
-            },
-            },
-            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
-            series: [
-                {
-                // name: 'Access From',
-                type: 'pie',
-                radius: ['40%', '60%'],
-                center:['22%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                },
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: this.data2
-                }
-            ]
-            };
-
-            option && myChart.setOption(option);
-                },
-        myEcharts3(){
-            var chartDom = document.getElementById('main3');
-            var myChart = echarts.init(chartDom);
-            var option;
-            option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            legend: {
-               orient: "vertical",   type: 'scroll',
-                top: '22%',
-                left: '50%',
-                width:"auto",
-                height:"auto",
-                orient: "vertical",
-                itemGap: 15,
-                itemWidth: 14,
-                
-                    // 使用回调函数
-                formatter: function(name) {
-                    var data = option.series[0].data;
-                    var total = 0;
-                    var tarValue;
-                    for (var i = 0; i < data.length; i++) {
-                    total += Number(data[i].value);
-                    if (data[i].name == name) {
-                        tarValue = data[i].value;
-                    }
-                    }
-                    // var v = tarValue;
-                    var p = Math.round(((tarValue / total) * 100));
-                    console.log('@@@@', tarValue, total)
-                    return `{a|${name}}  {b|${p}%}`;
-                },
-                itemStyle:{},
-                textStyle: {
-                      rich: {
+          // 使用回调函数
+          formatter: function (name) {
+            var data = option.series[0].data
+            var total = 0
+            var tarValue
+            for (var i = 0; i < data.length; i++) {
+              total += Number(data[i].value)
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            // var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100))
+            console.log('@@@@', tarValue, total)
+            return `{a|${name}}  {b|${p}%}`
+          },
+          itemStyle: {},
+          textStyle: {
+            rich: {
               // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
-                    a: {
-                        // 设置文字、数学、英语这一列的样式
-                        width: 100,
-                        color: "#000000",
-                        fontSize: 12,
-                        fontWeight: "bolder",
-                    },
-                    b: {
-                        // 设置10分、20分、30分这一列的样式
-                        width: 35,
-                        color: "#333",
-                        fontSize: 12,
-                    },
-                },
-                    color: "#666666",
-                    backgroundColor: "transparent", 
-                    padding:[0,8,0,18]
-                },
+              a: {
+                // 设置文字、数学、英语这一列的样式
+                width: 100,
+                color: '#000000',
+                fontSize: 12,
+                fontWeight: 'bolder'
+              },
+              b: {
+                // 设置10分、20分、30分这一列的样式
+                width: 35,
+                color: '#333',
+                fontSize: 12
+              }
             },
-            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
-            series: [
-                {
-                // name: 'Access From',
-                type: 'pie',
-                radius: ['40%', '60%'],
-                center:['22%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                },
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                // emphasis: {
-                //     label: {
-                //     show: true,
-                //     fontSize: '40',
-                //     fontWeight: 'bold'
-                //     }
-                // },
-                labelLine: {
-                    show: false
-                },
-                data:this.data3
-                }
-            ]
-            };
+            color: '#666666',
+            backgroundColor: 'transparent',
+            padding: [0, 8, 0, 18]
+          }
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center: ['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+              show: false
+            },
+            data: this.data3
+          }
+        ]
+      }
 
-            option && myChart.setOption(option);
-                },
-        backBtn(){
-            this.$emit('closeChild2')
-        }
-   }
+      option && myChart.setOption(option)
+    },
+    backBtn () {
+      this.$emit('closeChild2')
+    }
+  }
 }
 </script>
 <style scoped>
-.container{
-    padding-top: 15px;
-    display: flex;
-    flex-direction: column;
+.container {
+  padding-top: 15px;
+  display: flex;
+  flex-direction: column;
 }
-    .title-style{
-        font-size: 24px;
-        color:#000000;
-        font-weight: bold;
-    }
-    .page-introduction{
-        font-size: 18px;
-        color:#666666;
-        margin-left: 20px;
-    }
-    .back-btn{
-        background: #3e8ef7;
-        border-color: rgba(101, 165, 249,0);
-        color: #FFF;
-        margin-left:1030px;
-        padding-bottom: 3px;
-    }
-    .container-body{
-        width:1300px;
-        margin-top:30px;
-        display: flex;
-        flex-wrap:wrap
-    }
-    .container-body1{
-        width:420px;
-        height:250px;
-        background-color: #ffffff;
-        margin-right:20px;
-        padding-top:20px;
-        padding-left: 20px;
-        
-    }
-    .container-body2{
-        width:640px;
-        height:250px;
-        background-color: #ffffff;
-        margin-right:20px;
-        padding-top:20px;
-        padding-left: 20px;
-    }
-    .container-body3{
-        width:640px;
-        height:250px;
-        background-color: #ffffff;
-        padding-top:20px;
-        padding-left: 20px;
-    }
-    .container-body4{
-        width:640px;
-        height:300px;
-        background-color: #ffffff;
-        padding-top:20px;
-        padding-left: 20px;
-        margin-top: 20px;
-        margin-right: 20px;
-        background-image:url("../../../assets/img/排行榜背景图.png"); 
-        background-repeat:no-repeat;
-        background-size: 100% 100%;
-    }
-    .container-body5{
-        width:640px;
-        height:300px;
-        background-color: #ffffff;
-        padding-top:20px;
-        padding-left: 20px;
-        margin-top: 20px;
-        background-image:url("../../../assets/img/排行榜背景图.png"); 
-        background-repeat:no-repeat;
-        background-size: 100% 100%;
-    }
-    .footer{
-        display: flex;
-        margin-top:50px;
-        margin-left:365px;
-    }
-    .footer-left{
-        width:250px;
-        height:1px;
-        background-color:#e0eaf8;
-        margin-right:10px;
-        margin-top:8px
-    }
-    .footer-right{
-        width:250px;
-        height:1px;
-        background-color:#e0eaf8;
-        margin-left:10px;
-        margin-top:8px
-    }
-    .ranking-img{
-        width:60px;
-        height:26px;
-        display: flex;
-        line-height: 26px;
-        margin-bottom:15px;
-        margin-right:10px;
-        padding-left: 15px;
-    }
-    .num-style{
-         position:absolute;
-         display: flex;
-         margin-left:90px;
-         width:200px;
-         margin-top:5px;
-         color:#333333;
-         font-size: 16px;
-         overflow: hidden;
-         white-space: nowrap;
-         text-overflow: ellipsis;        
-    }   
-    .count-style{
-         position:absolute;
-         display: flex;
-         margin-left:400px;
-         margin-top:5px;
-         color:#333333;
-         font-size: 18px;  
-         font-weight: bold;      
-    }
-</style>
+.title-style {
+  font-size: 24px;
+  color: #000000;
+  font-weight: bold;
+}
+.page-introduction {
+  font-size: 18px;
+  color: #666666;
+  margin-left: 20px;
+}
+.back-btn {
+  background: #3e8ef7;
+  border-color: rgba(101, 165, 249, 0);
+  color: #fff;
+  margin-left: 1030px;
+  padding-bottom: 3px;
+}
+.container-body {
+  width: 1300px;
+  margin-top: 30px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.container-body1 {
+  width: 420px;
+  height: 250px;
+  background-color: #ffffff;
+  margin-right: 20px;
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.container-body2 {
+  width: 640px;
+  height: 250px;
+  background-color: #ffffff;
+  margin-right: 20px;
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.container-body3 {
+  width: 640px;
+  height: 250px;
+  background-color: #ffffff;
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.container-body4 {
+  width: 640px;
+  height: 300px;
+  background-color: #ffffff;
+  padding-top: 20px;
+  padding-left: 20px;
+  margin-top: 20px;
+  margin-right: 20px;
+  background-image: url("../../../assets/img/排行榜背景图.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.container-body5 {
+  width: 640px;
+  height: 300px;
+  background-color: #ffffff;
+  padding-top: 20px;
+  padding-left: 20px;
+  margin-top: 20px;
+  background-image: url("../../../assets/img/排行榜背景图.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.footer {
+  display: flex;
+  margin-top: 50px;
+  margin-left: 365px;
+}
+.footer-left {
+  width: 250px;
+  height: 1px;
+  background-color: #e0eaf8;
+  margin-right: 10px;
+  margin-top: 8px;
+}
+.footer-right {
+  width: 250px;
+  height: 1px;
+  background-color: #e0eaf8;
+  margin-left: 10px;
+  margin-top: 8px;
+}
+.ranking-img {
+  width: 60px;
+  height: 26px;
+  display: flex;
+  line-height: 26px;
+  margin-bottom: 15px;
+  margin-right: 10px;
+  padding-left: 15px;
+}
+.num-style {
+  position: absolute;
+  display: flex;
+  margin-left: 90px;
+  width: 200px;
+  margin-top: 5px;
+  color: #333333;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.count-style {
+  position: absolute;
+  display: flex;
+  margin-left: 400px;
+  margin-top: 5px;
+  color: #333333;
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>

back/src/views/modules/abilityStatistics/index.vue

@@ -22,7 +22,7 @@
            </span>
         </el-tree>
          </div> -->
-     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
+     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>
     <div class="mod-demand__bsdemand">
         <div class='top-box'>
             <span class='title'>能力统计</span>
@@ -38,7 +38,7 @@
             </span>
             <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
                 部门使用情况
-            </span>           
+            </span>
          </div>
          <div class='line-style'></div>
           <el-table
@@ -81,7 +81,7 @@
             min-width="100%">
         </el-table-column>
         <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
-            prop="resourceShareNum" 
+            prop="resourceShareNum"
             label="需申请数量"
             min-width="100%">
         </el-table-column>
@@ -118,215 +118,208 @@
       >
     </el-pagination>
   </div>
-    </div>   
+    </div>
   </el-card>
     </div>
    <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
    <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
    <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
-</div>  
+</div>
 </template>
 <script>
 import componentServices from './componentServices.vue'
 import applicationResources from './applicationResources.vue'
 import ComponentUsed from './componentUsed.vue'
 export default {
-    components:{componentServices,applicationResources, ComponentUsed},
-    data(){
-        return{
-            inputTxt:'',
-            tableId:'',
-            fatherId:'',
-            treeData: [{
-                label: '一级 1',
-                children: [{
-                    label: '二级 1-1',
-                    children: [{
-                    label: '三级 1-1-1'
-                    }]
-                }]
-                }, {
-                label: '一级 2',
-                    children: [{
-                        label: '二级 2-1',
-                        children: [{
-                        label: '三级 2-1-1'
-                        }]
-                    }, {
-                        label: '二级 2-2',
-                        children: [{
-                        label: '三级 2-2-1'
-                        }]
-                    }]
-                }, {
-                label: '一级 3',
-                children: [{
-                    label: '二级 3-1',
-                    children: [{
-                    label: '三级 3-1-1'
-                    }]
-                }, {
-                    label: '二级 3-2',
-                    children: [{
-                    label: '三级 3-2-1'
-                    }]
-                }]
-                }],
-            total:null,
-            defaultProps: {
-            children: 'children',
-            label: 'name'
-            },
-            choseId:0,
-            departmentId:1,
-            currentPage: 1,
-            homeIsShow:true,
-            servicesIsShow:false,
-            resourcesIsShow:false,
-            UsedIsShow:false,
-            titleList:[
-                {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
-            ],
-            tableData: [{deptName:'部门',resourceNum:222}]
-        }
-    },
-    created(){
-      
-        
-    },
-    mounted(){
-         this.getFirstTree()
-    },
-     methods: {
-        //搜索框
-        // searchBtn(){
-        //     this.getALLTree()
-        // },
-        //  //树
-        //     handleNodeClick(data) {
-        //         console.log(data.name);
-        //         this.getTreeName(data)
-        //     },
-            //翻页
-            handleCurrentChange(val){
-                if(this.choseId===0){
-                     this.getFirstTree(val)
-                }
-               else if(this.choseId===1){
-                this.getReleaseTree(val)
-               }               
-            },
-             getTreeName (data) {               
-                this.$http.get('/census/center/v3/treeList/' ,{
-                  params : {
-                    keywords:data.name,
-                    deptId:'1067246875800000066',
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                this.tableData =res.data.data
-            })
-            },
-        //  // 获取部门列表
-        //     getALLTree () {               
-        //     this.$http.get('/census/center/v3/treeList/' ,{
-        //           params : {
-        //             keywords:this.inputTxt,
-        //             deptId:'1067246875800000066',
-        //             // pageNo: pageNo || 1,
-        //             // pageSize: 20
-        //             }                    
-        //     }).then(res => {
-        //         this.treeData =res.data.data
-        //         // this.tableData =res.data.data
-        //     })
-        //     },
+  components: { componentServices, applicationResources, ComponentUsed },
+  data () {
+    return {
+      inputTxt: '',
+      tableId: '',
+      fatherId: '',
+      treeData: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+      total: null,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      choseId: 0,
+      departmentId: 1,
+      currentPage: 1,
+      homeIsShow: true,
+      servicesIsShow: false,
+      resourcesIsShow: false,
+      UsedIsShow: false,
+      titleList: [
+        { name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 }
+      ],
+      tableData: [{ deptName: '部门', resourceNum: 222 }]
+    }
+  },
+  created () {
 
-          // 组件服务部门发布情况
-            getFirstTree (page) {               
-            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
-                  params : {
-                    page:page||1,
-                    limit:5,                  
-                    // id:'1067246875800000066',
-                    resourceType:'组件服务'
-                    }                    
-            }).then(res => {
-                this.tableData =res.data.data.list
-                this.total = res.data.data.total            
-            })
-            },
-            // 组件服务部门使用情况列表
-            getSecondTree () {               
-            this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
-                  params : {
-                    limit:5,
-                    page:1,
-                    // id:'1067246875800000064',
-                    resourceType:'组件服务'
-                    }                     
-            }).then(res => {
-                this.tableData =res.data.data.list
-            
-            })
-            },
-             // 应用资源部门发布情况列表
-            getReleaseTree (page) {               
-            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
-                  params : {
-                    limit:5,
-                    page:page||1,
-                    // id:'1067246875800000066',
-                    resourceType:'应用资源'
-                    }                     
-            }).then(res => {
-                this.tableData =res.data.data.list
-                this.total = res.data.data.total
-            
-            })
-            },
-            // 应用资源部门使用情况列表
-            getUsedTree () {               
-            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
-                  params : {
-                    limit:5,
-                    page:1,
-                    // id:'1067246875800000066',
-                    resourceType:'应用资源'
-                    }                     
-            }).then(res => {
-                this.tableData =res.data.data.list
-            
-            })
-            },
-      handleClick(row) {
-        if(this.choseId===0){
-            if(this.departmentId===1){
-                    this.homeIsShow=false
-                    this.servicesIsShow=true
-                    this.tableId=row.deptId
-                    this.fatherId=1
-                }else if(this.departmentId===2){
-                    this.homeIsShow=false
-                    this.UsedIsShow=true
-                    this.tableId=row.deptId
-                    this.fatherId=1
-                }
-            } else if(this.choseId===1){
-                    this.homeIsShow=false
-                    this.resourcesIsShow=true
-                    this.tableId=row.deptId
-                    this.fatherId=2
-                }
-           
-       
-      },
-      //选择组件
-      choseBtn(index){
-        this.choseId=index
-        this.handleChose(1)
-      },
+  },
+  mounted () {
+    this.getFirstTree()
+  },
+  methods: {
+    // 搜索框
+    // searchBtn(){
+    //     this.getALLTree()
+    // },
+    //  //树
+    //     handleNodeClick(data) {
+    //         console.log(data.name);
+    //         this.getTreeName(data)
+    //     },
+    // 翻页
+    handleCurrentChange (val) {
+      if (this.choseId === 0) {
+        this.getFirstTree(val)
+      } else if (this.choseId === 1) {
+        this.getReleaseTree(val)
+      }
+    },
+    getTreeName (data) {
+      this.$http.get('/census/center/v3/treeList/', {
+        params: {
+          keywords: data.name,
+          deptId: '1067246875800000066'
+          // pageNo: pageNo || 1,
+          // pageSize: 20
+        }
+      }).then(res => {
+        this.tableData = res.data.data
+      })
+    },
+    //  // 获取部门列表
+    //     getALLTree () {
+    //     this.$http.get('/census/center/v3/treeList/' ,{
+    //           params : {
+    //             keywords:this.inputTxt,
+    //             deptId:'1067246875800000066',
+    //             // pageNo: pageNo || 1,
+    //             // pageSize: 20
+    //             }
+    //     }).then(res => {
+    //         this.treeData =res.data.data
+    //         // this.tableData =res.data.data
+    //     })
+    //     },
+
+    // 组件服务部门发布情况
+    getFirstTree (page) {
+      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
+        params: {
+          page: page || 1,
+          limit: 5,
+          // id:'1067246875800000066',
+          resourceType: '组件服务'
+        }
+      }).then(res => {
+        this.tableData = res.data.data.list
+        this.total = res.data.data.total
+      })
+    },
+    // 组件服务部门使用情况列表
+    getSecondTree () {
+      this.$http.get('/census/center/v3/resourceUsedDetails/', {
+        params: {
+          limit: 5,
+          page: 1,
+          // id:'1067246875800000064',
+          resourceType: '组件服务'
+        }
+      }).then(res => {
+        this.tableData = res.data.data.list
+      })
+    },
+    // 应用资源部门发布情况列表
+    getReleaseTree (page) {
+      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
+        params: {
+          limit: 5,
+          page: page || 1,
+          // id:'1067246875800000066',
+          resourceType: '应用资源'
+        }
+      }).then(res => {
+        this.tableData = res.data.data.list
+        this.total = res.data.data.total
+      })
+    },
+    // 应用资源部门使用情况列表
+    getUsedTree () {
+      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
+        params: {
+          limit: 5,
+          page: 1,
+          // id:'1067246875800000066',
+          resourceType: '应用资源'
+        }
+      }).then(res => {
+        this.tableData = res.data.data.list
+      })
+    },
+    handleClick (row) {
+      if (this.choseId === 0) {
+        if (this.departmentId === 1) {
+          this.homeIsShow = false
+          this.servicesIsShow = true
+          this.tableId = row.deptId
+          this.fatherId = 1
+        } else if (this.departmentId === 2) {
+          this.homeIsShow = false
+          this.UsedIsShow = true
+          this.tableId = row.deptId
+          this.fatherId = 1
+        }
+      } else if (this.choseId === 1) {
+        this.homeIsShow = false
+        this.resourcesIsShow = true
+        this.tableId = row.deptId
+        this.fatherId = 2
+      }
+    },
+    // 选择组件
+    choseBtn (index) {
+      this.choseId = index
+      this.handleChose(1)
+    },
     //   choseBtn(index){
     //     this.choseId=index
     //     if (index===0){
@@ -338,164 +331,162 @@ export default {
     //         this.resourcesIsShow=true
     //     }
     //   },
-      //选择发布or使用表格
-      handleChose(index){
-        this.departmentId=index
-        if(index===1){
-            if(this.choseId===0){
-                this.getFirstTree()
-            }else if(this.choseId===1){
-                this.getReleaseTree()
-            }            
-        }else if(index===2){
-             if(this.choseId===0){
-                this.getSecondTree()
-            }else{
-                this.getUsedTree()
-            }  
+    // 选择发布or使用表格
+    handleChose (index) {
+      this.departmentId = index
+      if (index === 1) {
+        if (this.choseId === 0) {
+          this.getFirstTree()
+        } else if (this.choseId === 1) {
+          this.getReleaseTree()
+        }
+      } else if (index === 2) {
+        if (this.choseId === 0) {
+          this.getSecondTree()
+        } else {
+          this.getUsedTree()
         }
-      },
-      //翻页
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      closeChild(){
-        this.homeIsShow=true
-        this.servicesIsShow=false
-        this. handleCurrentChange(1)
-        
-      },
-       closeChild2(){
-        this.homeIsShow=true
-        this.UsedIsShow=false
-        this. handleCurrentChange(1)
-      },
-       closeApplication(){
-        this.homeIsShow=true
-        this.resourcesIsShow=false
-        this. handleCurrentChange(1)
       }
     },
+    // 翻页
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    closeChild () {
+      this.homeIsShow = true
+      this.servicesIsShow = false
+      this.handleCurrentChange(1)
+    },
+    closeChild2 () {
+      this.homeIsShow = true
+      this.UsedIsShow = false
+      this.handleCurrentChange(1)
+    },
+    closeApplication () {
+      this.homeIsShow = true
+      this.resourcesIsShow = false
+      this.handleCurrentChange(1)
+    }
+  }
 
 }
 </script>
 <style lang="scss" scoped>
-.container{
-    display: flex;
-
+.container {
+  display: flex;
 }
-.container-left{
-    width:250px;
-    height:1000px;
-    display: inline-block;
-    // background-color: #ffffff;
-    margin-right:10px
+.container-left {
+  width: 250px;
+  height: 1000px;
+  display: inline-block;
+  // background-color: #ffffff;
+  margin-right: 10px;
 }
-.left-search{
-    width:250px;
-    height:76px;
-    background-color: #ffffff;
+.left-search {
+  width: 250px;
+  height: 76px;
+  background-color: #ffffff;
 }
-.input-style{
-    width:210px;
-    height:36px;
-    margin:20px 20px;
-    padding-left: 20px;
-    border-radius: 18px;
-    border:1px solid transparent;
-    background-color: #f2f4fa;
+.input-style {
+  width: 210px;
+  height: 36px;
+  margin: 20px 20px;
+  padding-left: 20px;
+  border-radius: 18px;
+  border: 1px solid transparent;
+  background-color: #f2f4fa;
 }
 input::placeholder {
-   font-weight: 400;
-   font-size: 14px;
-   color: #b0b3ca;
+  font-weight: 400;
+  font-size: 14px;
+  color: #b0b3ca;
 }
-.input-search{
-    width:44px;
-    height:30px;
-    background-color: #ffffff;
-    position: absolute;
-    border-radius: 15px;
-    top:38px;
-    left:196px;
+.input-search {
+  width: 44px;
+  height: 30px;
+  background-color: #ffffff;
+  position: absolute;
+  border-radius: 15px;
+  top: 38px;
+  left: 196px;
 }
-::v-deep.tree-style  {
-  .el-tree-node__label{
-        font-size:16px;        
-    }
-    .el-tree-node__content{
-            width:240px;
-        overflow: hidden;        
-        text-overflow: ellipsis;
-        white-space: nowrap;    
-    }
+::v-deep.tree-style {
+  .el-tree-node__label {
+    font-size: 16px;
+  }
+  .el-tree-node__content {
+    width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
 }
 
-.top-box{
-    height:80px;
-    width:100%;
-    background-color: #fafafc;
-    display: inline-block;
+.top-box {
+  height: 80px;
+  width: 100%;
+  background-color: #fafafc;
+  display: inline-block;
+}
+.title {
+  display: flex;
+  font-size: 20px;
+  color: #000000;
+  font-weight: bold;
+  padding-left: 15px;
+  padding-top: 10px;
+}
+.title-list-style {
+  display: flex;
+  margin-top: 10px;
+}
+.title-single {
+  font-size: 14px;
+  width: 90px;
+  color: #666666;
+  height: 24px;
+  margin-left: 10px;
+  border: 1px solid #cccccc;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.box-style {
+  width: 90px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 2px;
+}
+.second-title {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #979eb9;
+  cursor: pointer;
+}
+.line-style {
+  width: 100%;
+  height: 1px;
+  background-color: #f5f6fa;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.aui-card--fill {
+  width: 100% !important;
+  padding: 0px !important;
+}
+.choseStyle {
+  color: #526aff;
+  border: 1px solid #526aff;
+}
+.departmentStyle {
+  color: #526aff;
+}
+::v-deep .tree-text-styleJ {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
 }
-    .title{
-        display: flex;
-        font-size:20px; 
-        color:#000000;
-        font-weight: bold;
-        padding-left:15px;
-        padding-top:10px;
-    }
-    .title-list-style{
-        display: flex;
-        margin-top:10px;
-        
-    }
-    .title-single{
-        font-size:14px;
-        width:90px;
-        color:#666666;
-        height:24px;
-        margin-left:10px;
-        border:1px solid #cccccc;
-        border-radius: 12px;
-        cursor:pointer
-       
-    }
-    .box-style{
-        width:90px;
-        height:24px;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 2px;
-    }
-    .second-title{
-        margin-top:20px;
-        font-size: 14px;
-        color:#979eb9;
-        cursor:pointer
-    }
-    .line-style{
-         width:100%;
-         height:1px;
-         background-color:#f5f6fa;
-         margin-top:15px;
-         margin-bottom:15px;
-    }
-   .aui-card--fill{
-        width:100% !important;
-        padding: 0px !important;
-    }
-    .choseStyle{
-        color:#526aff;
-        border:1px solid #526aff
-    }
-    .departmentStyle{
-        color:#526aff
-    }
-   ::v-deep .tree-text-styleJ{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
 </style>

back/src/views/modules/activiti/my-work-dynamics.vue

@@ -698,6 +698,7 @@ export default {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 .boxcontent {
   width: 100%;
@@ -707,6 +708,7 @@ export default {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 .preview-dialog {
   width: 100%;

back/src/views/modules/bscatalogue/bscatalogue.vue

@@ -570,7 +570,7 @@ export default {
         height: 28px;
         margin-left: 14px;
         margin-top: 9px;
-        background-image: url('~@/assets/img/capabilityCatalogingManagement/edit-card.png');
+        background-image: url("~@/assets/img/capabilityCatalogingManagement/edit-card.png");
       }
     }
     div:nth-child(2) {
@@ -609,7 +609,7 @@ export default {
         left: 50%;
         margin-left: -45.5px;
         margin-top: -45.5px;
-        background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
+        background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png");
         cursor: pointer;
       }
       > span {
@@ -618,7 +618,7 @@ export default {
         padding-top: 5px;
         padding-left: 20px;
         font-size: 26px;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
       }
       .add-enterprise-input-wrap {
         // height: 50px;
@@ -656,7 +656,7 @@ export default {
           background: #0fa7f6;
           span {
             color: #ffffff;
-            font-family: 'Microsoft YaHei';
+            font-family: "Microsoft YaHei";
             font-size: 16px;
           }
         }
@@ -704,7 +704,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -713,7 +713,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -724,7 +724,7 @@ export default {
   .enterprise-card-tip-first:before,
   .enterprise-card-tip-first:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: 32px;
     left: -16px;
     display: block;
@@ -752,7 +752,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -761,7 +761,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -772,7 +772,7 @@ export default {
   .enterprise-card-tip-third:before,
   .enterprise-card-tip-third:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: 32px;
     left: 180px;
     display: block;
@@ -801,7 +801,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -810,7 +810,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -821,7 +821,7 @@ export default {
   .enterprise-card-tip-second:before,
   .enterprise-card-tip-second:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: -15px;
     left: 78px;
     display: block;
@@ -836,7 +836,7 @@ export default {
     width: 100%;
     // height: 373px;
     height: 176px;
-    background-image: url('~@/assets/img/capabilityCatalogingManagement/small-card-orange.png');
+    background-image: url("~@/assets/img/capabilityCatalogingManagement/small-card-orange.png");
     .resource-detail-title {
       width: 100%;
       height: 40px;
@@ -845,15 +845,17 @@ export default {
       padding-top: 10px;
       text-align: center;
       text-overflow: ellipsis;
+      word-break: break-all;
       span {
         width: 100%;
         height: 100%;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
         font-size: 20px;
         display: inline-block;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        word-break: break-all;
         color: #ffffff;
       }
     }
@@ -867,7 +869,7 @@ export default {
         width: 100%;
         height: 30px;
         padding-left: 19px;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
         font-size: 20px;
         color: white;
         vertical-align: middle;
@@ -899,7 +901,7 @@ export default {
       position: absolute;
       width: 28px;
       height: 28px;
-      background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
+      background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png");
       top: 0;
       right: 0;
       cursor: pointer;
@@ -908,7 +910,7 @@ export default {
 }
 input::-webkit-input-placeholder {
   font-size: 14px;
-  font-family: 'Microsoft YaHei';
+  font-family: "Microsoft YaHei";
   color: #999999;
 }
 </style>

back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue

@@ -76,7 +76,7 @@ import * as echarts from 'echarts'
 export default {
   // components: {},
   // props: {},
-  data() {
+  data () {
     return {
       // 排行榜
       RankingData: [
@@ -169,20 +169,20 @@ export default {
       total: 0
     }
   },
-  mounted() {
+  mounted () {
     this.myEchars()
     // 分页
     this.total = this.AnomalyStatisticsTable.length
   },
   methods: {
     // 分页
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       console.log(`当前页: ${val}`)
     },
-    myEchars() {
+    myEchars () {
       var chartDom = document.getElementById('main')
       var myChart = echarts.init(chartDom)
       var option
@@ -276,7 +276,8 @@ export default {
     }
 
     .ApiBox {
-      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
+      background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
+        no-repeat;
       background-size: 100%;
       width: 22.5rem;
       height: 6.875rem;
@@ -313,7 +314,8 @@ export default {
     }
 
     .ApiBox:last-of-type {
-      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
+      background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png")
+        no-repeat;
       background-size: 100%;
 
       div {
@@ -383,9 +385,11 @@ export default {
               display: block;
               height: 1.25rem;
               width: 2.25rem;
-              background: linear-gradient(to right,
-                  rgba(204, 204, 204, 0.6),
-                  rgba(0, 0, 0, 0));
+              background: linear-gradient(
+                to right,
+                rgba(204, 204, 204, 0.6),
+                rgba(0, 0, 0, 0)
+              );
             }
           }
 
@@ -401,6 +405,7 @@ export default {
             white-space: nowrap;
             cursor: pointer;
             font-weight: bold;
+            word-break: break-all;
           }
 
           span {
@@ -412,9 +417,11 @@ export default {
 
         .RankingListData:nth-of-type(1) i b {
           width: 3.75rem;
-          background: linear-gradient(to right,
-              rgba(251, 59, 5, 0.6),
-              rgba(0, 0, 0, 0));
+          background: linear-gradient(
+            to right,
+            rgba(251, 59, 5, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(1) span {
@@ -423,9 +430,11 @@ export default {
 
         .RankingListData:nth-of-type(2) i b {
           width: 3.125rem;
-          background: linear-gradient(to right,
-              rgba(251, 123, 5, 0.6),
-              rgba(0, 0, 0, 0));
+          background: linear-gradient(
+            to right,
+            rgba(251, 123, 5, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(2) span {
@@ -434,9 +443,11 @@ export default {
 
         .RankingListData:nth-of-type(3) i b {
           width: 2.75rem;
-          background: linear-gradient(to right,
-              rgba(250, 179, 2, 0.6),
-              rgba(0, 0, 0, 0));
+          background: linear-gradient(
+            to right,
+            rgba(250, 179, 2, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(3) span {
@@ -447,7 +458,8 @@ export default {
       .AbnormalDistribution {
         margin-right: 3.75rem;
 
-        .container-body1 {}
+        .container-body1 {
+        }
       }
 
       .AnomalyStatistics {
@@ -472,12 +484,12 @@ export default {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            word-break: break-all;
           }
 
-          ::v-deep .el-table tbody tr:hover>td {
+          ::v-deep .el-table tbody tr:hover > td {
             background-color: transparent;
           }
-
         }
 
         .tablePagination {

back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue

@@ -1298,6 +1298,7 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
             cursor: pointer;
+            word-break: break-all;
           }
           div:last-child {
             height: 30px;

back/src/views/modules/workBench/components/bottom-view.vue

@@ -35,7 +35,7 @@ export default {
   components: {
     contentTitle
   },
-  data() {
+  data () {
     return {
       title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
       list: [],
@@ -77,13 +77,13 @@ export default {
       loadingTable: false
     }
   },
-  mounted() {
+  mounted () {
     this.getResourceByDept()
     this.getApplyByDept()
   },
   methods: {
     // 发布动态
-    getResourceByDept() {
+    getResourceByDept () {
       const data = {
         limit: 5,
         page: 1
@@ -109,7 +109,7 @@ export default {
       )
     },
     // 部门推荐能力
-    getApplyByDept() {
+    getApplyByDept () {
       const data = {
         limit: 5,
         page: 1
@@ -132,11 +132,11 @@ export default {
         }
       )
     },
-    jumpTo() {
+    jumpTo () {
       this.$router.push({
         path: 'activiti-my-work-dynamics'
-      });
-    },
+      })
+    }
   }
 }
 </script>
@@ -146,6 +146,7 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .bottom-view {

back/src/views/modules/workBench/components/dept-todo-view.vue

@@ -43,131 +43,132 @@
 </template>
 <script>
 export default {
-    data() {
-        return {
+  data () {
+    return {
 
-        }
-    },
-    props: {
-        dataInfo: {
-            type: Object,
-            default: () => { }
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-    },
-    methods: {
-        formatNum(num) {
-            return num || num === 0 ? num : '--'
-        },
-        goPage(url) {
-            this.$router.push({
-                path: url
-            });
-        },
     }
+  },
+  props: {
+    dataInfo: {
+      type: Object,
+      default: () => { }
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    formatNum (num) {
+      return num || num === 0 ? num : '--'
+    },
+    goPage (url) {
+      this.$router.push({
+        path: url
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .ellipsis {
-    //超出一行省略号
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  //超出一行省略号
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .no-margin-left {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .flex-row-bottom {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
 }
 
 .flex-row-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .dept-box {
-    display: flex;
-    align-items: center;
-    width: 394px;
-    height: 252px;
-    margin: 16px;
-    background: rgba($color: #f1f3f6, $alpha: 0.8);
+  display: flex;
+  align-items: center;
+  width: 394px;
+  height: 252px;
+  margin: 16px;
+  background: rgba($color: #f1f3f6, $alpha: 0.8);
 }
 
 .left-box {
-    display: flex;
-    justify-content: center;
-    // width: 80px;
-    width: 100px;
-    border-radius: 2px;
-    height: 100%;
+  display: flex;
+  justify-content: center;
+  // width: 80px;
+  width: 100px;
+  border-radius: 2px;
+  height: 100%;
 }
 
 .img {
-    height: 50px;
-    width: 50px;
-    margin: 0 auto;
+  height: 50px;
+  width: 50px;
+  margin: 0 auto;
 }
 
 .content {
-    // margin-top: 57px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  // margin-top: 57px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .title {
-    font-size: 18px;
-    color: #000;
-    margin-top: 25px;
-    margin-bottom: 18px;
-    text-align: center;
+  font-size: 18px;
+  color: #000;
+  margin-top: 25px;
+  margin-bottom: 18px;
+  text-align: center;
 }
 
 .num {
-    font-size: 30px;
+  font-size: 30px;
 }
 
 .unit {
-    font-size: 16px;
-    margin-left: 2px;
+  font-size: 16px;
+  margin-left: 2px;
 }
 
 .list-box {
-    width: 314px;
-    height: 252px;
-    padding: 0 16px;
+  width: 314px;
+  height: 252px;
+  padding: 0 16px;
 }
 
 .list-item {
-    height: 44px;
-    line-height: 44px;
-    box-sizing: border-box;
-    border-bottom: 1px dashed #c6c6c6;
-    font-size: 16px;
-    color: #212121;
+  height: 44px;
+  line-height: 44px;
+  box-sizing: border-box;
+  border-bottom: 1px dashed #c6c6c6;
+  font-size: 16px;
+  color: #212121;
 }
 
 .more {
-    color: #212121;
-    font-size: 14px;
-    height: 32px;
-    line-height: 32px;
-    text-align: right;
-    cursor: pointer;
+  color: #212121;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  text-align: right;
+  cursor: pointer;
 }
 
 .no-data {
-    font-size: 16px;
-    color: #212121;
+  font-size: 16px;
+  color: #212121;
 }
-</style>
+</style>

back/src/views/modules/workBench/components/frequency-top5-view.vue

@@ -113,6 +113,7 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .flex-row-between {

front/src/views/abilityStatistics/components/AbilityRanking.vue

@@ -257,6 +257,7 @@
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
                 margin-bottom: 20px;
+                word-break: break-all;
               }
               .content-fangwenliang {
                 width: 215px;
@@ -268,6 +269,7 @@
                 -webkit-box-orient: vertical;
                 color: #999999;
                 margin-bottom: 20px;
+                word-break: break-all;
               }
             }
           }

front/src/views/abilityStatistics/components/AtlasResources.vue

@@ -599,6 +599,7 @@
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
               .num {
                 width: 100px;
@@ -719,6 +720,7 @@
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
+              word-break: break-all;
             }
           }
           div:nth-of-type(1) {
@@ -757,6 +759,7 @@
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
               span:hover {
                 border: 1px solid #147ad8;

front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue

@@ -139,6 +139,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .item:nth-of-type(1) {

front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue

@@ -302,6 +302,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue

@@ -177,6 +177,7 @@
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue

@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }

front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue

@@ -110,6 +110,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-footer {
           position: absolute;

front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue

@@ -258,6 +258,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .label-content {
           position: relative;
@@ -291,6 +292,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .bottom {
@@ -314,8 +316,6 @@
         }
         .ant-btn:nth-of-type(3) {
           width: 145px;
-          background: #fff;
-          color: #526aff;
         }
       }
     }

front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue

@@ -324,138 +324,141 @@
 </script>
 
 <style lang="less" scoped>
-.usage-mode {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.8rem 0;
-
-  .content {
-    margin-top: 0.3rem;
+  .usage-mode {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
 
-    .content-left {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-        no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      margin-right: 0.6rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+    .content {
+      margin-top: 0.3rem;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 0.35rem;
 
-      .left {
-        .content-left-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
+      .content-left {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        margin-right: 0.6rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 0.35rem;
 
-          span:first-child {
-            margin-right: 0.1rem;
+        .left {
+          .content-left-title {
+            font-size: 0.26rem;
+            line-height: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+
+            span:first-child {
+              margin-right: 0.1rem;
+            }
           }
-        }
 
-        .content-left-content {
-          width: 4.2rem;
-          font-size: 0.2rem;
-          color: rgba(33, 41, 86, 0.8);
-          line-height: 0.2rem;
+          .content-left-content {
+            width: 4.2rem;
+            font-size: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            line-height: 0.2rem;
 
-          p {
-            display: -webkit-box;
-            margin-bottom: 0.1rem;
-
-            span:last-of-type {
-              width: 298px;
+            p {
               display: -webkit-box;
-              overflow: hidden;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
+              margin-bottom: 0.1rem;
+
+              span:last-of-type {
+                width: 298px;
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
             }
           }
         }
-      }
 
-      .right {
-        div {
-          height: 0.4rem;
-          width: 1.3rem;
-          background: #ffffff;
-          border-radius: 0.2rem;
-          color: #526aff;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-
-        div:first-child {
-          margin-bottom: 0.2rem;
-        }
-      }
-    }
-
-    .content-right {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-        no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 0 0.3rem;
-
-      .content-right-left {
-        border-right: 0.01rem solid #707fe0;
-        padding-right: 0.1rem;
-        margin-right: 0.1rem;
-      }
-
-      .content-right-title {
-        font-size: 0.26rem;
-        line-height: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.15rem;
-      }
-
-      .content-right-content {
-        display: flex;
-        font-size: 0.16rem;
-        color: rgba(33, 41, 86, 0.8);
-        line-height: 0.2rem;
-        overflow: hidden;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        flex-direction: column;
-
-        p {
-          // width: 1.60rem;
-          height: 0.2rem;
-          display: -webkit-box;
-          // overflow: hidden;
-          margin-bottom: 0.08rem;
-          white-space: nowrap;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          margin-right: 0.15rem;
-
-          span {
+        .right {
+          div {
+            height: 0.4rem;
+            width: 1.3rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            color: #526aff;
+            font-size: 0.2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             cursor: pointer;
           }
+
+          div:first-child {
+            margin-bottom: 0.2rem;
+          }
+        }
+      }
+
+      .content-right {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 0 0.3rem;
+
+        .content-right-left {
+          border-right: 0.01rem solid #707fe0;
+          padding-right: 0.1rem;
+          margin-right: 0.1rem;
+        }
+
+        .content-right-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.15rem;
+        }
+
+        .content-right-content {
+          display: flex;
+          font-size: 0.16rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+          flex-direction: column;
+
+          p {
+            // width: 1.60rem;
+            height: 0.2rem;
+            display: -webkit-box;
+            // overflow: hidden;
+            margin-bottom: 0.08rem;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
+
+            span {
+              cursor: pointer;
+            }
+          }
         }
       }
     }
   }
-}
 </style>

front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue

@@ -153,6 +153,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }

front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue

@@ -175,6 +175,7 @@
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
@@ -190,6 +191,7 @@
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 5;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
         }

front/src/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue

@@ -138,6 +138,7 @@
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 3;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
         }

front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue

@@ -115,160 +115,165 @@
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
-    width: 100%;
-    background: #f7f8fa;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-x: unset;
-
-    .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+    .function-intorduction {
+      width: 100%;
+      background: #f7f8fa;
       display: flex;
       flex-direction: column;
       align-items: center;
-      overflow: unset;
+      overflow-x: unset;
 
-      .tab {
-        max-width: 13rem;
-        overflow-x: auto;
+      .application-scenarios-and-case-son {
+        padding-top: 0.8rem;
+        padding-bottom: 0.8rem;
         display: flex;
-        justify-content: center;
-        color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
-        cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
+        flex-direction: column;
+        align-items: center;
+        overflow: unset;
 
-        .tab-son {
+        .tab {
+          max-width: 13rem;
+          overflow-x: auto;
           display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-right: 1rem;
+          justify-content: center;
+          color: #808080;
+          border-bottom: 0.01rem #e4e6f5 solid;
+          margin-top: 0.45rem;
+          margin-bottom: 0.4rem;
+          cursor: pointer;
+          padding-left: 0.4rem;
+          padding-right: 0.4rem;
 
-          .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
+          .tab-son {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-right: 1rem;
+
+            .tab-top {
+              min-width: 1.2rem;
+              font-size: 0.24rem;
+              line-height: 0.24rem;
+              margin-bottom: 0.2rem;
+              max-width: 2rem;
+              height: 0.24rem;
+              display: -webkit-box;
+              overflow: hidden;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              text-align: center;
+              word-break: break-all;
+            }
+
+            .tab-top-down {
+              min-width: 1.2rem;
+              color: #526aff;
+              margin-bottom: 0.16rem;
+            }
+
+            .tab-bottom {
+              height: 0.04rem;
+              width: 0.6rem;
+              background: #526aff;
+            }
+          }
+
+          .tab-son-class {
+            margin-left: 4.3rem;
+            margin-bottom: 0.02rem;
+          }
+
+          .tab-son-class-two {
+            margin-left: 2.3rem;
+            margin-bottom: 0.02rem;
+          }
+
+          .tab-son:last-child {
+            margin-right: 0rem;
+          }
+        }
+
+        .tab::-webkit-scrollbar-thumb {
+          background: rgba(82, 106, 255, 0.4);
+        }
+
+        .content {
+          display: flex;
+          position: relative;
+          width: 100%;
+          min-width: 13rem;
+          height: 3.4rem;
+
+          .content-left {
+            position: absolute;
+            left: 0;
+            min-width: 6.2rem;
+
+            :deep(.ant-image-img) {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+
+            // text-align: center;
+            .content-top {
+              text-align: left;
+            }
+          }
+
+          .content-right {
+            width: 6.2rem;
+            height: 3.4rem;
+            position: absolute;
+            right: 0;
+            display: flex;
+            justify-content: center;
+          }
+
+          .content-right-scene,
+          .content-right-case {
+            width: 6.2rem;
+            height: 3.4rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+
+          .content-left-scene,
+          .content-left-case {
+            height: 3.4rem;
+            width: 6.35rem;
+            border-radius: 0.1rem;
+            background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+            background-position: center;
+            background-size: 6.35rem 3.4rem;
+          }
+
+          .content-top {
+            font-size: 0.22rem;
+            line-height: 0.22rem;
+            color: #000000;
+            margin-bottom: 0.35rem;
+          }
+
+          .content-bottom {
+            font-size: 0.18rem;
+            color: #999999;
+            line-height: 0.26rem;
             display: -webkit-box;
             overflow: hidden;
-            -webkit-line-clamp: 1;
+            -webkit-line-clamp: 6;
             -webkit-box-orient: vertical;
-            text-align: center;
+  <<<<<<< HEAD
+  =======
+            word-break: break-all;
+  >>>>>>> hi-ucs-dev
           }
-
-          .tab-top-down {
-            min-width: 1.2rem;
-            color: #526aff;
-            margin-bottom: 0.16rem;
-          }
-
-          .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
-            background: #526aff;
-          }
-        }
-
-        .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
-        }
-
-        .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
-        }
-
-        .tab-son:last-child {
-          margin-right: 0rem;
         }
       }
 
-      .tab::-webkit-scrollbar-thumb {
-        background: rgba(82, 106, 255, 0.4);
-      }
-
-      .content {
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
-
-        .content-left {
-          position: absolute;
-          left: 0;
-          min-width: 6.2rem;
-
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
-
-          // text-align: center;
-          .content-top {
-            text-align: left;
-          }
-        }
-
-        .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
-          position: absolute;
-          right: 0;
-          display: flex;
-          justify-content: center;
-        }
-
-        .content-right-scene,
-        .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        .content-left-scene,
-        .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
-          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
-          background-position: center;
-          background-size: 6.35rem 3.4rem;
-        }
-
-        .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
-          color: #000000;
-          margin-bottom: 0.35rem;
-        }
-
-        .content-bottom {
-          font-size: 0.18rem;
-          color: #999999;
-          line-height: 0.26rem;
-          display: -webkit-box;
-          overflow: hidden;
-          -webkit-line-clamp: 6;
-          -webkit-box-orient: vertical;
-        }
+      .application-scenarios-and-case-son:first-child {
+        padding-top: 1rem;
       }
     }
-
-    .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
-    }
-  }
 </style>

front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue

@@ -236,6 +236,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
 
         .label-content {
@@ -275,6 +276,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
 
@@ -303,8 +305,6 @@
 
         .ant-btn:nth-of-type(3) {
           width: 1.45rem;
-          background: #fff;
-          color: #526aff;
         }
       }
     }

front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue

@@ -293,6 +293,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue

@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue

@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }

front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue

@@ -158,6 +158,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 1.2rem;
@@ -244,6 +245,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Business/BusinessTopDetails.vue

@@ -243,6 +243,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
 
         .label-content {
@@ -282,6 +283,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
 
@@ -306,8 +308,6 @@
         }
         .ant-btn:nth-of-type(3) {
           width: 145px;
-          background: #fff;
-          color: #526aff;
         }
       }
     }

front/src/views/detailsAll/components/Business/BusinessUsageMode.vue

@@ -297,6 +297,7 @@
                 overflow: hidden;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
             }
           }
@@ -358,6 +359,7 @@
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           flex-direction: column;
+          word-break: break-all;
 
           p {
             // width: 1.60rem;
@@ -369,6 +371,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             margin-right: 0.15rem;
+            word-break: break-all;
 
             span {
               cursor: pointer;

front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue

@@ -302,6 +302,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue

@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue

@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }

front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue

@@ -158,6 +158,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 1.2rem;
@@ -244,6 +245,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue

@@ -248,6 +248,7 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                word-break: break-all;
               }
             }
           }
@@ -272,6 +273,7 @@
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
             overflow: hidden;
+            word-break: break-all;
           }
         }
         .right {

front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue

@@ -245,6 +245,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 1;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
         .label-content {
@@ -278,6 +279,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 3;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }
@@ -302,8 +304,6 @@
         }
         .ant-btn:nth-of-type(3) {
           width: 1.45rem;
-          background: #fff;
-          color: #526aff;
         }
       }
     }

front/src/views/detailsAll/components/Developer/DeveloperTrial.vue

@@ -138,6 +138,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .main-center {

front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue

@@ -293,6 +293,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue

@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }

front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue

@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }

front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue

@@ -252,6 +252,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }

front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue

@@ -239,6 +239,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .label-content {
           position: relative;
@@ -273,6 +274,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .bottom {
@@ -296,8 +298,6 @@
         }
         .ant-btn:nth-of-type(3) {
           width: 1.45rem;
-          background: #fff;
-          color: #526aff;
         }
       }
     }

front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue

@@ -362,6 +362,7 @@
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           flex-direction: column;
+          word-break: break-all;
 
           p {
             // width: 1.60rem;
@@ -372,6 +373,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             margin-right: 0.15rem;
+            word-break: break-all;
 
             span {
               cursor: pointer;

front/src/views/home/DetailsPageconetent.vue

@@ -1757,5 +1757,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-line-clamp: 1;
+    word-break: break-all;
   }
 </style>

front/src/views/home/algorithmCompare.vue

@@ -814,6 +814,7 @@
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
+    word-break: break-all;
   }
 
   .td-name-text {

front/src/views/home/apply.vue

@@ -454,11 +454,11 @@
                           if (res.data.msg === 'success') {
                             mybus.emit('getSgcNum')
                             router.push({
-                          path: '/DetailsPageconetent',
-                          query: {
-                            select: '组件服务',
-                          },
-                        })
+                              path: '/DetailsPageconetent',
+                              query: {
+                                select: '组件服务',
+                              },
+                            })
                           }
                         })
                       }
@@ -468,29 +468,36 @@
               })
               console.log('提交数据==========================>', formName, ids)
               if (formName.system.length !== 0) {
+                if (formName.applicationSystem.length == 0) {
+                  formName.applicationSystem = ''
+                }
                 submitApply(formName).then((res) => {
                   // applySuccess.value = false
                   message.success('申请提交成功，请到消息中心查看！')
                   console.log('能力申请================>', res)
-                  if (ids && ids.length > 0) {
-                    sgcDel({ ids: ids }).then((res) => {
-                      if (res.data.msg === 'success') {
-                        mybus.emit('getSgcNum')
-                        router.push({
-                          path: '/DetailsPageconetent',
-                          query: {
-                            select: '组件服务',
-                          },
-                        })
-                      }
-                    })
+                  if (res.data.code == 0) {
+                    if (ids && ids.length > 0) {
+                      sgcDel({ ids: ids }).then((res) => {
+                        if (res.data.msg === 'success') {
+                          mybus.emit('getSgcNum')
+                          router.push({
+                            path: '/DetailsPageconetent',
+                            query: {
+                              select: '组件服务',
+                            },
+                          })
+                        }
+                      })
+                    } else {
+                      router.push({
+                        path: '/DetailsPageconetent',
+                        query: {
+                          select: '组件服务',
+                        },
+                      })
+                    }
                   } else {
-                    router.push({
-                      path: '/DetailsPageconetent',
-                      query: {
-                        select: '组件服务',
-                      },
-                    })
+                    message.error('申请失败！')
                   }
                 })
               }

front/src/views/home/components/AbilityToRecommend.vue

@@ -380,6 +380,7 @@
       font-size: 0.14rem;
       color: #666666;
       line-height: 0.2rem;
+      word-break: break-all;
     }
   }
   .chakangengduo {

front/src/views/home/components/header.vue

@@ -405,6 +405,7 @@
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
         overflow: hidden;
+        word-break: break-all;
       }
       .out {
         cursor: pointer;
@@ -487,6 +488,7 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
+      word-break: break-all;
       -webkit-box-orient: vertical;
     }
     button {

front/src/views/home/components/searchResultList.vue

@@ -968,6 +968,7 @@
             text-overflow: ellipsis;
             /*超出显示为省略号*/
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .btn {
@@ -1103,5 +1104,6 @@
     text-overflow: ellipsis;
     /*超出显示为省略号*/
     -webkit-box-orient: vertical;
+    word-break: break-all;
   }
 </style>

front/src/views/home/components/tableGrid.vue

@@ -114,6 +114,7 @@
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 3;
         overflow: hidden;
+        word-break: break-all;
       }
       button {
         margin: 0px;

front/src/views/home/detailsPageInfrastructureTree.vue

@@ -450,6 +450,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .up:hover {
@@ -496,6 +497,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .child:hover {

front/src/views/home/detailsPageconetentTree.vue

@@ -449,6 +449,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .up:hover {
@@ -495,6 +496,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .child:hover {

front/src/views/home/integrationServices.vue

@@ -53,7 +53,7 @@
 <script>
   import HomeFooter from '@/views/newHome/components/Footer'
   import mybus from '@/myplugins/mybus'
-  import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
+  import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
 
   import { getIntegrationServicesList } from '@/api/home.js'
   import { useRouter } from 'vue-router'
@@ -211,7 +211,6 @@
         pageSizeOptions,
         current,
         loading,
-        onShowSizeChange,
       }
     },
     components: {
@@ -228,109 +227,113 @@
   })
 </script>
 <style lang="less" scoped>
-  .resultListSearchInput-father {
-    background: #f3f5f9;
-    padding: 0.2rem;
+    .resultListSearchInput-father {
+      background: #f3f5f9;
+      padding: 0.2rem;
 
-    // padding-left: 0.2rem;
-    // padding-top: 0.2rem;
-    .resultListSearchInput-son {
-      background: #fff;
-      padding: 0.2rem 0.2rem 0rem 0.3rem;
+      // padding-left: 0.2rem;
+      // padding-top: 0.2rem;
+      .resultListSearchInput-son {
+        background: #fff;
+        padding: 0.2rem 0.2rem 0rem 0.3rem;
 
-      .hengxian {
-        width: 100%;
-        height: 0.01rem;
-        background: rgba(150, 144, 144, 0.3);
-        margin-top: 0.2rem;
+        .hengxian {
+          width: 100%;
+          height: 0.01rem;
+          background: rgba(150, 144, 144, 0.3);
+          margin-top: 0.2rem;
+        }
       }
     }
-  }
 
-  .resultListSearchInput {
-    margin-left: 0.1rem;
+    .resultListSearchInput {
+      margin-left: 0.1rem;
 
-    :deep(.ant-input) {
-      width: 4rem;
-      height: 0.36rem;
-      background: #fff;
-      border-radius: 0.04rem;
+      :deep(.ant-input) {
+        width: 4rem;
+        height: 0.36rem;
+        background: #fff;
+        border-radius: 0.04rem;
+      }
+
+      :deep(.ant-input-search-button) {
+        width: 0.8rem;
+        height: 0.36rem;
+        background: #0087ff;
+        border-radius: 0.04rem !important;
+        font-size: 0.14rem;
+        font-weight: 400;
+        color: #fff;
+        line-height: 0.34rem;
+        margin-left: 0.1rem;
+      }
+
+      :deep(.ant-input-group-addon) {
+        left: 0 !important;
+      }
     }
 
-    :deep(.ant-input-search-button) {
+    .button-reset {
+      border: 0;
+      outline: none;
       width: 0.8rem;
       height: 0.36rem;
-      background: #0087ff;
-      border-radius: 0.04rem !important;
+      background: #e1edfa;
+      border-radius: 0.04rem;
       font-size: 0.14rem;
       font-weight: 400;
-      color: #fff;
+      color: #0087ff;
       line-height: 0.34rem;
-      margin-left: 0.1rem;
+      margin-left: 2.5rem;
+      cursor: pointer;
     }
 
-    :deep(.ant-input-group-addon) {
-      left: 0 !important;
-    }
-  }
-
-  .button-reset {
-    border: 0;
-    outline: none;
-    width: 0.8rem;
-    height: 0.36rem;
-    background: #e1edfa;
-    border-radius: 0.04rem;
-    font-size: 0.14rem;
-    font-weight: 400;
-    color: #0087ff;
-    line-height: 0.34rem;
-    margin-left: 2.5rem;
-    cursor: pointer;
-  }
-
-  .details-pageconetent {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0.67rem;
-    position: relative;
-    background: rgba(245, 243, 243, 0.3);
-
-    .details-pageconetent-left {
-      max-height: 6.9rem;
-      position: absolute;
-      width: 2.5rem;
-      top: 0.17rem;
-      left: 2.5rem;
-      margin-right: 0.17rem;
-      overflow: auto;
-    }
-
-    .top {
-      min-height: 7.2rem;
-      position: relative;
-      width: 11.5rem;
+    .details-pageconetent {
+      height: 100%;
+      width: 100%;
       display: flex;
-      padding-top: 0.2rem;
-      flex-direction: column;
-      font-size: 0.16rem;
-      justify-content: left;
-      background: #f3f5f9;
+      justify-content: center;
+      align-items: center;
+      margin-top: 0.67rem;
+      position: relative;
+      background: rgba(245, 243, 243, 0.3);
 
-      .pagination {
+      .details-pageconetent-left {
+        max-height: 6.9rem;
+        position: absolute;
+        width: 2.5rem;
+        top: 0.17rem;
+        left: 2.5rem;
+        margin-right: 0.17rem;
+        overflow: auto;
+      }
+
+      .top {
+        min-height: 7.2rem;
+        position: relative;
+        width: 11.5rem;
+        display: flex;
+        padding-top: 0.2rem;
+        flex-direction: column;
+        font-size: 0.16rem;
+        justify-content: left;
         background: #f3f5f9;
-        padding-bottom: 0.6rem;
+
+        .pagination {
+          background: #f3f5f9;
+          padding-bottom: 0.6rem;
+        }
       }
     }
-  }
 
-  :deep(.ant-card-grid) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
-  }
+    :deep(.ant-card-grid) {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 1;
+  <<<<<<< HEAD
+  =======
+      word-break: break-all;
+  >>>>>>> hi-ucs-dev
+    }
 </style>

front/src/views/home/latestAbility.vue

@@ -185,6 +185,7 @@
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
+          word-break: break-all;
         }
         button {
           margin: 0rem;

front/src/views/mynoticeView/components/NoticeList.vue

@@ -423,6 +423,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .left:hover {
             color: #0058e1;

front/src/views/newHome/components/CapabilityConvergence.vue

@@ -328,6 +328,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .name:hover {
             color: #0058e1;

front/src/views/newHome/components/LatestCapabilities.vue

@@ -169,6 +169,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .text {
             width: 100%;

front/src/views/newHome/components/PopularAbility.vue

@@ -298,6 +298,7 @@
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
               .text {
                 width: 100%;
@@ -306,6 +307,7 @@
                 color: #212121;
                 line-height: 0.24rem;
                 height: 1rem;
+                word-break: break-all;
                 overflow: hidden;
               }
             }

front/src/views/newHome/components/RecommendationAbility.vue

@@ -179,6 +179,7 @@
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
+              word-break: break-all;
             }
             .content-top-pingfen {
               background: unset;
@@ -203,6 +204,7 @@
             -webkit-box-orient: vertical;
             margin-bottom: 0.12rem;
             cursor: pointer;
+            word-break: break-all;
           }
           .num {
             font-size: 0.14rem;

front/src/views/newHome/components/WorkDynList.vue

@@ -167,6 +167,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .pulish-time {
           position: absolute;

front/src/views/personalCenter/OnTheRightSideOfTheList.vue

@@ -176,6 +176,7 @@
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {

front/src/views/personalCenter/components/AbilityApplication.vue

@@ -300,6 +300,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                   .type {
                     background: #0087ff;
                     color: #fff;
@@ -321,6 +322,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;

front/src/views/personalCenter/components/Comment.vue

@@ -192,6 +192,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;

front/src/views/personalCenter/components/Demand.vue

@@ -201,6 +201,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;

front/src/views/personalCenter/components/MyApplication.vue

@@ -222,6 +222,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-body-content {
           margin-top: 10px;
@@ -238,6 +239,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {

front/src/views/personalCenter/components/MyApply.vue

@@ -863,6 +863,7 @@
             -webkit-box-orient: vertical;
             max-width: 8.1rem;
             line-height: 24px;
+            word-break: break-all;
           }
         }
         .content-body-bottom {

front/src/views/personalCenter/components/MyComments.vue

@@ -195,6 +195,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-body-content {
           margin-top: 10px;
@@ -212,6 +213,7 @@
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {

front/src/views/personalCenter/components/MyPublish.vue

@@ -573,6 +573,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
+            word-break: break-all;
             color: #999999;
           }
         }

front/src/views/personalCenter/components/OffTheShelf.vue

@@ -194,6 +194,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {

front/src/views/personalCenter/components/OtherApplications .vue

@@ -213,6 +213,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {

front/src/views/personalCenter/components/PurchaseVehicle.vue

@@ -862,6 +862,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }

front/src/views/personalCenter/components/PutOnTheShelf .vue

@@ -198,6 +198,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {