ztree分析图标着色；应用中心产品详情弹框初步搭建

hanbaoshan

2021-02-25 12e90cca31d377e28cfe5c6442509841991308e9

ztree分析图标着色；应用中心产品详情弹框初步搭建

 src/components/giantTree/zTree/ztree.vue

@@ -275,6 +275,9 @@
  padding: 5px;
  color: #333;
}
.ztree .iconfenxishexiangji{
  color: #3d68e1;
}
.ztree li {
  padding: 0;
  margin: 5px 0px;

 src/pages/ai/index/App.vue

@@ -176,7 +176,7 @@
                                <div>当前版本:{{item.version}}</div>

                                <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>

                              </div>

                              <div class="info-onmask">查看详情</div>

                              <div class="info-onmask" @click="checkDetail(item)">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  v-if="!item.isDefault"

@@ -443,7 +443,7 @@
                                <div>当前版本:{{item.version}}</div>

                                <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>

                              </div>

                              <div class="info-onmask">查看详情</div>

                              <div class="info-onmask" @click="checkDetail(item)">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  @click="unLoadSdk(item)"

@@ -499,7 +499,7 @@
                                <div>当前版本:{{item.version}}</div>

                                <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>

                              </div>

                              <div class="info-onmask">查看详情</div>

                              <div class="info-onmask" @click="checkDetail(item)">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  v-if="!item.isDefault"

@@ -595,57 +595,72 @@
        <el-button type="primary" @click="offlineInstall">安 装</el-button>

      </div>

    </el-dialog>

    <!-- <div class="draggable-box" v-if="productDetailShow" > -->

    <div class="draggable-box" v-if="false"  >

      <div class="box-top">

        <div class="top-left">

          <div class="banner">

            <!-- <el-carousel

              ref="carousel"

              :autoplay="false"

              indicator-position="none"

              :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'"

              @change="changeHandle"

            >

              <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index">

                <div class="imgwrap">

                  <img

                    v-if="item.type=='image'"

                    :src="'/httpImage/'+item.url"

                    class="cursor-pointer"

                    preview

                  />

                  <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video>

                </div>

              </el-carousel-item>

            </el-carousel> -->

          </div>

        </div>

        <div class="top-right">

          <div class="summary">

            <div class="icon"></div>

            <div class="name"></div>

            <!-- <div class="tags">

              <span

                class="tag"

                v-for="(id, index) in data.productLabelId"

                :key="index+'i'"

              >{{showNameById(id)}}</span>

            </div> -->

            <div class="btns">

              <el-button size="mini">升级</el-button>

              <el-button size="mini">卸载</el-button>

              <el-button size="mini">打开</el-button>

    <!-- <div class="dialog-content" v-if="productDetailVisible" > -->

    <el-dialog

      class="product-detail-dialog"

      :visible="productDetailVisible"

      @close="productDetailVisible=false"

    >

      <div class="dialog-title" slot="title">算法/应用详情</div>

      <div class="dialog-content">

        <div class="box-top">

          <div class="top-left">

            <div class="banner">

              <!-- <el-carousel

                ref="carousel"

                :autoplay="false"

                indicator-position="none"

                :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'"

                @change="changeHandle"

              >

                <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index">

                  <div class="imgwrap">

                    <img

                      v-if="item.type=='image'"

                      :src="'/httpImage/'+item.url"

                      class="cursor-pointer"

                      preview

                    />

                    <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video>

                  </div>

                </el-carousel-item>

              </el-carousel>-->

            </div>

          </div>

          <div class="product-intruduction">

            <div class="title">产品简介</div>

          <div class="top-right">

            <div class="summary">

              <div class="icon"></div>

              <div class="name"></div>

              <!-- <div class="tags">

                <span

                  class="tag"

                  v-for="(id, index) in curCheckTarget.productLabelId"

                  :key="index+'i'"

                >{{showNameById(id)}}</span>

              </div>-->

              <div class="btns">

                <el-button size="mini">升级</el-button>

                <el-button size="mini">卸载</el-button>

                <el-button size="mini">打开</el-button>

              </div>

            </div>

            <div class="product-intruduction">

              <div class="title">产品简介</div>

            </div>

          </div>

        </div>

        <div class="box-bot">

          <div class="bot-left">

            <div class="part-title">功能特点</div>



          </div>

          <div class="bot-right">

            <div class="part-title">推荐算法</div>



          </div>

        </div>

      </div>

      <div class="box-bot"></div>

    </div>

    </el-dialog>

  </div>

</template>

<script>

@@ -661,8 +676,8 @@
    FileUploader

  },

  computed: {

    updateNum(){

      return this.hasNewVersionApp.length+this.hasNewVersionSdk.length

    updateNum () {

      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length

    },

    // notInstalledList () {

    //   return this.sdkList.filter(sdk => {

@@ -701,7 +716,6 @@
      sdkList: [],

      installedList: [],

      hasNewVersionSdk: [],

      updateNum: 0,

      hasNewVersionApp: [],

      notInstalledList: [],

      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],

@@ -742,7 +756,7 @@
      sdkUpgreading: true,

      autoRefresh: true,

      curCheckTarget: {},

      productDetailShow: false,

      productDetailVisible: false,

    }

  },

  directives: {

@@ -766,20 +780,21 @@
    isShow (authority) {

      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1

    },

    batchUpdate(type){

      if(type=="sdk"){

        this.hasNewVersionSdk.forEach(sdk=>{

    batchUpdate (type) {

      if (type == "sdk") {

        this.hasNewVersionSdk.forEach(sdk => {

          this.donwload(sdk)

        })

      }else{

        this.hasNewVersionApp.forEach(app=>{

          this.downloadApp(app,'upgrade')

      } else {

        this.hasNewVersionApp.forEach(app => {

          this.downloadApp(app, 'upgrade')

        })

      }

    },

    checkDetail (item) {

      this.curCheckTarget = item;

      this.productDetailShow = true;

      debugger

      this.productDetailVisible = true;

    },

    //离线安装

    offlineInstall () {

@@ -1158,23 +1173,24 @@
    width: 100%;

    height: 100%;

  }

  .product-detail-dialog {

    .el-dialog__header {

      text-align: center;

    }

    .dialog-content{

      .box-top {

      }

      .box-bot {

      }

    }

  }

}

.flex-title{

.flex-title {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.draggable-box{

  width: 1000px;

  height: 600px;

  background: aqua;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}



.el-loading-mask .el-loading-spinner {

  top: 40px !important;

}