front/src/views/capacityOnTheShelf/Algorithm.vue

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

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

@@ -8,13 +8,41 @@
 <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"
@@ -47,7 +75,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]"
@@ -71,16 +99,33 @@
                 :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>
@@ -91,7 +136,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"
@@ -183,7 +228,7 @@
                 <b class="required" v-if="required.indexOf(item.name) > -1">
                   *
                 </b>
-                {{ item.name }} :
+                {{ item.name }}
               </div>
               <a-input
                 :maxLength="1000"
@@ -207,32 +252,20 @@
                 :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"
-              /> -->
+              />
-              <span
+              <a-input
-                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"
@@ -312,29 +345,15 @@
                   <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"
@@ -374,11 +393,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="'请选择11' + item.name"
+                :placeholder="'请选择' + item.name"
                 @change="changeIiem(item.name, item.note1)"
               >
                 <a-select-option
@@ -388,27 +407,7 @@
                 >
                   {{ 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"
@@ -439,7 +438,6 @@
                   "
                 >
                   {{ itemson.dictLabel }}
-                  <div class="application-Area-son-son"></div>
                 </div>
               </div>
             </div>
@@ -543,8 +541,6 @@ const router = useRouter()
   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 },
@@ -609,8 +605,10 @@ const props = defineProps({
     // }]
   })
   const emit = defineEmits(['next', 'back', 'submit', 'preview'])
-
+  // console.log('props==========>', props)
-const changeAdd = () => {}
+  const changeAdd = () => {
+    console.log('子组件方法触发~')
+  }
   const data = ref({
     list: [],
   })
@@ -628,7 +626,6 @@ const changeIiem = (name, value) => {
       }
     }
   }
-
   props.refData.children.map((item) => {
     if (item.name == '基本信息') {
       item.children.map((val) => {
@@ -694,11 +691,12 @@ arr.forEach((val) => {
           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 {
@@ -745,8 +743,10 @@ arr.forEach((val) => {
         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,6 +760,7 @@ if (props.dataFrom) {
               // 通过;分割成数组
               child.note2 = item.attrValue.split(';')
               showKey.value++
+              // console.log('应用领域', item, item.attrValue.split(';'), child)
             }
           })
         })
@@ -770,16 +771,20 @@ if (props.dataFrom) {
   //显示富文本
   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) {
@@ -816,7 +821,7 @@ const add = (title, addFlag, type) => {
       if (!sfFlag) {
         data.value[title].push(obj)
       }
-
+      // console.log(data.value[title])
       mybus.emit('chageDataFrom', {
         attrType: title,
         attrValue: JSON.stringify(data.value[title]),
@@ -866,17 +871,24 @@ const del = (title, index) => {
     })
   }
   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 (item.note2.length !== 0 && changeField.value.indexOf('应用领域') == -1) {
+    if (
+      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', {
@@ -885,20 +897,6 @@ const ApplicationArea = (item, itemson) => {
       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)
@@ -919,6 +917,7 @@ const sourceClick = () => {
         queryApplicationRelByResourceId({
           referenceId: 0,
         }).then((res) => {
+          // console.log(res.data.data.notLinked)
           res.data.data.notLinked.forEach((val, index) => {
             mockData.value.push({
               key: val.id,
@@ -931,10 +930,13 @@ const sourceClick = () => {
         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,
@@ -959,6 +961,7 @@ const componentsClick = () => {
           type: '组件服务',
           referenceName: '',
         }).then((res) => {
+          // console.log(res.data.data.notLinked)
           res.data.data.notLinked.forEach((val, index) => {
             mockDataOther.value.push({
               key: val.id,
@@ -971,12 +974,15 @@ const componentsClick = () => {
         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,
@@ -992,22 +998,35 @@ const selectedKeys = ref([])
   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) => {
-const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {}
+    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
-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 + ''
@@ -1017,6 +1036,7 @@ const handleOk = (e) => {
     })
   }
   const handleCancel = (e) => {
+    console.log(e)
     visibleAssociatedApplicationOther.value = false
     visibleAssociatedApplication.value = false
   }
@@ -1024,11 +1044,14 @@ const handleCancel = (e) => {
   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
@@ -1046,7 +1069,7 @@ watch(data.value.list, (newProps, oldProps) => {
         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,
@@ -1056,6 +1079,7 @@ watch(data.value.list, (newProps, oldProps) => {
       } else {
         if (val.name !== '应用领域' && val.name !== '发布端') {
           if (val.name == '算法介绍视频') {
+            console.log('变更视频==================>', val)
             mybus.emit('chageDataFrom', {
               attrType: val.name,
               attrValue: val.note1,
@@ -1079,13 +1103,22 @@ const applicationsChange = (value) => {
         item.note1 = value
       }
     })
+    console.log(`selected ${value}`)
   }
 
-const handleBlur = () => {}
+  const handleBlur = () => {
-const applicationsBlur = () => {}
+    console.log('blur')
+  }
+  const applicationsBlur = () => {
+    console.log('blur')
+  }
 
-const handleFocus = () => {}
+  const handleFocus = () => {
-const applicationsFocus = () => {}
+    console.log('focus')
+  }
+  const applicationsFocus = () => {
+    console.log('focus')
+  }
 
   const filterOption = (input, option) => {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -1099,56 +1132,13 @@ const applicationsOption = (input, option) => {
 </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 {
-  margin: 0.15rem 2rem;
+    height: 6.8rem;
-  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;
@@ -1165,13 +1155,12 @@ const applicationsOption = (input, option) => {
     }
 
     & > div {
-    padding: 0px 0px 24px 24px;
       width: 100%;
-    font-size: 14px;
+      margin-top: 0.6rem;
 
       .top {
         color: #333333;
-
+        font-size: 0.22rem;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -1190,7 +1179,7 @@ const applicationsOption = (input, option) => {
       }
 
       .bottom {
-      // margin-top: 0.25rem;
+        margin-top: 0.25rem;
 
         .items {
           background: #fafafa;
@@ -1284,86 +1273,32 @@ const applicationsOption = (input, option) => {
       margin-top: 0;
     }
   }
-.danxuan-Area {
-  display: grid;
-  margin-top: -0.05rem;
-  grid-template-columns: auto auto auto auto auto auto;
-  border-right: 1px #0558e1 solid;
-  .danxuan-Area-son {
-    cursor: pointer;
-    min-width: 80px;
-    height: 32px;
-    border-radius: 2px;
-    color: #0558e1;
-    background: #fff;
-    border-left: 1px #0558e1 solid;
-    border-bottom: 1px #0558e1 solid;
-    border-top: 1px #0558e1 solid;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .danxuan-Area-son:hover {
-    color: #fff;
-    background: #0558e1;
-  }
-
-
-  .danxuan-Area-down {
-    background: #0058e1;
-    color: #fff;
-    // border: 1px #0558e1 solid;
-  }
-}
 
   .application-Area {
+    width: 5.2rem;
     display: grid;
     margin-top: -0.05rem;
-  grid-template-columns: auto auto auto auto auto auto;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 
     .application-Area-son {
       cursor: pointer;
-    width: 162px;
+      font-size: 0.14rem;
-    height: 32px;
+      width: 0.9rem;
-    border-radius: 2px;
+      height: 0.26rem;
-    color: #212121;
+      border-radius: 0.13rem;
-    background: rgba(96, 99, 104, 0.1);
+      color: #333333;
-    border: 0.01rem rgba(96, 99, 104, 0.1) solid;
+      background: #f5f5f5;
+      border: 0.01rem #cccccc solid;
       display: flex;
       justify-content: center;
       align-items: center;
-    margin-top: 8px;
+      margin-top: 0.1rem;
-    margin-right: 8px;
+      font-weight: 500;
-    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 {
-    opacity: 0.9;
+      background: #0087ff;
-    color: #0058e1;
+      color: #fff;
-    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;
-    }
     }
   }
 
@@ -1462,52 +1397,22 @@ const applicationsOption = (input, option) => {
       width: unset;
     }
     .box {
-  
       display: flex;
       align-items: center;
-    min-height: 32px;
       // margin: 15px 0;
       & > div:nth-of-type(1) {
-      text-align: right;
+        width: 105px;
-      width: 110px;
+        display: flex;
-      margin-right: 16px;
-      // display: flex;
         align-items: center;
       }
       .required {
-      color: #e83e48;
+        color: #f56c6c;
-      margin-left: -6px;
+        margin-right: 3px;
-    }
-    
-  }
-
- :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: #e83e48;
+      color: #f56c6c;
       position: absolute;
       bottom: -20px;
       left: 110px;

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

@@ -1,5 +1,57 @@
 <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>
@@ -15,14 +67,12 @@
         <!-- <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">
@@ -42,19 +92,52 @@
               </div>
             </div>
           </div>
-         
           <div
-            class="ability-to-type"
+            class="component-type"
             v-if="abilityToTypeFunctionData == '组件服务'"
           >
             <div class="title">组件类型选择</div>
-            <div class="ability-to-type-content">
+            <div class="component-type-content">
-              <div
+              <!-- <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"
-                @click="componentTypeValueFunction(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"
+                :key="item"
+                @click="abilitySquareFunction(item)"
                 :class="
-                  componentTypeValue == item
+                  abilitySquareFunctionData == item
                     ? 'ability-to-type-down'
                     : ''
                 "
@@ -63,14 +146,8 @@
               </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>
@@ -99,7 +176,6 @@ let abilityToTypeFunctionData = ref('组件服务')
   function abilityToTypeFunction(item) {
     abilityToTypeFunctionData.value = item
   }
-
   let abilityToType = ref(['组件服务', '应用资源'])
   let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
   let componentType = ref([
@@ -121,7 +197,6 @@ const showAbilitySquare = () => {
   }
   let componentTypeValueOld = ref('')
   function componentTypeValueFunction(item) {
-  componentTypeValue.value = item
     if (componentTypeValueOld.value != item) {
       componentTypeValue.value = item
       componentTypeValueOld.value = item
@@ -197,7 +272,10 @@ function jumpPage() {
     // store.commit('WorkDynList', {
     //   selectCardsnum: '组件服务',
     // })
-  console.log('选中===================>', store.getters['home/selectCardsnum'])
+    console.log(
+      '选中===================>',
+      store.getters['home/selectCardsnum']
+    )
     // router.push({ path: '/DetailsPageconetent' })
     router.push({
       path: '/WorkDynList',
@@ -256,33 +334,7 @@ const applyResource = () => {
     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;
@@ -294,21 +346,17 @@ const applyResource = () => {
       background-position: center;
     }
     .ant-modal-content {
-    border-radius: 2px;
+      border-radius: 0.1rem;
-    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: 24px;
+        margin-top: 0.2rem;
-      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%;
@@ -317,7 +365,7 @@ const applyResource = () => {
           background: unset;
           .ant-radio-group {
             display: grid;
-          grid-template-columns: auto auto auto auto;
+            grid-template-columns: 1fr 1fr 1fr;
             grid-gap: 0.15rem;
           }
         }
@@ -326,26 +374,20 @@ const applyResource = () => {
       .ability-to-type {
         .ability-to-type-content {
           display: grid;
-        grid-template-columns: auto auto auto auto;
+          grid-template-columns: 1fr 1fr 1fr;
           height: unset;
           border: unset;
           background: unset;
-        margin-left: 20px;
           div {
-          &:hover {
+            margin-right: 0.15rem;
-    background: #0058e1;
             cursor: pointer;
-    color:#ffffff;
+            font-size: 0.14rem;
-  }
+            width: 0.9rem;
-          margin-right: 16px;
+            height: 0.26rem;
-          cursor: pointer;
+            border-radius: 0.13rem;
-          font-size: 16px;
+            color: #333333;
-          width: 90px;
+            background: #f5f5f5;
-          height: 32px;
+            border: 0.01rem #cccccc solid;
-          border-radius: 2px;
-          color: #0058e1;
-          background: #ffffff;
-          border: 1px #0058e1 solid;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -353,7 +395,7 @@ const applyResource = () => {
           }
 
           .ability-to-type-down {
-          background: #0058e1;
+            background: #0087ff;
             color: #fff;
           }
         }
@@ -363,25 +405,15 @@ const applyResource = () => {
     .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: 12px;
+        margin-right: 0.2rem;
-      border-radius: 2px;
+        border-radius: 0.08rem;
       }
     }