ソースを参照

提交素材池代码

朱鑫波 4 年 前
コミット
9a10c443a2

+ 203 - 0
src/views/modules/autoLaunch/material-all/material-detail.vue

@@ -0,0 +1,203 @@
+<style lang="scss" scoped>
+#office-iframe {
+    height: 800px;
+}
+</style>
+<style>
+.info-detail .ant-descriptions-item-content {
+    font-weight: bold;
+}
+.info-detail .ant-descriptions-item-label {
+    color: darkgray;
+    min-width: 80px;
+}
+.info-detail table tr td {
+    border: 0;
+}
+.show-data p {
+    color: black;
+    font-weight: 600;
+}
+.show-data p span {
+    display: inline-block;
+    width: 85px;
+    color: slategrey;
+    font-weight: 500;
+}
+</style>
+<template>
+    <a-row :gutter="10">
+        <a-spin :spinning="spinning">
+            <a-col :sm="6" style="margin-bottom: 20px; z-index: 10">
+                <a-card
+                style="min-height: 100px"
+                :style="{
+                    width: (clientWidth / 24) * 6 - 10 + 'px',
+                }"
+                >
+                    <video class="video" :src="url" controls="controls" style="width: 100%" v-if="url">
+                        您的浏览器不支持 video 标签。
+                    </video>
+                    <img :src="noImg" alt="" v-else style="width: 100%" />
+                </a-card>
+            </a-col>
+            <a-col :sm="18" style="margin-bottom: 20px; z-index: 10">
+                <a-card class="info-detail" style="min-height: 200px">
+                    <a-descriptions title="视频信息" v-if="materialInfo">
+                        <a-descriptions-item label="素材标题">
+                        {{ materialInfo.photoName ? materialInfo.photoName : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材唯一编码">
+                        {{ materialInfo.signature ? materialInfo.signature : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材状态">
+                        {{ materialInfo.status == 0 ? '可用' : '删除' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材渠道">
+                        {{
+                            materialInfo.channelType == 0 ? '内部' : '素造'
+                        }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="上传时间">
+                        <span v-if="materialInfo.createTime">
+                            {{ materialInfo.createTime }}
+                        </span>
+                        <span v-else>-</span>
+                        </a-descriptions-item>
+                        <a-descriptions-item label="同步时间">
+                        {{ materialInfo.statDate ? materialInfo.statDate : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="编导">
+                        {{ materialInfo.planName ? (materialInfo.planName == '' ? '无' : materialInfo.planName) : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="拍摄">
+                        {{ materialInfo.shotName ? (materialInfo.shotName == '' ? '无' : materialInfo.shotName) : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="剪辑">
+                        {{ materialInfo.clipName ? (materialInfo.clipName == '' ? '无' : materialInfo.clipName) : '-' }}
+                        </a-descriptions-item>
+                    </a-descriptions>
+                </a-card>
+                <a-card style="min-height: 300px; margin: 10px 0" class="info-detail">
+                     <a-descriptions title="素材排期和定向">
+                        <a-descriptions-item  :span="3">
+                            <span slot="label">
+                                <a-tooltip title="当前素材仅可在设置日期内进行投放,其他时段不会投放此素材">
+                                    <a-icon type="info-circle-o" />
+                                </a-tooltip>
+                                可用日期
+                            </span>
+                            <a @click="selectTime">请选择</a>
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材唯一编码">
+                        {{ materialInfo.signature ? materialInfo.signature : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材状态">
+                        {{ materialInfo.status == 0 ? '可用' : '删除' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="素材渠道">
+                        {{
+                            materialInfo.channelType == 0 ? '内部' : '素造'
+                        }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="上传时间">
+                        <span v-if="materialInfo.createTime">
+                            {{ materialInfo.createTime }}
+                        </span>
+                        <span v-else>-</span>
+                        </a-descriptions-item>
+                        <a-descriptions-item label="同步时间">
+                        {{ materialInfo.statDate ? materialInfo.statDate : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="编导">
+                        {{ materialInfo.planName ? (materialInfo.planName == '' ? '无' : materialInfo.planName) : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="拍摄">
+                        {{ materialInfo.shotName ? (materialInfo.shotName == '' ? '无' : materialInfo.shotName) : '-' }}
+                        </a-descriptions-item>
+                        <a-descriptions-item label="剪辑">
+                        {{ materialInfo.clipName ? (materialInfo.clipName == '' ? '无' : materialInfo.clipName) : '-' }}
+                        </a-descriptions-item>
+                    </a-descriptions>
+                </a-card>
+                <a-card style="min-height: 300px; margin: 10px 0">
+                    
+                </a-card>
+            </a-col>
+        </a-spin>
+    </a-row>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import moment from 'moment'
+import $ from 'jquery'
+import qs from 'qs'
+import UploadToAli from '@femessage/upload-to-ali'
+import uploadFile from '@/components/uploadFile.vue'
+import { mapActions, mapGetters, mapState } from 'vuex'
+var echarts = require('echarts')
+export default {
+  name: 'online-training-list',
+  data() {
+    return {
+      noImg: require('@/assets/noImg.png'),
+      materialInfo: null,
+      dataView: null,
+      clientWidth: 1920,
+      spinning: false,
+      scrollTopAll: 0,
+      scrollTop: 124,
+      mediaId: 0,
+      url: JSON.parse(localStorage.getItem('materialDetail')).url
+    }
+  },
+  components: {
+    UploadToAli,
+    uploadFile,
+  },
+  watch: {
+  },
+  methods: {
+    getMaterialInfo() {
+        var data = JSON.parse(localStorage.getItem('materialDetail'))
+        this.spinning = true
+        var params = {
+            signature: data.md5,
+        }
+        this.getAction('/kuaishouProjectVideoGet/getVideoDetails', params).then((res) => {
+            if (res.success) {
+                if (res.result) {
+                    this.materialInfo = res.result;
+                    this.spinning = false;
+                } 
+                else {
+                // this.$error({
+                //   title: '页面数据加载出错',
+                //   content: '该视频未上传公司素材库,请重新上传之后,可展示视频信息',
+                // })
+                }
+            }
+        })
+    },
+    handleScroll() {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        this.scrollTop = scrollTop
+    },
+    selectTime() {
+
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+    //   this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
+      window.addEventListener('scroll', this.handleScroll)
+      this.clientWidth = document.documentElement.clientWidth - 224
+      //   this.$route.query.mediaId
+      //   this.$route.query.md5
+      this.getMaterialInfo()
+    })
+  },
+  created() {},
+}
+</script>

+ 42 - 5
src/views/modules/autoLaunch/material-all/material.less

@@ -2,7 +2,7 @@
     // background: #fff;
     // height: calc(100vh - 137px);
     // padding: 20px;
-    overflow-y: auto;
+    overflow: hidden;
     .middle-button {
         margin: 0 8px;
     }
@@ -109,7 +109,14 @@
         line-height: inherit;
     }
 }
-
+.material-total {
+    width: 100%;
+    min-height:100px;
+    margin-top:15px;
+    /deep/ .ant-card-body {
+        padding: 0;
+    }
+}
 .material-main {
     width: 100%;
     min-height:300px;
@@ -122,7 +129,6 @@
         flex-wrap: wrap;
         margin-left: 25px;
         min-height: 300px;
-      
         .home-right {
             width: 100%;
         }
@@ -141,10 +147,41 @@
     }
     .home-item {
         overflow: hidden;
+        position: relative;
         img {
             width: 100%;
             height: auto;
         }
+        .bottom-details {
+            width: 100%;
+            height: 35%;
+            background: rgba(0, 0, 0, .7);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 10;
+            padding: 10px;
+            .bottom-title {
+                display: flex;
+                justify-content: space-between;
+            }
+            h3 {
+                color: whitesmoke;
+                line-height: 25px;
+                width: 60%;
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //溢出用省略号显示
+                white-space: nowrap; //溢出不换行  
+            }
+            p {
+                color: whitesmoke;
+                line-height: 1;
+                width: 100%;
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //溢出用省略号显示
+                white-space: nowrap; //溢出不换行
+            }
+        }
     }
       
     @media only screen and (min-width: 1200px) {
@@ -152,7 +189,7 @@
             border-style: solid;
             border-width: 1px;
             border-color: #e4e4e4;
-            width: calc(50% - 50px);
+            width: calc(25% - 50px);
             padding: 10px;
             margin-right: 50px;
             margin-bottom: 10px;
@@ -164,7 +201,7 @@
         }
     }
       
-    @media only screen and (min-width: 1250px) {
+    @media only screen and (min-width: 1530px) {
         .home-item {
             border-style: solid;
             border-width: 1px;

+ 123 - 7
src/views/modules/autoLaunch/material-all/material.vue

@@ -22,10 +22,11 @@
                     <a-col :md="8" :sm="8" :xxl="6">
                         <a-form-item label="素材状态">
                             <a-select
-                                v-decorator="['status']"
+                                v-decorator="['status',{initialValue:''}]"
                                 placeholder="请选择"
                                 allow-clear
                             >
+                                <a-select-option :value="''">不限</a-select-option>
                                 <a-select-option :value="0">可用</a-select-option>
                                 <a-select-option :value="1">删除</a-select-option>
                             </a-select>
@@ -35,10 +36,11 @@
                     <a-col :md="8" :sm="8" :xxl="6">
                         <a-form-item label="素材渠道">
                             <a-select
-                                v-decorator="['channelType']"
+                                v-decorator="['channelType',{initialValue:''}]"
                                 placeholder="请选择"
                                 allow-clear
                             >
+                                <a-select-option :value="''">不限</a-select-option>
                                 <a-select-option :value="0">自产</a-select-option>
                                 <a-select-option :value="1">素造</a-select-option>
                             </a-select>
@@ -55,13 +57,78 @@
             </a-form>
         </div>
     </a-card>
+    <a-row :gutter="24" class="material-total" v-if="totalData">
+        <a-col :sm="24" :md="12" :xl="6">
+            <chart-card title="素材总数" :total="totalData.total + ''">
+                <a-tooltip title="此项目的素材总数" slot="action">
+                    <a-icon type="info-circle-o" />
+                </a-tooltip>
+                <!-- <div slot="percentage">
+                    <trend :flag="costLink > 0 ? 'up' : 'down'">
+                        <span slot="term">环比</span>
+                        {{ (costLink * 100).toFixed(2) }}%
+                    </trend>
+                </div> -->
+            </chart-card>
+        </a-col>
+        <a-col :sm="24" :md="12" :xl="6">
+            <chart-card title="在投素材数" :total="totalData.validCount + ''">
+                <a-tooltip title="此项目的在投素材数总数" slot="action">
+                    <a-icon type="info-circle-o" />
+                </a-tooltip>
+                <div slot="percentage">
+                    <trend :flag="totalData.validCount >= totalData.yesterdayValidCount > 0 ? 'up' : 'down'">
+                        <!-- <span slot="term">环比</span> -->
+                        {{ totalData.validCount - totalData.yesterdayValidCount === 0 ? '0' : ((totalData.validCount - totalData.yesterdayValidCount)/totalData.yesterdayValidCount).toFixed(2) }}%
+                    </trend>
+                </div>
+                
+            </chart-card>
+        </a-col>
+        <a-col :sm="24" :md="12" :xl="6">
+            <chart-card title="今日同步素材数" :total="totalData.todayUpCount + ''">
+                <a-tooltip title="此项目今日同步素材数" slot="action">
+                    <a-icon type="info-circle-o" />
+                </a-tooltip>
 
+                <div slot="percentage">
+                    <trend :flag="totalData.todayUpCount >= totalData.yesterdayUpCount > 0 ? 'up' : 'down'">
+                        <!-- <span slot="term">环比</span> -->
+                        {{ totalData.todayUpCount - totalData.yesterdayUpCount === 0 ? '0' : ((totalData.todayUpCount - totalData.yesterdayUpCount)/totalData.yesterdayUpCount).toFixed(2) }}%
+                    </trend>
+                </div>
+            </chart-card>
+        </a-col>
+        <a-col :sm="24" :md="12" :xl="6">
+            <chart-card title="近一周同步素材数" :total="totalData.thisWeekCount + ''">
+                <a-tooltip title="此项目近一周同步素材数" slot="action">
+                    <a-icon type="info-circle-o" />
+                </a-tooltip>
+                <div slot="percentage">
+                    <trend :flag="totalData.thisWeekCount >= totalData.lastWeekCount > 0 ? 'up' : 'down'">
+                        <!-- <span slot="term">环比</span> -->
+                        {{ totalData.thisWeekCount - totalData.lastWeekCount === 0 ? '0' : ((totalData.thisWeekCount - totalData.lastWeekCount)/totalData.lastWeekCount).toFixed(2) }}%
+                    </trend>
+                </div>
+            </chart-card>
+        </a-col>
+    </a-row>
     <a-card  class="material-main">
         <a-spin :spinning="spinning">
             <div v-if="dataSource.length > 0">
                 <div  class="home-card">
-                    <div class="home-item" v-for="(items, index) in dataSource" :key="index" >
+                    <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="lookView(items)">
                         <img :src="items.coverUrl" alt="">
+                        <div class="bottom-details">
+                            <div class="bottom-title">
+                                <h3>{{ items.photoName ? items.photoName : '-' }}</h3>
+                                <a @click.stop="lowerMaterial(items)">下架素材</a>
+                            </div>
+                            <p>素材来源:{{ items.channelType === 0 ? '自产' : '素造' }}</p>
+                            <p>上传日期:{{ items.statDate }}</p>
+                            <p>素材状态:{{ items.status === 0 ? '可用' : '删除' }}</p>
+                            <p></p>
+                        </div>
                     </div>
                 </div>
            
@@ -77,23 +144,35 @@
                 @change="getDataSource"
                 />
             </div>
-            <div v-else class="home-card">
-
+            <div v-else class="home-card" style="justify-content: center;align-items: center;">
+                <a-empty />
             </div>
         </a-spin>
     </a-card>
+    <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
+        <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
+            您的浏览器不支持 video 标签。
+        </video>
+    </a-modal>
   </div>
 </template>
 
 <script>
-import moment from 'moment'
+import moment from 'moment';
 import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
+import ChartCard from '@/components/ChartCard';
+import Trend from '@/components/Trend';
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
 export default {
     components: {
-        selectTable
+        selectTable,
+        ChartCard,
+        Trend
     },
     data() {
         return {
+            visibleVideo: false,
+            videoUrlShow: null,
             spinning: false,
             form: this.$form.createForm(this),
             projectId: '',
@@ -118,9 +197,29 @@ export default {
                     this.handleGetTableList({})
                 }
             },
+            totalData: null
         }
     },
+    watch: {
+        visibleVideo(n, o) {
+            if (!n) {
+                closeAllVideoFun()
+            }
+        },
+    },
     methods: {
+        lowerMaterial(item) {
+
+        },
+        lookView(item) {
+            // this.visibleVideo = true
+            // this.videoUrlShow = item.url
+            var params = { md5: item.signature, url:item.url }
+            localStorage.setItem('materialDetail', JSON.stringify(params))
+            this.$router.push({
+                path: '/autoLaunch/material-all/material-detail',
+            })
+        },
         getDataSource(current, pageSize) {
             // 切换分页时的回调,
             // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
@@ -133,8 +232,10 @@ export default {
             event.preventDefault();
             const paramsData = this.form.getFieldsValue();
             this.handleGetTableList(paramsData);
+            this.getVideoTotalNumber();
         },
         handleResetForm() {
+            this.totalData = null;
             this.ipagination.current = 1;
             this.form.resetFields();
             this.projectId = undefined;
@@ -171,6 +272,21 @@ export default {
                 console.log(error, 'eeee');
             });
         },
+        getVideoTotalNumber() {
+            if(this.projectId !== '') {
+                let params = {};
+                params.projectId = this.projectId;
+                this.getAction('/kuaishouProjectVideoGet/getVideoTotalNumber', params).then(res => {
+                    if(res.success) {
+                        this.totalData = res.result;
+                    }
+                    else {
+                        this.totalData = null;
+                    }
+                })
+            }
+            
+        }
     },
     mounted() {
         this.handleGetTableList({});

+ 1 - 1
src/views/user/Login.vue

@@ -239,7 +239,7 @@
           id: 'wx_reg',
           appid: 'ww24b8a47826f5875f',
           agentid: '1000002',
-          redirect_uri: 'http://callback.c-top.com.cn/jeecg-boot/qywexin',
+          redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
           state: url + '/user/transfer-local',
           href: ''
         })

+ 2 - 2
vue.config.js

@@ -69,7 +69,7 @@ module.exports = {
     proxy: {
       '/jeecg-boot': {
           // target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-          // target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+          target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.62:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.6.162:9806', //请求本地 需要jeecg-boot后台项目  祚云
@@ -77,7 +77,7 @@ module.exports = {
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        target: 'http://192.168.1.219:8081', //请求本地 需要jeecg-boot后台项目  赵西安
+        // target: 'http://192.168.1.219:8081', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
         //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目