|
@@ -131,12 +131,39 @@
|
|
:scroll="{ y: 500 }"
|
|
:scroll="{ y: 500 }"
|
|
>
|
|
>
|
|
<span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
<span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="materialCost" slot-scope="materialCost">{{ materialCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="personCost" slot-scope="personCost">{{ personCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="percent" slot-scope="percent">{{ percent | toPercentage }}</span>
|
|
|
|
+ <div slot="urls" slot-scope="test,records">
|
|
|
|
+ <img
|
|
|
|
+ :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"
|
|
|
|
+ alt
|
|
|
|
+ style="width:100px"
|
|
|
|
+ @click="openVideo(records.url)"
|
|
|
|
+
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <span slot="mediaType" slot-scope="text">
|
|
|
|
+ <span v-if="text==1">头条</span>
|
|
|
|
+ <span v-if="text==2">快手</span>
|
|
|
|
+ <span v-if="text==3">头条内广</span>
|
|
|
|
+ <span v-if="text==4">快手内广</span>
|
|
|
|
+ </span>
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</a-modal>
|
|
</a-modal>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
+ <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
|
|
|
|
+ <video
|
|
|
|
+ @click.stop
|
|
|
|
+ class="video"
|
|
|
|
+ :src="videoUrl"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="height:600px;width:100%"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </a-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -309,7 +336,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'quarters',
|
|
dataIndex: 'quarters',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'quarters' },
|
|
scopedSlots: { customRender: 'quarters' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:110
|
|
width:110
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -317,7 +344,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'projectName',
|
|
dataIndex: 'projectName',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'projectName' },
|
|
scopedSlots: { customRender: 'projectName' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:120
|
|
width:120
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -325,7 +352,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'authName',
|
|
dataIndex: 'authName',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'authName' },
|
|
scopedSlots: { customRender: 'authName' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:120,
|
|
width:120,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -333,7 +360,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'projectName',
|
|
dataIndex: 'projectName',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'projectName' },
|
|
scopedSlots: { customRender: 'projectName' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:100
|
|
width:100
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -341,7 +368,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'authName',
|
|
dataIndex: 'authName',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'authName' },
|
|
scopedSlots: { customRender: 'authName' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:100,
|
|
width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -349,7 +376,7 @@ const saleDetailColumns = [
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'cost' },
|
|
scopedSlots: { customRender: 'cost' },
|
|
- sorter:()=>{},
|
|
|
|
|
|
+
|
|
width:200,
|
|
width:200,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -367,21 +394,7 @@ const designDetailColumns = [
|
|
dataIndex: 'medialType',
|
|
dataIndex: 'medialType',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'medialType' },
|
|
scopedSlots: { customRender: 'medialType' },
|
|
- width:80,
|
|
|
|
- customRender: (value, row, index) => {
|
|
|
|
- const obj = {
|
|
|
|
- children: value,
|
|
|
|
- attrs: {},
|
|
|
|
- };
|
|
|
|
- if (index%5 === 0) {
|
|
|
|
- obj.attrs.rowSpan = 5;
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- obj.attrs.rowSpan = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
|
|
+ width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '项目',
|
|
title: '项目',
|
|
@@ -389,104 +402,51 @@ const designDetailColumns = [
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'projectName' },
|
|
scopedSlots: { customRender: 'projectName' },
|
|
width:100,
|
|
width:100,
|
|
- customRender: (value, row, index) => {
|
|
|
|
- const obj = {
|
|
|
|
- children: value,
|
|
|
|
- attrs: {},
|
|
|
|
- };
|
|
|
|
- if (index%5 === 0) {
|
|
|
|
- obj.attrs.rowSpan = 5;
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- obj.attrs.rowSpan = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '视频',
|
|
title: '视频',
|
|
- dataIndex: 'url',
|
|
|
|
|
|
+ dataIndex: 'urls',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'url' },
|
|
|
|
- width:120,
|
|
|
|
- customRender: (value, row, index) => {
|
|
|
|
- const obj = {
|
|
|
|
- children: value,
|
|
|
|
- attrs: {},
|
|
|
|
- };
|
|
|
|
- if (index%5 === 0) {
|
|
|
|
- obj.attrs.rowSpan = 5;
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- obj.attrs.rowSpan = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'urls' },
|
|
|
|
+ width:140,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '消耗数',
|
|
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ title: '素材消耗',
|
|
|
|
+ dataIndex: 'materialCost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'materialCost' },
|
|
sorter:()=>{},
|
|
sorter:()=>{},
|
|
- width:100,
|
|
|
|
- customRender: (value, row, index) => {
|
|
|
|
- const obj = {
|
|
|
|
- children: value,
|
|
|
|
- attrs: {},
|
|
|
|
- };
|
|
|
|
- if (index%5 === 0) {
|
|
|
|
- obj.attrs.rowSpan = 5;
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- obj.attrs.rowSpan = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
|
|
+ width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '设计负责人',
|
|
|
|
- dataIndex: 'authName',
|
|
|
|
|
|
+ title: '个人消耗',
|
|
|
|
+ dataIndex: 'personCost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'authName' },
|
|
|
|
- width:100,
|
|
|
|
- customRender: (value, row, index) => {
|
|
|
|
- const obj = {
|
|
|
|
- children: value,
|
|
|
|
- attrs: {},
|
|
|
|
- };
|
|
|
|
- if (index%5 === 0) {
|
|
|
|
- obj.attrs.rowSpan = 5;
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- obj.attrs.rowSpan = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'personCost' },
|
|
|
|
+ sorter:()=>{},
|
|
|
|
+ width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '职位',
|
|
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ title: '设计负责人',
|
|
|
|
+ dataIndex: 'leaderName',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
- width:50,
|
|
|
|
- },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'leaderName' },
|
|
|
|
+ width:110,
|
|
|
|
+ },
|
|
{
|
|
{
|
|
- title: '姓名',
|
|
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ title: '职位',
|
|
|
|
+ dataIndex: 'jobName',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
- width:50,
|
|
|
|
- },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'jobName' },
|
|
|
|
+ width:80,
|
|
|
|
+ },
|
|
|
|
+
|
|
{
|
|
{
|
|
title: '绩效占比',
|
|
title: '绩效占比',
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ dataIndex: 'percent',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'percent' },
|
|
},
|
|
},
|
|
]
|
|
]
|
|
|
|
|
|
@@ -515,7 +475,9 @@ export default {
|
|
tableWidth: '',//设置表格的列宽
|
|
tableWidth: '',//设置表格的列宽
|
|
loading:false,
|
|
loading:false,
|
|
|
|
|
|
-
|
|
|
|
|
|
+ //是否打开视频
|
|
|
|
+ Videovisible: false,
|
|
|
|
+ videoUrl: '',
|
|
|
|
|
|
visibleDetail:false, //明细表的开关
|
|
visibleDetail:false, //明细表的开关
|
|
detailData:[],
|
|
detailData:[],
|
|
@@ -585,29 +547,80 @@ export default {
|
|
|
|
|
|
//点击查看明细按钮的事件
|
|
//点击查看明细按钮的事件
|
|
opendetail(text, record) {
|
|
opendetail(text, record) {
|
|
- console.log(text, record)
|
|
|
|
|
|
+ console.log(text, record);
|
|
this.visibleDetail = true
|
|
this.visibleDetail = true
|
|
this.detailData = []
|
|
this.detailData = []
|
|
this.loadingDetail=true
|
|
this.loadingDetail=true
|
|
- postAction('/ctop/performance/show/operateDetail', {
|
|
|
|
- year:record.year,
|
|
|
|
- quarter:record.quarter,
|
|
|
|
- userId:record.userId,
|
|
|
|
- mediaType:record.mediaType
|
|
|
|
- }).then(res => {
|
|
|
|
- // let resArr = []
|
|
|
|
- this.loadingDetail=false
|
|
|
|
- console.log(res)
|
|
|
|
- if (res.success) {
|
|
|
|
- let result = res.result
|
|
|
|
- // this.detailData.push({ ...result, key: 1 })
|
|
|
|
- result.map((item, index) => {
|
|
|
|
- item.key = index;
|
|
|
|
- item.quarters=record.quarters
|
|
|
|
- })
|
|
|
|
- this.detailData = result
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ if(record.department=='运营部'){
|
|
|
|
+ this.columns=this.columnsFixd;
|
|
|
|
+ this.detailColumns=this.operateDetailColumns;
|
|
|
|
+ postAction('/ctop/performance/show/operateDetail', {
|
|
|
|
+ year:record.year,
|
|
|
|
+ quarter:record.quarter,
|
|
|
|
+ userId:record.userId,
|
|
|
|
+ mediaType:record.mediaType
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // let resArr = []
|
|
|
|
+ this.loadingDetail=false
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let result = res.result
|
|
|
|
+ // this.detailData.push({ ...result, key: 1 })
|
|
|
|
+ result.map((item, index) => {
|
|
|
|
+ item.key = index;
|
|
|
|
+ item.quarters=record.quarters
|
|
|
|
+ })
|
|
|
|
+ this.detailData = result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }else if(record.department=='设计部'){
|
|
|
|
+ this.columns=this.elseColumns;
|
|
|
|
+ this.detailColumns=this.designDetailColumns;
|
|
|
|
+ postAction('/ctop/performance/show/designDetail/1/10', {
|
|
|
|
+ year:record.year,
|
|
|
|
+ quarter:record.quarter,
|
|
|
|
+ userId:record.userId,
|
|
|
|
+ mediaType:record.mediaType
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // let resArr = []
|
|
|
|
+ this.loadingDetail=false
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let result = res.result.list
|
|
|
|
+ // this.detailData.push({ ...result, key: 1 })
|
|
|
|
+ result.map((item, index) => {
|
|
|
|
+ item.key = index;
|
|
|
|
+ item.quarters=record.quarters
|
|
|
|
+ })
|
|
|
|
+ this.detailData = result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }else if(record.department=='销售部'){
|
|
|
|
+ this.columns=this.elseColumns;
|
|
|
|
+ this.detailColumns=this.saleDetailColumns;
|
|
|
|
+ postAction('/ctop/performance/show/operateDetail', {
|
|
|
|
+ year:record.year,
|
|
|
|
+ quarter:record.quarter,
|
|
|
|
+ userId:record.userId,
|
|
|
|
+ mediaType:record.mediaType
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // let resArr = []
|
|
|
|
+ this.loadingDetail=false
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let result = res.result
|
|
|
|
+ // this.detailData.push({ ...result, key: 1 })
|
|
|
|
+ result.map((item, index) => {
|
|
|
|
+ item.key = index;
|
|
|
|
+ item.quarters=record.quarters
|
|
|
|
+ })
|
|
|
|
+ this.detailData = result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
|
|
|
|
//获取选择框的信息
|
|
//获取选择框的信息
|
|
@@ -723,6 +736,15 @@ export default {
|
|
this.ipagination.total = res.result.total
|
|
this.ipagination.total = res.result.total
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ //打开视频
|
|
|
|
+ openVideo(val) {
|
|
|
|
+ this.Videovisible = true
|
|
|
|
+ this.videoUrl = val
|
|
|
|
+ },
|
|
|
|
+ videoOk() {
|
|
|
|
+ this.Videovisible = false
|
|
|
|
+ },
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.getInfoHttp();
|
|
this.getInfoHttp();
|