Merge branch 'hi-ucs-dev' of http://192.168.124.50:80/wuhongjian/hi-ucs into hi-ucs-dev

front/src/views/capacityOnTheShelf/Algorithm.vue

@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -79,37 +81,10 @@
         :required="required"
         :notFilled="notFilled"
       ></put-on-the-shelf>
-      <!-- <algorithm-essential-information
+   
-        v-if="showView === '基本信息' && refData.name"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :videoList="videoList"
-      ></algorithm-essential-information>
-      <algorithm-advantage
-        v-else-if="showView === '算法优势'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-advantage>
-      <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-deployment-use
-        v-else-if="showView === '部署与使用'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :fileList="fileList"
-        :imgList="imgList"
-      ></algorithm-deployment-use> -->
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+     
       <a-popconfirm
         v-if="
           showView == '算法优势' &&
@@ -251,9 +226,10 @@
       >
         <button>提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
         提交
       </button>
+       <button @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -447,18 +423,14 @@
     notFilled.value.push('部门联系人电话')
   }
   if (
-      !dataFrom.value.infoList.filter(
+    !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0] ||
-        (val) => val.attrType === '算法类别'
-      )[0] ||
     !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0]
       .attrValue
   ) {
     notFilled.value.push('算法类别')
   }
   if (
-      !dataFrom.value.infoList.filter(
+    !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0] ||
-        (val) => val.attrType === '应用领域'
-      )[0] ||
     !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
       .attrValue
   ) {
@@ -728,9 +700,7 @@
       }
     })
     data.value = res.data.data.children
-      refData.value = data.value.filter(
+    refData.value = data.value.filter((item) => item.name === showView.value)[0]
-        (item) => item.name === showView.value
-      )[0]
     console.log('所有编目结构==============>', data.value)
   })
 }
@@ -848,7 +818,7 @@
 .box {
   position: relative;
   top: 0.64rem;
-    margin: 0.15rem 4rem;
+  // margin: 0.15rem 3rem;
   padding: 0.1rem;
   background: #fff;
   .header {
@@ -859,57 +829,87 @@
     padding: 0 1rem;
   }
   .top {
-      margin: 0.1rem 0.2rem 0;
+    font-size: 16px;
-      padding: 0.15rem 0.3rem;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 0.18rem;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 0.45rem;
+          width: 32px;
-          height: 0.45rem;
+          height: 32px;
           border-radius: 50%;
-          border: 0.01rem solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 0.1rem;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 0.3rem;
+            width: 32px;
-            height: 0.3rem;
+            height: 32px;
             border-radius: 50%;
-            border: 0.01rem solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 0.1rem;
+        // margin-left: 16px;
-          width: 1.3rem;
+        width: 326px;
-          height: 0.01rem;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
-        .bg-box {
-          background: #9ccefa;
       color: #fff;
-          border: 0.01rem solid #9ccefa;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 0.01rem solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
@@ -941,7 +941,7 @@
       }
     }
     .first {
-        justify-content: space-around;
+      justify-content: center;
     }
   }
   .btn {
@@ -958,17 +958,27 @@
       border: none;
       border-radius: 0.06rem;
       background: #0087ff;
+      margin-right:12px;
     }
     button:nth-of-type(1) {
-        color: #0087ff;
+        background: #0058e1;
-        background: #e1edfa;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
       }
       button:nth-of-type(2) {
-        background: #01c5dc;
+        width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
       }
   }
   .first {
-      justify-content: space-around;
+    justify-content: center;
   }
 }
 </style>

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

@@ -8,41 +8,13 @@
 <template>
   <div class="put-on-the-shelf">
     <div v-for="title in props.refData.children" :key="title.id">
-      <div class="top">
+      <!-- <div class="top">
         <div></div>
         <div>{{ title.name }}</div>
         <div></div>
-      </div>
+      </div> -->
       <template v-if="title.isConfigure">
         <div class="bottom">
-          <!-- <div class="items" v-if="data[title.name].length > 0">
-            <div
-              class="item"
-              v-for="(val, index) in data[title.name]"
-              :key="'key1' + val.name + index"
-            >
-              <p>
-                <span>{{ title.name }}-{{ index + 1 }}</span>
-                <span></span>
-              </p>
-              <p
-                v-for="attr in props.configure.filter(
-                  (item, index2) => item.name === title.name
-                )[0].list"
-                :key="'key2' + attr.name + index2"
-              >
-                <span>{{ attr.name }}</span>
-                <span v-if="attr.type === 'image'">
-                  <a-image :width="85" :height="60" :src="val.img" />
-                </span>
-                <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
-              </p>
-              <div class="del">
-                <i class="delImg" @click="del(title.name, index)"></i>
-                <div @click="del(title.name, index)">删除</div>
-              </div>
-            </div>
-          </div> -->
           <div
             v-for="(val, index) in data[title.name]"
             :key="'key1' + val.name + index"
@@ -75,7 +47,7 @@
               )[0].list"
               :key="'key2' + attr.name + index2"
             >
-              <span>{{ attr.name }}</span>
+              <span>{{ attr.name }} : </span>
               <a-input
                 disabled
                 v-model:value="val[attr.field]"
@@ -99,33 +71,16 @@
                 :placeholder="'请填写' + attr.name"
                 v-else-if="attr.type == 'textArea'"
               />
-              <!-- <a-radio-group
-                v-model:value="val[attr.field]"
-                :options="val.options"
-                @change="radioChange"
-                v-else-if="attr.type == 'radio'"
-              /> -->
               <div v-else-if="attr.type == 'radio'">
                 {{ val[attr.field] + (attr.company || '') }}
               </div>
               <span v-else-if="attr.type === 'image'">
                 <a-image :width="85" :height="60" :src="val.img" />
               </span>
-              <!-- <upload
+             
-                :key="showKey"
-                type="图片"
-                btnName="上传图片"
-                :maxCount="1"
-                :data="val"
-                :list="[]"
-                tip="支持图片类型，大小不超过100M"
-                v-else-if="val.type == 'image'"
-              ></upload> -->
             </div>
           </div>
-          <!-- <div class="add" @click="add(title.name)">
+          
-            添加更多{{ title.name }}
-          </div> -->
           <div style="font-size: 0.18rem; font-weight: 600">
             <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
           </div>
@@ -136,7 +91,7 @@
             )[0].list"
             :key="'key3' + val.name + index"
           >
-            <span>{{ val.name }}</span>
+            <span>{{ val.name }}:</span>
             <a-input
               v-model:value="val.note1"
               :maxlength="24"
@@ -228,7 +183,7 @@
                 <b class="required" v-if="required.indexOf(item.name) > -1">
                   *
                 </b>
-                {{ item.name }}
+                {{ item.name }} :
               </div>
               <a-input
                 :maxLength="1000"
@@ -252,20 +207,32 @@
                 :options="item.options"
                 @change="changeIiem(item.name, item.note1)"
               />
-              <a-input
+              <!-- <a-input
                 v-else-if="item.type == 'AbilityType'"
                 :maxLength="1000"
                 v-model:value="item.note1"
                 :placeholder="'请输入' + item.name"
                 :disabled="true"
-              />
+              /> -->
-              <a-input
+              <span
+                v-else-if="item.type == 'AbilityType'"
+                style="font-weight: bold; color: #212121"
+              >
+                {{ item.note1 }}
+              </span>
+              <span
+                v-else-if="item.type == 'ComponentType'"
+                style="font-weight:bold;color:#212121}"
+              >
+                {{ item.note1 }}
+              </span>
+              <!-- <a-input
                 v-else-if="item.type == 'ComponentType'"
                 v-model:value="item.note1"
                 :maxLength="1000"
                 :placeholder="'请输入' + item.name"
                 :disabled="true"
-              />
+              /> -->
               <a-textarea
                 v-else-if="item.type == 'textArea'"
                 v-model:value="item.note1"
@@ -345,15 +312,29 @@
                   <VueTemplateDemo :dataFrom="props.dataFrom"></VueTemplateDemo>
                 </div>
               </div>
-              <upload
+              
+              <!-- <upload
                 v-else-if="item.type == 'video'"
                 type="视频"
-                btnName="上传视频"
+                btnName="请上传视频"
                 :maxCount="1"
                 :data="item"
                 :list="props.videoList"
                 tip="支持视频类型，大小不超过100M"
-              ></upload>
+              >
+           
+            </upload> -->
+
+        <upload v-else-if="item.type == 'video'"
+         type="视频"
+                btnName="请上传视频"
+                :maxCount="1"
+                :data="item"
+                :list="props.videoList"
+                tip="支持视频类型，大小不超过100M">
+        </upload>
+   
+
               <!-- <a-button
               v-else-if="item.type == 'AssociatedApplication'"
               @click="sourceClick"
@@ -393,11 +374,11 @@
                   {{ itemSelect.dictLabel }}
                 </a-select-option>
               </a-select>
-              <a-select
+              <!-- <a-select
                 v-else-if="item.type == 'select' && item.name !== '归属部门'"
                 style="width: 2.4rem"
                 v-model:value="item.note1"
-                :placeholder="'请选择' + item.name"
+                :placeholder="'请选择11' + item.name"
                 @change="changeIiem(item.name, item.note1)"
               >
                 <a-select-option
@@ -407,7 +388,27 @@
                 >
                   {{ itemSelect.dictLabel }}
                 </a-select-option>
-              </a-select>
+              </a-select> -->
+              <div
+                v-else-if="item.type == 'select' && item.name !== '归属部门'"
+                class="danxuan-Area"
+                id="danxuan-Area"
+              >
+                <div
+                  v-for="(itemSelect, indexSelect) in item.options"
+                  :key="indexSelect"
+                  :value="itemSelect.dictLabel"
+                  class="danxuan-Area-son"
+                  @click="danxuanArea(item, item.name, itemSelect.dictLabel)"
+                  :class="
+                    item.note1 && item.note1 === itemSelect.dictLabel
+                      ? 'danxuan-Area-down'
+                      : ''
+                  "
+                >
+                  {{ itemSelect.dictLabel }}
+                </div>
+              </div>
               <a-select
                 v-else-if="item.name === '归属部门'"
                 style="width: 2.4rem"
@@ -438,6 +439,7 @@
                   "
                 >
                   {{ itemson.dictLabel }}
+                  <div class="application-Area-son-son"></div>
                 </div>
               </div>
             </div>
@@ -541,6 +543,8 @@
 const abilityToType = router.currentRoute.value.query.abilityToType
 const componentTypeValue = router.currentRoute.value.query.componentTypeValue
 const changeField = ref([])
+//选取的数据
+const chooseField = ref([])
 const props = defineProps({
   // 展示数据
   refData: { type: Object, default: null },
@@ -605,10 +609,8 @@
   // }]
 })
 const emit = defineEmits(['next', 'back', 'submit', 'preview'])
-  // console.log('props==========>', props)
+
-  const changeAdd = () => {
+const changeAdd = () => {}
-    console.log('子组件方法触发~')
-  }
 const data = ref({
   list: [],
 })
@@ -626,6 +628,7 @@
     }
   }
 }
+
 props.refData.children.map((item) => {
   if (item.name == '基本信息') {
     item.children.map((val) => {
@@ -691,12 +694,11 @@
         item.options = dataList
         if (!item.note1) {
           getUserInfo().then(({ data: res1 }) => {
-              console.log(res1.data)
             item.note1 = res1.data.deptId
             item.note2 = item.options.filter(
               (val) => val.value == item.note1
             )[0]
-              console.log('默认部门=========>', item, res1.data)
+
             data.value.list.push(item)
           })
         } else {
@@ -743,10 +745,8 @@
       data.value.list.push(item)
     }
   })
-    console.log('props.dataFrom', data.value.list)
 })
 if (props.dataFrom) {
-    // console.log(props.dataFrom, data.value.list)
   props.dataFrom.infoList.forEach((item) => {
     if (
       props.configure &&
@@ -760,7 +760,6 @@
             // 通过;分割成数组
             child.note2 = item.attrValue.split(';')
             showKey.value++
-              // console.log('应用领域', item, item.attrValue.split(';'), child)
           }
         })
       })
@@ -771,20 +770,16 @@
 //显示富文本
 let showText = ref(false)
 const showTextFunction = () => {
-    console.log('点击富文本=========================>')
   showText.value = true
 }
 mybus.on('showTextFunctionEmit', (show) => {
-    console.log('ssdcsd')
   showText.value = show
 })
 mybus.off('func')
 const add = (title, addFlag, type) => {
-    console.log(title, 'title')
   let list = props.configure.filter((item) => item.name === title)[0].list
   let flag = true
   list.forEach((item) => {
-      // console.log(item)
     if (item.type !== 'number' && !item.note1.length > 0) {
       flag = false
     } else if (item.type === 'number' && !item.note1 > 0) {
@@ -821,7 +816,7 @@
     if (!sfFlag) {
       data.value[title].push(obj)
     }
-      // console.log(data.value[title])
+
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
@@ -871,24 +866,17 @@
   })
 }
 const ApplicationArea = (item, itemson) => {
-    // console.log('点击=========》', item, itemson)
-    // console.log(item, itemson)
   if (item.note2.indexOf(itemson.dictLabel) === -1) {
     item.note2.push(itemson.dictLabel)
   } else {
     item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
   }
   // 多选判断是否为空
-    if (
+  if (item.note2.length !== 0 && changeField.value.indexOf('应用领域') == -1) {
-      item.note2.length !== 0 &&
-      changeField.value.indexOf('应用领域') == -1
-    ) {
     changeField.value.push('应用领域')
-      console.log('点击=========》1', changeField.value, item.note2)
   } else if (item.note2.length == 0) {
     if (changeField.value.indexOf('应用领域') > -1) {
       changeField.value.splice(changeField.value.indexOf('应用领域'), 1)
-        console.log('点击=========》2', changeField.value, item.note2)
     }
   }
   mybus.emit('chageDataFrom', {
@@ -897,6 +885,20 @@
     delFlag: 0,
   })
 }
+const danxuanArea = (item, itemSelect, indexSelect) => {
+
+  if(item.note1){
+ if(item.note1===indexSelect){
+  item.note1= null
+ }else{
+ item.note1=indexSelect
+ }
+  }else{
+    item.note1 = indexSelect
+  }
+  
+  changeIiem(itemSelect, indexSelect)
+}
 // 来源应用
 const visibleAssociatedApplication = ref(false)
 const visibleAssociatedApplicationOther = ref(false)
@@ -917,7 +919,6 @@
       queryApplicationRelByResourceId({
         referenceId: 0,
       }).then((res) => {
-          // console.log(res.data.data.notLinked)
         res.data.data.notLinked.forEach((val, index) => {
           mockData.value.push({
             key: val.id,
@@ -930,13 +931,10 @@
       val.attrValue.split(',').forEach((item) => {
         targetKeys.value.push(item)
       })
-        console.log(targetKeys.value)
-        // console.log('wowowo')
     } else if (val.attrType === '来源应用' && val.attrValue == '') {
       queryApplicationRelByResourceId({
         referenceId: 0,
       }).then((res) => {
-          // console.log(res.data.data.notLinked)
         res.data.data.notLinked.forEach((val, index) => {
           mockData.value.push({
             key: val.id,
@@ -961,7 +959,6 @@
         type: '组件服务',
         referenceName: '',
       }).then((res) => {
-          // console.log(res.data.data.notLinked)
         res.data.data.notLinked.forEach((val, index) => {
           mockDataOther.value.push({
             key: val.id,
@@ -974,15 +971,12 @@
       val.attrValue.split(',').forEach((item) => {
         targetKeysOther.value.push(item)
       })
-        console.log(targetKeysOther.value)
-        // console.log('wowowo')
     } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
       queryResourceRelByKeyId({
         keyId: 0,
         type: '组件服务',
         referenceName: '',
       }).then((res) => {
-          // console.log(res.data.data.notLinked)
         res.data.data.notLinked.forEach((val, index) => {
           mockDataOther.value.push({
             key: val.id,
@@ -998,35 +992,22 @@
 const selectedKeysOther = ref([])
 
 const handleChange = (nextTargetKeys, direction, moveKeys) => {
-    console.log('targetKeys: ', nextTargetKeys)
-    console.log('direction: ', direction)
-    console.log('moveKeys: ', moveKeys)
   if (direction === 'right') {
     targetKeys.value = moveKeys.filter((item, index) => index === 0)
   }
 }
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {}
-    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
+const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {}
-  }
+const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {}
-  const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {
-    console.log('targetKeys: ', nextTargetKeys)
-    console.log('direction: ', direction)
-    console.log('moveKeys: ', moveKeys)
-  }
-  const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {
-    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
-  }
 
 const filterOptionTransfer = (inputValue, option) => {
-    console.log(option, 'option')
   return option.description.indexOf(inputValue) > -1
 }
 
 const handleOk = (e) => {
-    console.log(e)
   visibleAssociatedApplicationOther.value = false
   visibleAssociatedApplication.value = false
-    // console.log('2222222222222', props.refData)
+
   data.value.list.map((item) => {
     if (item.name === '来源应用') {
       item.note1 = targetKeys.value + ''
@@ -1036,7 +1017,6 @@
   })
 }
 const handleCancel = (e) => {
-    console.log(e)
   visibleAssociatedApplicationOther.value = false
   visibleAssociatedApplication.value = false
 }
@@ -1044,14 +1024,11 @@
 const showType = ref('')
 const showTypeClick = (e) => {
   showType.value = e
-    console.log(e, 'showType', showType.value)
 }
 showTypeClick('调用接口')
 
 watch(data.value.list, (newProps, oldProps) => {
-    console.log('数据发生改变==========>', newProps, oldProps)
   newProps.forEach((val) => {
-      // console.log('数据发生改变==========>', val)
     if (
       props.configure &&
       props.configure.filter((item) => item.name === val.name).length > 0
@@ -1069,7 +1046,7 @@
       if (val.options) {
         note2 = val.options.filter((item) => item.value == val.note1)[0]
       }
-        console.log('chageDataFromDwon===================>', val)
+
       mybus.emit('chageDataFromDwon', {
         attrType: val.name,
         attrValue: val.note1,
@@ -1079,7 +1056,6 @@
     } else {
       if (val.name !== '应用领域' && val.name !== '发布端') {
         if (val.name == '算法介绍视频') {
-            console.log('变更视频==================>', val)
           mybus.emit('chageDataFrom', {
             attrType: val.name,
             attrValue: val.note1,
@@ -1103,22 +1079,13 @@
       item.note1 = value
     }
   })
-    console.log(`selected ${value}`)
 }
 
-  const handleBlur = () => {
+const handleBlur = () => {}
-    console.log('blur')
+const applicationsBlur = () => {}
-  }
-  const applicationsBlur = () => {
-    console.log('blur')
-  }
 
-  const handleFocus = () => {
+const handleFocus = () => {}
-    console.log('focus')
+const applicationsFocus = () => {}
-  }
-  const applicationsFocus = () => {
-    console.log('focus')
-  }
 
 const filterOption = (input, option) => {
   return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -1132,13 +1099,56 @@
 </script>
 <style></style>
 <style lang="less" scoped>
+
+:deep(.upload-list-inline .ant-upload .ant-btn) {
+    height: 150px;
+    width: 218px;
+    border: 1px solid rgba(198,198,198,0.5);
+    border-radius: 2px; 
+    background: rgba(0,88,225,0.05);
+    color: #0087ff;
+    font-size: 14px;
+}
+
+:deep(.upload-list-inline .ant-upload .ant-btn > span){
+    background:url('~@/assets/home/yuanjia.png') no-repeat ;
+    color: #666666;
+    background-position: center;
+    text-align: center;
+    line-height: 120px;
+    height: 50px;
+}
+ // 箭头大小以及位置
+ :deep(.ant-select-arrow) {
+  background:url('~@/assets/home/huixia.png') no-repeat ;
+  cursor: pointer;
+    margin-top: -4px;
+    margin-right: -4px;
+  }
+
+  // 隐藏三角
+  :deep(.ant-select-arrow .anticon){
+    vertical-align: top;
+    transition: transform 0.3s;
+    display: none;
+  } 
+  // :deep(.ant-select-arrow :focus) {
+  //   background:url('~@/assets/home/huishang.png') no-repeat ;
+  // cursor: pointer;
+  //   margin-top: -4px;
+  //   margin-right: -4px;
+  // }
+
+
+
 .put-on-the-shelf {
-    height: 6.8rem;
+  margin: 0.15rem 2rem;
+  background: rgb(246, 247, 249, 0.8);
+  height: 846px;
   overflow: scroll;
   display: flex;
   flex-direction: column;
   align-items: center;
-    padding: 0.5rem 1rem 0.25rem;
   .Technical-text {
     height: 0.3rem;
     width: 1rem;
@@ -1155,12 +1165,13 @@
   }
 
   & > div {
+    padding: 0px 0px 24px 24px;
     width: 100%;
-      margin-top: 0.6rem;
+    font-size: 14px;
 
     .top {
       color: #333333;
-        font-size: 0.22rem;
+
       display: flex;
       justify-content: center;
       align-items: center;
@@ -1179,7 +1190,7 @@
     }
 
     .bottom {
-        margin-top: 0.25rem;
+      // margin-top: 0.25rem;
 
       .items {
         background: #fafafa;
@@ -1273,32 +1284,86 @@
     margin-top: 0;
   }
 }
-
+.danxuan-Area {
-  .application-Area {
-    width: 5.2rem;
   display: grid;
   margin-top: -0.05rem;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: auto auto auto auto auto auto;
-
+  border-right: 1px #0558e1 solid;
-    .application-Area-son {
+  .danxuan-Area-son {
     cursor: pointer;
-      font-size: 0.14rem;
+    min-width: 80px;
-      width: 0.9rem;
+    height: 32px;
-      height: 0.26rem;
+    border-radius: 2px;
-      border-radius: 0.13rem;
+    color: #0558e1;
-      color: #333333;
+    background: #fff;
-      background: #f5f5f5;
+    border-left: 1px #0558e1 solid;
-      border: 0.01rem #cccccc solid;
+    border-bottom: 1px #0558e1 solid;
+    border-top: 1px #0558e1 solid;
     display: flex;
     justify-content: center;
     align-items: center;
-      margin-top: 0.1rem;
+  }
-      font-weight: 500;
+  .danxuan-Area-son:hover {
+    color: #fff;
+    background: #0558e1;
+  }
+
+
+  .danxuan-Area-down {
+    background: #0058e1;
+    color: #fff;
+    // border: 1px #0558e1 solid;
+  }
+}
+
+.application-Area {
+  display: grid;
+  margin-top: -0.05rem;
+  grid-template-columns: auto auto auto auto auto auto;
+
+  .application-Area-son {
+    cursor: pointer;
+    width: 162px;
+    height: 32px;
+    border-radius: 2px;
+    color: #212121;
+    background: rgba(96, 99, 104, 0.1);
+    border: 0.01rem rgba(96, 99, 104, 0.1) solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 8px;
+    margin-right: 8px;
+    position: relative;
+    .application-Area-son-son {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      z-index: 100;
+      width: 16px;
+      height: 16px;
+      background: url('~@/assets/home/kong.png') no-repeat;
+    }
+  }
+  .application-Area-son:hover {
+    opacity: 0.9;
+    color: #0058e1;
+    border: 1px #0558e1 solid;
   }
 
   .application-Area-down {
-      background: #0087ff;
+    opacity: 0.9;
-      color: #fff;
+    color: #0058e1;
+    border: 1px #0558e1 solid;
+    .application-Area-son-son {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      z-index: 100;
+      width: 16px;
+      height: 16px;
+      background: url('~@/assets/home/duihao.png') no-repeat;
+    }
   }
 }
 
@@ -1397,22 +1462,52 @@
     width: unset;
   }
   .box {
+  
     display: flex;
     align-items: center;
+    min-height: 32px;
     // margin: 15px 0;
     & > div:nth-of-type(1) {
-        width: 105px;
+      text-align: right;
-        display: flex;
+      width: 110px;
+      margin-right: 16px;
+      // display: flex;
       align-items: center;
     }
     .required {
-        color: #f56c6c;
+      color: #e83e48;
-        margin-right: 3px;
+      margin-left: -6px;
+    }
+    
+  }
+
+ :deep(.the-new-release .box .first){
+      justify-content: center !important;
+
+    
+      padding: 10px 350px 0;
+      button {
+        cursor: pointer;
+        width: 80px;
+        height: 35px;
+        text-align: center;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        background: yellow;
+      }
+      button:nth-of-type(1) {
+        color:red;
+        background: #e1edfa;
+      }
+      button:nth-of-type(2) {
+        background: yellow;
       }
     }
+  
   .requiredTips {
     font-size: 14px;
-      color: #f56c6c;
+    color: #e83e48;
     position: absolute;
     bottom: -20px;
     left: 110px;

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

@@ -1,57 +1,5 @@
 <template>
   <div class="work-dynamics">
-    <!-- <div class="title">
-      <div>工作动态</div>
-      <div class="title-son"></div>
-    </div>
-    <div class="content" v-if="dataList && dataList.length > 0">
-      <div v-for="(item, index) in dataList" :key="item">
-        <div class="content-one" v-if="index % 2 == 0">
-          <div class="one">
-            <a-image
-              style="text-align: center"
-              alt="暂无图片"
-              :src="item.imageUrl"
-              :fallback="imgSrc"
-            />
-          </div>
-          <div class="content-miaoshui">
-            <div class="content-miaoshui-title">{{ item.title }}</div>
-            <div class="content-miaoshui-content">
-              {{ item.content }}
-            </div>
-            <div class="shijain">
-              <div>{{ item.createDate }}发布</div>
-              <div class="shijain-content-bootom" @click="selectOne(item.id)">
-                查看详情
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="content-one" v-else>
-          <div class="content-miaoshui">
-            <div class="content-miaoshui-title">{{ item.title }}</div>
-            <div class="content-miaoshui-content">
-              {{ item.content }}
-            </div>
-          </div>
-          <div class="one">
-            <a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
-            <div class="shijain">
-              <div>{{ item.createDate }}发布</div>
-              <div class="shijain-content-bootom" @click="selectOne(item.id)">
-                查看详情
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <a-empty v-else></a-empty>
-    <div class="bottom" @click="jumpPage()">
-      查看更多
-      <span class="gengduo"></span>
-    </div> -->
     <div class="fixedmount">
       <div @click="applyResource()">
         <p></p>
@@ -67,12 +15,14 @@
         <!-- <a-button type="primary" >Open Modal</a-button> -->
         <a-modal
           v-model:visible="visible"
-          @ok="handleOk"
+          
           class="shangjia-class"
-          @cancel="handlecancel"
+         
         >
+      
+
           <div class="ant-modal-title" id="vcDialogTitle1">
-            <div class="showBg"></div>
+            <!-- <div class="showBg"></div> -->
             能力上架申请
           </div>
           <div class="ability-to-type">
@@ -92,52 +42,19 @@
               </div>
             </div>
           </div>
+         
           <div
-            class="component-type"
+            class="ability-to-type"
             v-if="abilityToTypeFunctionData == '组件服务'"
           >
             <div class="title">组件类型选择</div>
-            <div class="component-type-content">
-              <!-- <a-checkbox-group
-                v-model:value="value1"
-                name="checkboxgroup"
-                :options="componentType"
-              /> -->
-              <a-radio-group v-model:value="componentTypeValue">
-                <a-radio
-                  @click="componentTypeValueFunction(item)"
-                  v-for="item in componentType"
-                  :key="item"
-                  :value="item"
-                >
-                  {{ item }}
-                </a-radio>
-              </a-radio-group>
-            </div>
-          </div>
-        </a-modal>
-      </div>
-      <!-- <div @click="showAbilitySquare">
-        <p></p>
-        <p>能力广场</p>
-        <a-modal
-          v-model:visible="visibleAbilitySquare"
-          @ok="handleOkAbilitySquare"
-          class="shangjia-class"
-          @cancel="handlecancelAbilitySquare"
-        >
-          <div class="ant-modal-title" id="vcDialogTitle1">
-            <div class="showBg"></div>
-            能力广场目录
-          </div>
-          <div class="ability-to-type">
             <div class="ability-to-type-content">
               <div
-                v-for="item in abilitySquare"
+                v-for="item in componentType"
                 :key="item"
-                @click="abilitySquareFunction(item)"
+                @click="componentTypeValueFunction(item)"
                 :class="
-                  abilitySquareFunctionData == item
+                  componentTypeValue == item
                     ? 'ability-to-type-down'
                     : ''
                 "
@@ -146,8 +63,14 @@
               </div>
             </div> 
            </div>
+           <template v-slot:footer>
+        <a-button  class="shenqing" @click="handleOk">申请</a-button>
+        <a-button class="quxiao"  @click="handlecancel">取消</a-button>
+    </template>
+
         </a-modal>
-      </div> -->
+      </div>
+    
     </div>
   </div>
 </template>
@@ -176,6 +99,7 @@
 function abilityToTypeFunction(item) {
   abilityToTypeFunctionData.value = item
 }
+
 let abilityToType = ref(['组件服务', '应用资源'])
 let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
 let componentType = ref([
@@ -197,6 +121,7 @@
 }
 let componentTypeValueOld = ref('')
 function componentTypeValueFunction(item) {
+  componentTypeValue.value = item
   if (componentTypeValueOld.value != item) {
     componentTypeValue.value = item
     componentTypeValueOld.value = item
@@ -272,10 +197,7 @@
   // store.commit('WorkDynList', {
   //   selectCardsnum: '组件服务',
   // })
-    console.log(
+  console.log('选中===================>', store.getters['home/selectCardsnum'])
-      '选中===================>',
-      store.getters['home/selectCardsnum']
-    )
   // router.push({ path: '/DetailsPageconetent' })
   router.push({
     path: '/WorkDynList',
@@ -334,7 +256,33 @@
   margin-top: -1.44rem;
   font-size: 0.14rem;
   font-weight: 500;
+  .ant-modal-footer {
+    border: 0;
+    text-align: center;
+    margin-top: 24px;
+    padding-bottom: 24px;
    
+    .shenqing{
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    .quxiao{
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+
+    }
+}
+  .ant-modal-body {
+    padding: 0px !important;
+  }
   .ant-radio-inner {
     height: 0.16rem;
     width: 0.16rem;
@@ -346,17 +294,21 @@
     background-position: center;
   }
   .ant-modal-content {
-      border-radius: 0.1rem;
+    border-radius: 2px;
+    border: 1px #e6e9ed solid;
+    width: 690px;
+    box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
     .ability-to-type,
     .component-type {
       display: flex;
-        margin-top: 0.2rem;
+      margin-top: 24px;
+      margin-left: 24px;
       .title {
         white-space: nowrap;
-          margin-right: 0.2rem;
         display: flex;
         align-items: center;
         height: 0.26rem;
+        font-size: 16px;
       }
       .component-type-content {
         width: 100%;
@@ -365,7 +317,7 @@
         background: unset;
         .ant-radio-group {
           display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
+          grid-template-columns: auto auto auto auto;
           grid-gap: 0.15rem;
         }
       }
@@ -374,20 +326,26 @@
     .ability-to-type {
       .ability-to-type-content {
         display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: auto auto auto auto;
         height: unset;
         border: unset;
         background: unset;
+        margin-left: 20px;
         div {
-            margin-right: 0.15rem;
+          &:hover {
+    background: #0058e1;
     cursor: pointer;
-            font-size: 0.14rem;
+    color:#ffffff;
-            width: 0.9rem;
+  }
-            height: 0.26rem;
+          margin-right: 16px;
-            border-radius: 0.13rem;
+          cursor: pointer;
-            color: #333333;
+          font-size: 16px;
-            background: #f5f5f5;
+          width: 90px;
-            border: 0.01rem #cccccc solid;
+          height: 32px;
+          border-radius: 2px;
+          color: #0058e1;
+          background: #ffffff;
+          border: 1px #0058e1 solid;
           display: flex;
           justify-content: center;
           align-items: center;
@@ -395,7 +353,7 @@
         }
 
         .ability-to-type-down {
-            background: #0087ff;
+          background: #0058e1;
           color: #fff;
         }
       }
@@ -405,15 +363,25 @@
   .ant-modal-title {
     display: flex;
     align-items: center;
+    display: flex;
+    align-items: center;
+    margin: 0px 24px;
+    padding-top: 24px;
+    padding-bottom: 22px;
+    color: #212121;
+    font-weight: bold;
+    font-size: 20px;
+    border-bottom: 2px solid #ebeced;
   }
 
   .ant-modal-footer {
     border: 0;
     text-align: center;
     padding-bottom: 0.2rem;
+    margin-top:50px;
     button {
-        margin-right: 0.2rem;
+      margin-right: 12px;
-        border-radius: 0.08rem;
+      border-radius: 2px;
     }
   }