excellentMaterial.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116
  1. <style>
  2. #material-card .ant-tabs-tab {
  3. border: 1px solid gainsboro !important;
  4. }
  5. #material-card .ant-tabs-top-bar {
  6. position: relative;
  7. z-index: 100;
  8. }
  9. #material-card .ant-badge-count {
  10. top: 0px;
  11. }
  12. .detail .ant-form-item {
  13. margin-bottom: 10px !important;
  14. }
  15. .add-image-material .draggable-list {
  16. display: block !important;
  17. }
  18. </style>
  19. <style lang="scss" scoped>
  20. .home-item {
  21. overflow: hidden;
  22. }
  23. @media (min-width: 1024px) {
  24. .home-item {
  25. border-style: solid;
  26. border-width: 1px;
  27. border-color: #e4e4e4;
  28. width: calc(50% - 10px);
  29. padding: 10px;
  30. margin-right: 10px;
  31. margin-bottom: 10px;
  32. display: flex;
  33. align-items: center;
  34. background: #fff;
  35. position: relative;
  36. z-index: 99;
  37. }
  38. }
  39. /*>=1024的设备*/
  40. // @media (min-width: 1100px) {
  41. // .checkbox_item_container {
  42. // width:70%
  43. // }
  44. // } /*>=1100的设备*/
  45. @media (min-width: 1280px) {
  46. .home-item {
  47. border-style: solid;
  48. border-width: 1px;
  49. border-color: #e4e4e4;
  50. width: calc(25% - 10px);
  51. padding: 10px;
  52. margin-right: 10px;
  53. margin-bottom: 10px;
  54. display: flex;
  55. align-items: center;
  56. background: #fff;
  57. position: relative;
  58. z-index: 99;
  59. }
  60. }
  61. /*>=1280的设备*/
  62. // @media (min-width: 1366px) {
  63. // }
  64. // @media (min-width: 1440px) {
  65. // }
  66. // @media (min-width: 1680px) {
  67. // }
  68. @media (min-width: 1920px) {
  69. .home-item {
  70. border-style: solid;
  71. border-width: 1px;
  72. border-color: #e4e4e4;
  73. width: calc(25% - 10px);
  74. padding: 10px;
  75. margin-right: 10px;
  76. margin-bottom: 10px;
  77. display: flex;
  78. align-items: center;
  79. background: #fff;
  80. position: relative;
  81. z-index: 99;
  82. cursor: pointer;
  83. }
  84. }
  85. .actor-photo-list {
  86. display: flex;
  87. padding-left: 0;
  88. li {
  89. width: 25%;
  90. margin: 10px;
  91. position: relative;
  92. height: 250px;
  93. border: 1px solid #f2f2f2;
  94. img,
  95. video {
  96. width: 100%;
  97. margin-top: auto;
  98. margin-bottom: auto;
  99. top: 0;
  100. bottom: 0;
  101. position: absolute;
  102. max-height: 250px;
  103. }
  104. }
  105. }
  106. .home-card {
  107. width: 100%;
  108. overflow: hidden;
  109. padding: 10px 0px;
  110. display: flex;
  111. flex-wrap: wrap;
  112. margin-right: -10px;
  113. .home-right {
  114. width: 100%;
  115. }
  116. .bg:after {
  117. content: '';
  118. width: 110%;
  119. height: 110%;
  120. position: absolute;
  121. left: -5%;
  122. top: -5%;
  123. background: inherit;
  124. filter: blur(10px);
  125. z-index: 2;
  126. }
  127. }
  128. .bh {
  129. height: 60px;
  130. line-height: 30px;
  131. overflow: hidden;
  132. text-overflow: ellipsis;
  133. -webkit-line-clamp: 2;
  134. display: -webkit-box;
  135. -webkit-box-orient: vertical;
  136. }
  137. a {
  138. font-size: 14px;
  139. }
  140. </style>
  141. <template>
  142. <a-card :bordered="false">
  143. <div class="table-page-search-wrapper">
  144. <a-form layout="inline">
  145. <a-row :gutter="24">
  146. <a-col :md="8" :sm="8">
  147. <!-- <a-form-item label="项目名称"> -->
  148. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  149. </a-col>
  150. <a-col :md="8" :sm="8">
  151. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  152. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  153. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  154. </span>
  155. </a-col>
  156. </a-row>
  157. </a-form>
  158. </div>
  159. <a-tabs @change="callbackTwo" v-model="active" id="material-card" type="card">
  160. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  161. <div v-if="dataSource.length > 0">
  162. <a-button @click="onCheckAllChange">{{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}</a-button>
  163. <!-- 同步项目选择:
  164. <a-select showSearch v-model="projectId" placeholder="选择项目" style="width: 500px" optionFilterProp="children"
  165. :filterOption="filterOption" allowClear>
  166. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  167. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  168. item.mediaId == '1' ? '头条' : '快手'
  169. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  170. </a-select-option>
  171. </a-select> -->
  172. <a-button :disabled="checkArr.length == 0" v-if="queryParam.projectId " @click="tongbu">一键同步</a-button>
  173. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  174. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  175. <span v-if="items.excellent == 0"></span>
  176. <span v-else
  177. style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000">优秀素材</span>
  178. <div class="home-right">
  179. <a-badge :count="checkArr.indexOf(items.url) > -1 ? checkArr.indexOf(items.url) + 1 : 0"
  180. :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%;display:flex" @click.stop>
  181. <span
  182. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
  183. {{ items.materialName }}
  184. </span>
  185. <a-icon type="close-circle" @click="deleteData(items.id)" v-show="active == '0'"
  186. v-if="items.userId == userInfo().id" />
  187. </a-badge>
  188. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
  189. <div class="home-num bg" v-if="activeKey == 'image'" :style="{
  190. backgroundImage: 'url(' + items.url + ')',
  191. backgroundSize: 'cover',
  192. backgroundRepeat: 'no-repeat',
  193. backgroundPosition: 'center center',
  194. overflow: 'hidden',
  195. position: 'relative',
  196. width: '100%',
  197. height: '100%'
  198. }"></div>
  199. <img v-if="active == 'IMAGE'" :src="items.url"
  200. style="height:200px;max-width:100%;position:absolute;z-index:10;" />
  201. <img v-else :src="items.coverUrl" alt=""
  202. style="height:200px;max-width:100%;position:absolute;z-index:10;" />
  203. </div>
  204. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  205. {{ items.createTime | getDate }}
  206. <a-checkbox :value="items.url" style="float:right"></a-checkbox>
  207. </span>
  208. </div>
  209. </div>
  210. </a-checkbox-group>
  211. <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
  212. showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total"
  213. v-model="ipagination.current" @change="getDataSource" />
  214. </div>
  215. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  216. <img
  217. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  218. alt="" />
  219. </div>
  220. </a-tab-pane>
  221. </a-tabs>
  222. <a-modal title="素材详情" v-model="visibleDetail" width="70%">
  223. <div style="width:100%">
  224. <a-button type="primary" @click="setSuccess" style="float:right">
  225. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  226. </a-button>
  227. </div>
  228. <div style="display:flex;height:700px">
  229. <div
  230. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
  231. <img :src="showUrl" alt="" v-if="active == 'IMAGE'" style="height:100%" />
  232. <video class="video" :src="showUrl" controls="controls" style="width:100%" v-else>
  233. 您的浏览器不支持 video 标签。
  234. </video>
  235. </div>
  236. <div style="flex:3;padding:10px;box-sizing:border-box;">
  237. <a-form v-if="detail" class="detail">
  238. <div v-if="detail.parameter">
  239. <a-form-item label="视频时长" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  240. v-if="detail.parameter.second">
  241. {{ detail.parameter.second }}秒
  242. </a-form-item>
  243. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  244. v-if="detail.parameter.width">
  245. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  246. </a-form-item>
  247. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
  248. {{ detail.parameter.size }}
  249. </a-form-item>
  250. </div>
  251. <div v-if="detail.ascription">
  252. <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  253. {{ detail.ascription.planName }}
  254. </a-form-item>
  255. <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  256. {{ detail.ascription.shotName }}
  257. </a-form-item>
  258. <a-form-item label="剪辑" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  259. v-if="detail.ascription.clipName">
  260. {{ detail.ascription.clipName }}
  261. </a-form-item>
  262. <a-form-item label="平面" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  263. v-if="detail.ascription.planeName">
  264. {{ detail.ascription.planeName }}
  265. </a-form-item>
  266. </div>
  267. <div v-if="detail.parameter">
  268. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  269. v-if="detail.parameter.width">
  270. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  271. </a-form-item>
  272. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
  273. {{ detail.parameter.size }}
  274. </a-form-item>
  275. </div>
  276. <div class="downLoad" v-if="active=='VIDEO'">
  277. <a-form-item label="生成水印素材" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  278. <a-select :defaultValue="4" v-model="size" style="width:70%">
  279. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  280. item.name
  281. }}</a-select-option>
  282. </a-select>
  283. <a-button type="primary" @click="getWater">生成</a-button>
  284. </a-form-item>
  285. </div>
  286. <div v-if="showUrlWater">
  287. <a-form-item label="水印素材链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  288. <a-input v-model="showUrlWater" type="text" readonly />
  289. </a-form-item>
  290. </div>
  291. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  292. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  293. </a-form-item>
  294. <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
  295. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  296. </a-form-item>
  297. </a-form>
  298. </div>
  299. </div>
  300. </a-modal>
  301. <account-check ref="check" @synchro="implement"></account-check>
  302. </a-card>
  303. </template>
  304. <script>
  305. import {
  306. JeecgListMixin
  307. } from '@/mixins/JeecgListMixin'
  308. import JEllipsis from '@/components/jeecg/JEllipsis'
  309. import UploadToAli from '@femessage/upload-to-ali'
  310. import {
  311. fileCheck,
  312. fileInsert,
  313. fileEdit
  314. } from '@/api/actor'
  315. import {
  316. getAction,
  317. postAction,
  318. postFile,
  319. downFile,
  320. downFilePost,
  321. deleteAction
  322. } from '@/api/manage'
  323. import {
  324. mapGetters
  325. } from 'vuex'
  326. import moment from 'moment'
  327. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  328. import {
  329. stopOtherVideo,
  330. closeAllVideoFun
  331. } from '@/utils/videoControl'
  332. import BMF from 'browser-md5-file'
  333. import qs from 'qs'
  334. import accountCheck from './accountCheck'
  335. export default {
  336. name: 'YardList',
  337. mixins: [JeecgListMixin],
  338. components: {
  339. JEllipsis,
  340. UploadToAli,
  341. accountCheck,
  342. selectTable
  343. },
  344. data() {
  345. return {
  346. inputVisible: false,
  347. projectId: undefined,
  348. inputValue: '',
  349. labelCol: {
  350. xs: {
  351. span: 24
  352. },
  353. sm: {
  354. span: 5
  355. }
  356. },
  357. wrapperCol: {
  358. xs: {
  359. span: 24
  360. },
  361. sm: {
  362. span: 12
  363. }
  364. },
  365. noImgUrl: require('@/assets/img/noImg.png'),
  366. queryParam: {},
  367. dataElse: [],
  368. ascription: {
  369. clipId: [], //剪辑人id
  370. shotId: [], //拍摄人id
  371. planId: [], //策划id
  372. planeId: [] //平面id
  373. },
  374. show: true,
  375. visible: false,
  376. visibleDetail: false,
  377. activeKey: 'image',
  378. active: 'IMAGE',
  379. examinelList: [{
  380. value: 'IMAGE',
  381. tab: '优秀图片'
  382. },
  383. {
  384. value: 'VIDEO',
  385. tab: '优秀视频'
  386. }
  387. ],
  388. // 表头
  389. columns: [],
  390. urlList: {
  391. url: [],
  392. md5: [],
  393. name: []
  394. },
  395. imageArr: [],
  396. watermarkUrl: {
  397. url: '',
  398. md5: '',
  399. name: ''
  400. },
  401. url: {
  402. list: '/ctop/materialInfo/excellent/list'
  403. },
  404. detail: false,
  405. form: this.$form.createForm(this),
  406. tags: [],
  407. refuseFile: [],
  408. refuseReason: '',
  409. creativeCopywriter: '',
  410. customDomain: '',
  411. region: 'oss-cn-beijing',
  412. bucket: 'ctop-media',
  413. acceptVideo: 'video/mpeg,video/mp4',
  414. acceptImage: 'image/jpeg,image/jpg,image/png',
  415. accessKeyId: 'LTAIbNbqWzSOklQV',
  416. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  417. checkArr: [],
  418. checkAll: false,
  419. showUrl: '',
  420. showUrlWater: '',
  421. materialDescribe: '',
  422. name: '',
  423. detail: null,
  424. add: true,
  425. id: '',
  426. role: {
  427. roleCode: '',
  428. roleName: ''
  429. },
  430. key: '0',
  431. mediaId: null,
  432. repeat: false,
  433. noList: [],
  434. material: [],
  435. excellent: 0,
  436. code: '',
  437. sizeType: [],
  438. size: ""
  439. }
  440. },
  441. filters: {
  442. getDate(value) {
  443. let date = new Date(value)
  444. let y = date.getFullYear()
  445. let MM = date.getMonth() + 1
  446. MM = MM < 10 ? '0' + MM : MM
  447. let d = date.getDate()
  448. d = d < 10 ? '0' + d : d
  449. return y + '-' + MM + '-' + d
  450. }
  451. },
  452. computed: {
  453. dirImg() {
  454. let date = new Date()
  455. let y = date.getFullYear()
  456. let MM = date.getMonth() + 1
  457. MM = MM < 10 ? '0' + MM : MM
  458. let d = date.getDate()
  459. d = d < 10 ? '0' + d : d
  460. return 'image/' + y + '-' + MM + '-' + d + '/'
  461. },
  462. dirVideo() {
  463. let date = new Date()
  464. let y = date.getFullYear()
  465. let MM = date.getMonth() + 1
  466. MM = MM < 10 ? '0' + MM : MM
  467. let d = date.getDate()
  468. d = d < 10 ? '0' + d : d
  469. return 'video/' + y + '-' + MM + '-' + d + '/'
  470. }
  471. },
  472. created() {
  473. this.queryParam.type = 'IMAGE'
  474. // this.queryParam.userId = this.userInfo().id
  475. // this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  476. // this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  477. // this.queryParam.status = key
  478. this.ipagination.pageSize = 8
  479. this.getParticipateList()
  480. // // /sys/user/getRoleInfo
  481. // getAction('/sys/user/getRoleInfo', {
  482. // userId: this.userInfo().id
  483. // }).then(res => {
  484. // this.role = res
  485. // })
  486. getAction('/ctop/videoWatermarkTemplate/list').then(res => {
  487. if (res.success) {
  488. this.sizeType = res.result.records
  489. }
  490. })
  491. },
  492. watch: {
  493. 'queryParam.projectId': function (n, o) {
  494. if (n != '') {
  495. this.getList(n)
  496. }
  497. }
  498. },
  499. methods: {
  500. getWater() {
  501. var params = qs.stringify({
  502. id: this.id,
  503. watermarkTemplateId: this.size
  504. })
  505. postAction('/ctop/materialInfo/watermark', params).then(res => {
  506. if (res.success) {
  507. // getAction("/ctop/videoWatermarkTask/list").then(res=>{
  508. // console.log(res)
  509. // })
  510. this.$message.success('水印素材生成中,请一分钟后刷新')
  511. this.visibleDetail = false
  512. this.refuseFile = []
  513. this.refuseReason = ''
  514. closeAllVideoFun()
  515. this.loadData()
  516. }
  517. })
  518. },
  519. setSuccess() {
  520. var params = {}
  521. params.id = this.code
  522. params.excellent = this.excellent == 1 ? 0 : 1
  523. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  524. if (res.success) {
  525. this.excellent = this.excellent == 1 ? 0 : 1
  526. this.loadData(this.ipagination.current)
  527. }
  528. })
  529. },
  530. deleteData(id) {
  531. deleteAction('/ctop/materialInfo/delete', {
  532. id: id
  533. }).then(res => {
  534. if (res.success) {
  535. this.$message.success('删除成功')
  536. this.loadData()
  537. } else {
  538. this.$message.error(res.message)
  539. }
  540. })
  541. },
  542. moment,
  543. filterOption(input, option) {
  544. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  545. },
  546. a(item) {
  547. item.showVideo = true
  548. },
  549. tongbu() {
  550. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  551. userId: this.userInfo().id,
  552. projectId: this.queryParam.projectId
  553. })
  554. },
  555. implement(data) {
  556. var params = {}
  557. var dataJson = []
  558. for (let i = 0; i < this.dataSource.length; i++) {
  559. for (let j = 0; j < this.checkArr.length; j++) {
  560. if (this.dataSource[i].url == this.checkArr[j]) {
  561. dataJson.push(this.dataSource[i].id)
  562. }
  563. }
  564. }
  565. params.mediaId = this.mediaId
  566. params.materialArray = JSON.stringify(dataJson)
  567. params.accountArray = JSON.stringify(data)
  568. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  569. if (res.code == 0) {
  570. this.checkArr = []
  571. this.checkAll = false
  572. }
  573. })
  574. // /ctop/materialUpload/uploadAccount
  575. },
  576. downloadByBlob() {
  577. if (this.activeKey == 'image') {
  578. let image = new Image()
  579. image.setAttribute('crossOrigin', 'anonymous')
  580. image.src = this.showUrlWater
  581. image.onload = () => {
  582. let canvas = document.createElement('canvas')
  583. canvas.width = image.width
  584. canvas.height = image.height
  585. let ctx = canvas.getContext('2d')
  586. ctx.drawImage(image, 0, 0, image.width, image.height)
  587. canvas.toBlob(blob => {
  588. let url = URL.createObjectURL(blob)
  589. this.download(url, this.name)
  590. // 用完释放URL对象
  591. URL.revokeObjectURL(url)
  592. })
  593. }
  594. } else {
  595. fetch(this.showUrlWater)
  596. .then(res => res.blob())
  597. .then(blob => {
  598. const a = document.createElement('a')
  599. document.body.appendChild(a)
  600. a.style.display = 'none'
  601. // 使用获取到的blob对象创建的url
  602. const url = window.URL.createObjectURL(blob)
  603. a.href = url
  604. // 指定下载的文件名
  605. a.download = this.name
  606. a.click()
  607. document.body.removeChild(a)
  608. // 移除blob对象的url
  609. window.URL.revokeObjectURL(url)
  610. })
  611. }
  612. },
  613. download(href, name) {
  614. let eleLink = document.createElement('a')
  615. eleLink.download = name
  616. eleLink.href = href
  617. eleLink.click()
  618. eleLink.remove()
  619. },
  620. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  621. onCheckAllChange() {
  622. if (this.checkAll) {
  623. this.checkArr = []
  624. } else {
  625. var data = this.dataSource.map(item => {
  626. return item.url
  627. })
  628. this.checkArr.push(...data)
  629. }
  630. this.checkAll = !this.checkAll
  631. },
  632. searchRe() {
  633. this.queryParam.projectId = ''
  634. if (this.queryParam.createTime) {
  635. this.queryParam.createTime = ''
  636. }
  637. this.loadData()
  638. },
  639. getList(value) {
  640. if (value) {
  641. this.mediaId = this.dataElse.filter(item => {
  642. if (value == item.projectId) {
  643. return item
  644. }
  645. })[0].mediaId
  646. }
  647. console.log(this.mediaId)
  648. },
  649. onChangeCheck(checkedList) {
  650. if (checkedList.length == 0) {
  651. this.checkAll = false
  652. }
  653. },
  654. handleClose(removedTag) {
  655. const tags = this.tags.filter(tag => tag !== removedTag)
  656. this.tags = tags
  657. },
  658. showInput() {
  659. this.inputVisible = true
  660. this.$nextTick(function () {
  661. this.$refs.input.focus()
  662. })
  663. },
  664. handleInputChange(e) {
  665. this.inputValue = e.target.value
  666. },
  667. handleInputConfirm() {
  668. const inputValue = this.inputValue
  669. let tags = this.tags
  670. if (inputValue && tags.indexOf(inputValue) === -1) {
  671. tags = [...tags, inputValue]
  672. }
  673. Object.assign(this, {
  674. tags,
  675. inputVisible: false,
  676. inputValue: ''
  677. })
  678. },
  679. showDetail(item) {
  680. this.visibleDetail = true
  681. this.showUrl = item.url
  682. this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
  683. // this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
  684. this.id = item.id
  685. this.code = item.code
  686. this.excellent = item.excellent
  687. getAction('/ctop/materialInfo/getDetail', {
  688. materialId: item.id
  689. }).then(res => {
  690. this.detail = res
  691. this.size =
  692. res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ?
  693. 2 : 4
  694. })
  695. },
  696. okEditShow(item, editStatus) {
  697. if (editStatus == '2') {
  698. var params = {}
  699. params.id = item.id
  700. params.auditorId = this.userInfo().id
  701. params.refuseReason = this.refuseReason
  702. var data = this.refuseFile.map(item => {
  703. return 'https:' + item
  704. })
  705. params.refuseFile = JSON.stringify(data)
  706. params.status = editStatus
  707. fileEdit(params).then(res => {
  708. this.refuseFile = []
  709. this.refuseReason = ''
  710. this.loadData()
  711. })
  712. } else if (editStatus == '1') {
  713. var params = {}
  714. params.id = item.id
  715. params.auditorId = this.userInfo().id
  716. params.creativeCopywriter = this.refuseReason
  717. params.status = editStatus
  718. fileEdit(params).then(res => {
  719. this.refuseReason = ''
  720. this.loadData()
  721. })
  722. }
  723. },
  724. okEdit(e) {
  725. this.edit(null, this.active, '2')
  726. },
  727. edit(item, status, editStatus) {
  728. if (status == '0' || status == '1') {
  729. if (editStatus == '2') {
  730. var params = {}
  731. params.id = this.id
  732. params.auditorId = this.userInfo().id
  733. params.refuseReason = this.refuseReason
  734. var data = this.refuseFile.map(item => {
  735. return 'https:' + item
  736. })
  737. params.refuseFile = JSON.stringify(data)
  738. params.status = editStatus
  739. fileEdit(params).then(res => {
  740. this.refuseFile = []
  741. this.refuseReason = ''
  742. this.loadData()
  743. this.visibleDetail = false
  744. })
  745. } else {
  746. fileEdit({
  747. id: this.id,
  748. status: editStatus,
  749. auditorId: this.userInfo().id
  750. }).then(res => {
  751. this.refuseFile = []
  752. this.refuseReason = ''
  753. this.loadData()
  754. this.visibleDetail = false
  755. })
  756. }
  757. } else {
  758. this.add = false
  759. this.visible = true
  760. this.getProjectId(item.projectId)
  761. getAction('/ctop/materialInfo/getDetail', {
  762. materialId: item.id
  763. }).then(res => {
  764. if (this.activeKey == 'image') {
  765. this.form.setFieldsValue({
  766. projectId: item.projectId,
  767. clipId: res.ascription.clipId,
  768. planeId: res.ascription.planeId,
  769. materialDescribe: item.materialDescribe
  770. })
  771. } else {
  772. this.form.setFieldsValue({
  773. projectId: item.projectId,
  774. clipId: res.ascription.clipId,
  775. planId: res.ascription.planId,
  776. shotId: res.ascription.shotId,
  777. materialDescribe: item.materialDescribe
  778. })
  779. }
  780. this.tags = res.tag
  781. this.urlList.url = item.url
  782. this.urlList.md5 = item.code
  783. this.urlList.name = item.materialName
  784. this.watermarkUrl.url = item.watermarkUrl
  785. this.watermarkUrl.md5 = item.watermarkCode
  786. this.watermarkUrl.name = item.watermarkMaterialName
  787. this.id = item.id
  788. })
  789. }
  790. },
  791. handleOk() {
  792. this.form.validateFieldsAndScroll((err, values) => {
  793. if (err) {
  794. // 这里做逻辑处理
  795. } else {
  796. var params = {}
  797. var roleCode = {}
  798. for (const key in this.role) {
  799. if (key == 'roleCode') {
  800. this.role[key] = this.role[key] + 'Id'
  801. roleCode[this.role[key]] = this.userInfo().id
  802. }
  803. }
  804. params.id = this.add ? null : this.id
  805. // params.code = this.urlList.md5
  806. params.url = this.add ? null : this.urlList.url[0]
  807. // params.materialName = this.urlList.name
  808. params.imageArr = this.add ? this.urlList.url : null
  809. // params.watermarkCode = this.watermarkUrl.md5
  810. // params.watermarkUrl = this.watermarkUrl.url
  811. // params.watermarkMaterialName = this.watermarkUrl.name
  812. params.userId = this.userInfo().id
  813. params.projectId = values.projectId
  814. params.materialDescribe = values.materialDescribe
  815. params.type = 'IMAGE'
  816. params.ascription =
  817. this.activeKey == 'image' ?
  818. roleCode : {
  819. planId: values.planId,
  820. shotId: values.shotId,
  821. clipId: values.clipId
  822. }
  823. params.tag = this.tags
  824. if (this.add) {
  825. fileInsert(params).then(res => {
  826. this.form.resetFields()
  827. this.urlList = {
  828. url: '',
  829. md5: '',
  830. name: ''
  831. }
  832. this.watermarkUrl = {
  833. url: '',
  834. md5: '',
  835. name: ''
  836. }
  837. this.tags = []
  838. this.loadData()
  839. this.visible = false
  840. this.add = true
  841. for (const key in this.role) {
  842. if (key == 'roleCode') {
  843. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  844. }
  845. }
  846. this.$message.success('素材上传成功')
  847. })
  848. } else {
  849. fileEdit({
  850. ...params,
  851. status: '0'
  852. }).then(res => {
  853. this.form.resetFields()
  854. this.urlList = {
  855. url: [],
  856. md5: '',
  857. name: ''
  858. }
  859. this.watermarkUrl = {
  860. url: '',
  861. md5: '',
  862. name: ''
  863. }
  864. this.tags = []
  865. this.loadData()
  866. this.visible = false
  867. this.add = true
  868. for (const key in this.role) {
  869. if (key == 'roleCode') {
  870. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  871. }
  872. }
  873. this.$message.success('素材修改成功')
  874. })
  875. }
  876. }
  877. })
  878. },
  879. close() {
  880. // this.form.resetFields()
  881. // this.urlList = { url: '', md5: '', name: '' }
  882. // this.watermarkUrl = { url: '', md5: '', name: '' }
  883. // this.tags = []
  884. },
  885. onChange(date, dateString) {},
  886. callbackTwo(key) {
  887. this.checkAll = false
  888. this.checkArr = []
  889. this.queryParam.type = key
  890. this.loadData()
  891. },
  892. overUpload(urlAll) {
  893. console.log(urlAll, this.urlList)
  894. // var index = this.urlList.url.findIndex(item => item === urlAll[0])
  895. // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
  896. // this.imageArr.push(data)
  897. // console.log(this.imageArr)
  898. var that = this
  899. var img = null
  900. img = new Image()
  901. that.material = []
  902. for (let i = 0; i < this.urlList.url.length; i++) {
  903. img.src = this.urlList.url[i]
  904. if (img.complete) {
  905. // 打印
  906. if (img.width == 720) {
  907. if (img.height == 1280) {
  908. that.material.push(true)
  909. } else {
  910. that.material.push(false)
  911. }
  912. } else if (img.width == 1080) {
  913. if (img.height == 1920) {
  914. that.material.push(true)
  915. } else {
  916. that.material.push(false)
  917. }
  918. } else if (img.width == 1280) {
  919. if (img.height == 720) {
  920. that.material.push(true)
  921. } else {
  922. that.material.push(false)
  923. }
  924. } else if (img.width == 1920) {
  925. if (img.height == 1080) {
  926. that.material.push(true)
  927. } else {
  928. that.material.push(false)
  929. }
  930. } else {
  931. that.material.push(false)
  932. }
  933. console.log(this.material)
  934. } else {
  935. // 加载完成执行
  936. img.onload = function () {
  937. // 打印
  938. // alert('from:onload : width:' + img.width + ',height:' + img.height)
  939. if (img.width == 720) {
  940. if (img.height == 1280) {
  941. that.material.push(true)
  942. } else {
  943. that.material.push(false)
  944. }
  945. } else if (img.width == 1080) {
  946. if (img.height == 1920) {
  947. that.material.push(true)
  948. } else {
  949. that.material.push(false)
  950. }
  951. } else if (img.width == 1280) {
  952. if (img.height == 720) {
  953. that.material.push(true)
  954. } else {
  955. that.material.push(false)
  956. }
  957. } else if (img.width == 1920) {
  958. if (img.height == 1080) {
  959. that.material.push(true)
  960. } else {
  961. that.material.push(false)
  962. }
  963. } else {
  964. that.material.push(false)
  965. }
  966. }
  967. }
  968. }
  969. },
  970. file(file) {
  971. console.log(file)
  972. var bmf = new BMF()
  973. var that = this
  974. return new Promise(function (resolve, reject) {
  975. for (let i = 0; i < file.length; i++) {
  976. bmf.md5(file[i], (err, md5) => {
  977. // that.urlList.name.push(file[0].name)
  978. // that.urlList.md5.push(md5)
  979. fileCheck({
  980. code: md5,
  981. projectId: that.getData('projectId')
  982. }).then(res => {
  983. if (res.code == 0) {
  984. that.$message.error('此素材已经上传')
  985. reject()
  986. } else {
  987. resolve()
  988. // reject()
  989. }
  990. })
  991. })
  992. }
  993. })
  994. },
  995. getData(className) {
  996. return this.form.getFieldValue(className)
  997. },
  998. fileWater(file) {
  999. var bmf = new BMF()
  1000. var that = this
  1001. return new Promise(function (resolve, reject) {
  1002. bmf.md5(file[0], (err, md5) => {
  1003. that.watermarkUrl.name = file[0].name
  1004. that.watermarkUrl.md5 = md5
  1005. fileCheck({
  1006. code: md5
  1007. }).then(res => {
  1008. if (res.code == 0) {
  1009. that.$message.error('此素材已经上传')
  1010. reject()
  1011. } else {
  1012. resolve()
  1013. }
  1014. })
  1015. })
  1016. })
  1017. },
  1018. getParticipateList() {
  1019. getAction('/ctop/projectMember/participateList', {
  1020. userId: this.userInfo().id
  1021. }).then(res => {
  1022. if (res.code == 0) {
  1023. this.dataElse = res.result
  1024. }
  1025. })
  1026. },
  1027. getProjectId(items) {
  1028. getAction('/ctop/projectMember/getMemberList', {
  1029. projectId: items
  1030. }).then(res => {
  1031. if (res.code == 0) {
  1032. this.ascription.clipId = res.result.filter(item => {
  1033. if (item.roleCode == 'clip') {
  1034. return {
  1035. userId: item.userId,
  1036. userName: item.userName
  1037. }
  1038. }
  1039. })
  1040. this.ascription.shotId = res.result.filter(item => {
  1041. if (item.roleCode == 'shot') {
  1042. return {
  1043. userId: item.userId,
  1044. userName: item.userName
  1045. }
  1046. }
  1047. })
  1048. this.ascription.planId = res.result.filter(item => {
  1049. if (item.roleCode == 'plan') {
  1050. return {
  1051. userId: item.userId,
  1052. userName: item.userName
  1053. }
  1054. }
  1055. })
  1056. this.ascription.planeId = res.result.filter(item => {
  1057. if (item.roleCode == 'plane') {
  1058. return {
  1059. userId: item.userId,
  1060. userName: item.userName
  1061. }
  1062. }
  1063. })
  1064. }
  1065. })
  1066. },
  1067. getDataSource(page, pageSize) {
  1068. this.ipagination.current = page
  1069. // this.checkArr = []
  1070. this.checkAll = false
  1071. this.loadData()
  1072. }
  1073. }
  1074. }
  1075. </script>
  1076. <style scoped>
  1077. @import '~@assets/less/common.less';
  1078. </style>