753 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			753 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | ||
|   <ai-list class="AppAnnounceStatistics">
 | ||
|     <template slot="content">
 | ||
|       <div class="statistics-content">
 | ||
|         <ai-title title="宣发日历"></ai-title>
 | ||
|         <div class="flex-content">
 | ||
|           <div class="flex-left">
 | ||
|             <div class="date-header">
 | ||
|               <p>{{chooseYear}}年{{chooseMonth}}月</p>
 | ||
|               <div>
 | ||
|                 <el-date-picker size="small"
 | ||
|                   v-model="searchMonth"
 | ||
|                   type="month" value-format="yyyy-MM"
 | ||
|                   placeholder="选择日期" @change="searchMonthChange">
 | ||
|                 </el-date-picker>
 | ||
|               </div>
 | ||
|             </div>
 | ||
|             <el-calendar v-model="calendarDate">
 | ||
|               <template
 | ||
|                 slot="dateCell"
 | ||
|                 slot-scope="{date, data}">
 | ||
|                 <div class="flex-date">
 | ||
|                   <span>{{Number(data.day.substring(8, 10))}}</span>
 | ||
|                   <span class="tips" v-if="data.day.substring(5, 7) == chooseMonth && dateList[Number(data.day.substring(8, 10))] && dateList[Number(data.day.substring(8, 10))].taskList.length">{{dateList[Number(data.day.substring(8, 10))].taskList.length}}</span>
 | ||
|                 </div>
 | ||
|               </template>
 | ||
|             </el-calendar>
 | ||
|           </div>
 | ||
|           <div class="flex-right">
 | ||
|             <div class="title">{{chooseMonth}}月{{chooseDay}}日宣发内容</div>
 | ||
|             <div class="list-content" v-if="taskList.length">
 | ||
|               <el-timeline >
 | ||
|                 <el-timeline-item v-for="(item, index) in taskList" :key="index">
 | ||
|                   <el-card>
 | ||
|                     <div class="flex-between">
 | ||
|                       <p class="item-title">{{item.taskTitle}}</p>
 | ||
|                       <span class="item-time" v-if="item.choiceTime">{{item.choiceTime.substring(10, 16)}}</span>
 | ||
|                     </div>
 | ||
|                     <div class="item-info item-created">
 | ||
|                       <span class="label">创建人:</span>{{item.createUserName}}
 | ||
|                     </div>
 | ||
|                     <div class="item-info item-dept">
 | ||
|                       <span class="label">创建部门:</span>{{item.createUserDeptName}}
 | ||
|                     </div>
 | ||
|                     <div class="flex-between">
 | ||
|                       <!-- <div class="item-info">群发类型:<span>{{$dict.getLabel('mstSendType', item.sendType) || ''}}</span></div> -->
 | ||
|                       <div class="item-info"><span class="label">群发类型:</span><span>群发居民群</span></div>
 | ||
|                       <span class="item-btn" @click="$router.push({name: '357e228ba8e64008ace90d095a7a0dd7', params: { id: item.id }})">详情</span>
 | ||
|                     </div>
 | ||
|                   </el-card>
 | ||
|                 </el-timeline-item>
 | ||
|               </el-timeline>
 | ||
|               
 | ||
|             </div>
 | ||
|             <ai-empty v-if="!taskList.length" />
 | ||
|           </div>
 | ||
|         </div>
 | ||
|       </div>
 | ||
|       <div class="statistics-content">
 | ||
|         <div class="flex-between mar-b16">
 | ||
|           <ai-title title="宣发效果"></ai-title>
 | ||
|           <div class="right-search">
 | ||
|             <div class="time-select" :class="effectType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeEffectType(index)">{{item}}</div>
 | ||
|             <ai-picker :instance="instance" @pick="e => onUserChange(e)" :multiple="false" dialogTitle="选择部门" action="/app/wxcp/wxdepartment/departList">
 | ||
|               <div class="time-select">
 | ||
|                 <span class="dept-name" style="color:#999;" v-if="deptList && !deptList.length">宣发部门</span>
 | ||
|                 <span class="dept-name" v-else>{{deptList[0].name}}</span>
 | ||
|                 <i class="el-icon-arrow-down"></i>
 | ||
|               </div>
 | ||
|             </ai-picker>
 | ||
|           </div>
 | ||
|         </div>
 | ||
|         <div class="line-content">
 | ||
|           <div class="flex1">
 | ||
|             <div class="header">
 | ||
|               <p>累计创建宣发任务数</p>
 | ||
|               <h2>{{effectData.createCount}}</h2>
 | ||
|             </div>
 | ||
|             <div class="chart-content">
 | ||
|               <div class="chart-title">宣发任务数</div>
 | ||
|               <div class="chart-box" id="createChart"></div>
 | ||
|             </div>
 | ||
|           </div>
 | ||
|           <div class="flex1">
 | ||
|             <div class="header">
 | ||
|               <p>累计执行宣发次数</p>
 | ||
|               <h2>{{effectData.executeCount}}</h2>
 | ||
|             </div>
 | ||
|             <div class="chart-content">
 | ||
|               <div class="chart-title">宣发次数</div>
 | ||
|               <div class="chart-box" id="executeChart"></div>
 | ||
|             </div>
 | ||
|           </div>
 | ||
|           <div class="flex1 mar-r0">
 | ||
|             <div class="header">
 | ||
|               <p>累计触达人次</p>
 | ||
|               <h2>{{effectData.receiveCount}}</h2>
 | ||
|             </div>
 | ||
|             <div class="chart-content">
 | ||
|               <div class="chart-title">触达人次</div>
 | ||
|               <div class="chart-box" id="receiveChart"></div>
 | ||
|             </div>
 | ||
|           </div>
 | ||
|         </div>
 | ||
|       </div>
 | ||
|       <div class="statistics-content">
 | ||
|         <div class="flex-between mar-b16">
 | ||
|           <ai-title title="宣发明细"></ai-title>
 | ||
|           <div class="right-search">
 | ||
|             <div class="time-select" :class="departType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeDepartType(index)">{{item}}</div>
 | ||
|           </div>
 | ||
|         </div>
 | ||
|         <div id="departBarChart" v-if="isDepartData"></div>
 | ||
|         <ai-empty v-if="!isDepartData"></ai-empty>
 | ||
|       </div>
 | ||
| 
 | ||
|       <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
 | ||
|         <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
 | ||
|           range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
 | ||
|         </el-date-picker>
 | ||
|         <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
 | ||
|       </ai-dialog>
 | ||
|     </template>
 | ||
|   </ai-list>
 | ||
| </template>
 | ||
| 
 | ||
| <script>
 | ||
|   import * as echarts from "echarts";
 | ||
|   import { mapActions, mapState } from 'vuex';
 | ||
|   export default {
 | ||
|     name: 'AppAnnounceStatistics',
 | ||
|     label: '协同宣发统计',
 | ||
|     props: {
 | ||
|       instance: Function,
 | ||
|       dict: Object,
 | ||
|       permissions: Function
 | ||
|     },
 | ||
|     data () {
 | ||
|       return {
 | ||
|         calendarDate: new Date(),
 | ||
|         dateList: {},
 | ||
|         chooseYear: '',
 | ||
|         chooseMonth: '',
 | ||
|         chooseDay: '',
 | ||
|         searchMonth: '',
 | ||
|         taskList: [],
 | ||
|         effectType: 0, // 宣发效果类型 0:近七天、1:近30天、2:近一年、3:自定义
 | ||
|         effectData: {},
 | ||
|         createChart: null,
 | ||
|         executeChart: null,
 | ||
|         receiveChart: null,
 | ||
|         departType: 0, // 宣发明细类型 0:近七天、1:近30天、2:近一年、3:自定义
 | ||
|         dateTypeList: ['近7天', '近30天', '近1年', '自定义'],
 | ||
|         departData: {},
 | ||
|         departBarChart: null,
 | ||
|         dialogDate: false,
 | ||
|         timeListEffect: '',
 | ||
|         timeListDepart: '',
 | ||
|         timeList: '',
 | ||
|         isEffectTimeSelect: false,
 | ||
|         deptList: [],
 | ||
|         selectDeptName: '',
 | ||
|         isDepartData: true,
 | ||
|         departBarData: [],
 | ||
|         type: '',
 | ||
|       }
 | ||
|     },
 | ||
|     computed: {
 | ||
|       ...mapState(['user']),
 | ||
|     },
 | ||
|     watch: {
 | ||
|       calendarDate: function() {
 | ||
|         var year = '' , month = '', date = ''
 | ||
|         if(this.calendarDate.length == 9) { // 月份选择器触发
 | ||
|           year = this.calendarDate.substring(0, 4)
 | ||
|           month = this.calendarDate.substring(5, 7)
 | ||
|           date = this.calendarDate.substring(8, 10)
 | ||
|         }else { // 日历点击
 | ||
|           year = this.calendarDate.getFullYear();
 | ||
|           month = this.calendarDate.getMonth() + 1;
 | ||
|           date = this.calendarDate.getDate()
 | ||
|           if (month >= 1 && month <= 9) {
 | ||
|             month = "0" + month;
 | ||
|           }
 | ||
| 
 | ||
|           if(this.chooseMonth != month) { // 日历点击不同月
 | ||
|             this.searchMonth = ''
 | ||
|           }
 | ||
| 
 | ||
|         }
 | ||
| 
 | ||
|         this.chooseDay = date
 | ||
| 
 | ||
|         if(this.chooseMonth != month || this.chooseYear != year) { // 不同年/不同月重新请求日历列表
 | ||
|           this.getCalendarList(year, month)
 | ||
|         } else {
 | ||
|           this.getTaskList(date)
 | ||
|         }
 | ||
| 
 | ||
|         this.chooseMonth = month
 | ||
|         this.chooseYear = year
 | ||
| 
 | ||
|       }
 | ||
|     },
 | ||
|     created() {
 | ||
|       var year = this.calendarDate.getFullYear();
 | ||
|       var month = this.calendarDate.getMonth() + 1;
 | ||
|       var date = this.calendarDate.getDate()
 | ||
|       if (month >= 1 && month <= 9) {
 | ||
|         month = "0" + month;
 | ||
|       }
 | ||
|       this.chooseMonth = month
 | ||
|       this.chooseYear = year
 | ||
|       this.chooseDay = date
 | ||
|       this.getCalendarList(year, month)
 | ||
|       this.getEffect()
 | ||
|       this.getDepart()
 | ||
|       this.dict.load('mstSendType')
 | ||
|     },
 | ||
|     methods: {
 | ||
|       ...mapActions(['initOpenData', 'transCanvas']),
 | ||
|       onUserChange (e) {
 | ||
|         this.deptList = e
 | ||
|        this.getEffect()
 | ||
|       },
 | ||
|       selectDete() {
 | ||
|         if(!this.timeList || !this.timeList.length) {
 | ||
|           return this.$message.error('请选择自定义时间');
 | ||
|         }
 | ||
| 
 | ||
|         if(this.isEffectTimeSelect) { //宣发效果
 | ||
|           this.timeListEffect = this.timeList
 | ||
|           this.effectType = 3
 | ||
|           this.getEffect()
 | ||
|         } else {  //宣发明细
 | ||
|           this.timeListDepart = this.timeList
 | ||
|           this.departType = 3
 | ||
|           this.getDepart()
 | ||
|         }
 | ||
| 
 | ||
|         this.dialogDate = false
 | ||
|       },
 | ||
|       searchMonthChange() {
 | ||
|         this.calendarDate = this.searchMonth + '-1'
 | ||
|       },
 | ||
|       getCalendarList(year, month){
 | ||
|         this.instance.post(`/app/appmasssendingtask/statisticsCalendar?yyyyMM=${year}${month}`).then(res => {
 | ||
|           if (res.code == 0) {
 | ||
|             this.dateList = res.data
 | ||
|             this.getTaskList(this.chooseDay)
 | ||
|           }
 | ||
|         })
 | ||
|       },
 | ||
|       getTaskList(day) {
 | ||
|         this.taskList = this.dateList[day].taskList
 | ||
|       },
 | ||
|       changeEffectType(type) {
 | ||
|         if(this.effectType != 3) {
 | ||
|           this.timeList = []
 | ||
|         }else {
 | ||
|           this.timeList = this.timeListEffect
 | ||
|         }
 | ||
|         if(type == 3) {
 | ||
|           this.isEffectTimeSelect = true
 | ||
|           this.dialogDate = true
 | ||
|         }else {
 | ||
|           this.effectType = type
 | ||
|           this.getEffect()
 | ||
|         }
 | ||
|       },
 | ||
|       getEffect() {
 | ||
|         var startTime = this.timeListEffect[0] || '' , endTime = this.timeListEffect[1] || '', departId = ''
 | ||
|         if(this.deptList && this.deptList.length) {
 | ||
|           departId = this.deptList[0].id
 | ||
|         }
 | ||
|         this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}&startTime=${startTime}&endTime=${endTime}&departId=${departId}`).then(res => {
 | ||
|           if (res.code == 0) {
 | ||
|             this.effectData = res.data
 | ||
|             var xData = [], createData = [], executeData = [], receiveData = []
 | ||
|             res.data.trend.map(e => {
 | ||
|               if(this.effectType == 0 || this.effectType == 1) {
 | ||
|                 e.ymd = e.ymd.substring(5, 10)
 | ||
|               }
 | ||
|               xData.push(e.ymd)
 | ||
|               createData.push(e.createCount)
 | ||
|               executeData.push(e.executeCount)
 | ||
|               receiveData.push(e.receiveCount)
 | ||
|             })
 | ||
| 
 | ||
|             this.setLineChart(xData, createData, 'createChart', ['#2891FF'])
 | ||
|             this.setLineChart(xData, executeData, 'executeChart', ['#FFB865'])
 | ||
|             this.setLineChart(xData, receiveData, 'receiveChart', ['#26D52B'])
 | ||
|           }
 | ||
|         })
 | ||
|       },
 | ||
|       setLineChart(xData, yData, id, colorList) {
 | ||
|         this[id] = echarts.init(document.querySelector(`#${id}`))
 | ||
|         var option = {
 | ||
|           xAxis: {
 | ||
|             type: 'category',
 | ||
|             data: xData
 | ||
|           },
 | ||
|           yAxis: {
 | ||
|             type: 'value'
 | ||
|           },
 | ||
|           grid: {
 | ||
|             left: '10px',
 | ||
|             right: '28px',
 | ||
|             bottom: '14px',
 | ||
|             top: '30px',
 | ||
|             containLabel: true
 | ||
|           },
 | ||
|           tooltip: {
 | ||
|             trigger: 'axis'
 | ||
|           },
 | ||
|           legend: {
 | ||
|             type: "plain"
 | ||
|           },
 | ||
|           color: colorList,
 | ||
|           series: [
 | ||
|             {
 | ||
|               data: yData,
 | ||
|               type: 'line'
 | ||
|             }
 | ||
|           ]
 | ||
|         }
 | ||
|         this[id].setOption(option)
 | ||
|       },
 | ||
|       changeDepartType(type) {
 | ||
|         if(this.departType != 3) {
 | ||
|           this.timeList = []
 | ||
|         }else {
 | ||
|           this.timeList = this.timeListDepart
 | ||
|         }
 | ||
|         if(type == 3) {
 | ||
|           this.isEffectTimeSelect = false
 | ||
|           this.dialogDate = true
 | ||
|         }else {
 | ||
|           this.departType = type
 | ||
|           this.getDepart()
 | ||
|         }
 | ||
|       },
 | ||
|       getDepart() {
 | ||
|         var startTime = this.timeListDepart[0] || '' , endTime = this.timeListDepart[1] || ''
 | ||
|         this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}&startTime=${startTime}&endTime=${endTime}`).then(res => {
 | ||
|           if (res.code == 0) {
 | ||
|             if(res.data && res.data.length) {
 | ||
|               this.isDepartData = true
 | ||
|               var xData = [], yData = []
 | ||
|               res.data.map((item) => {
 | ||
|                 this.departBarData.push(item)
 | ||
|                 xData.push(item.deptName)
 | ||
|                 yData.push(item.taskCount)
 | ||
|               })
 | ||
|               this.setBarChart(xData, yData)
 | ||
|             }else {
 | ||
|               this.isDepartData = false
 | ||
|             }
 | ||
|           }
 | ||
|         })
 | ||
|       },
 | ||
|       setBarChart(xData, yData) {
 | ||
|         this.departBarChart = echarts.init(document.querySelector(`#departBarChart`))
 | ||
|         var option = {
 | ||
|           color: ['#2891FF'],
 | ||
|           grid: {
 | ||
|             top: '10%',
 | ||
|             left: '2%',
 | ||
|             right: '2%',
 | ||
|             bottom: 90,
 | ||
|             containLabel: true
 | ||
|           },
 | ||
|           // toolbox: {
 | ||
|           //   feature: {
 | ||
|           //     dataZoom: {
 | ||
|           //       yAxisIndex: false
 | ||
|           //     },
 | ||
|           //     saveAsImage: {
 | ||
|           //       pixelRatio: 2
 | ||
|           //     }
 | ||
|           //   }
 | ||
|           // },
 | ||
|           tooltip: {
 | ||
|             trigger: 'axis',
 | ||
|             axisPointer: {
 | ||
|               type: 'shadow'
 | ||
|             },
 | ||
|             formatter: (data) => {
 | ||
|               var index = data[0].dataIndex
 | ||
|               return `<ww-open-data type="departmentName" openid="${this.departBarData[index].deptId}"></ww-open-data><br/>宣发任务数:${data[0].value}`
 | ||
|             }
 | ||
|           },
 | ||
|           dataZoom: [
 | ||
|             {
 | ||
|               type: 'inside'
 | ||
|             },
 | ||
|             {
 | ||
|               type: 'slider'
 | ||
|             }
 | ||
|           ],
 | ||
|           xAxis: {
 | ||
|             data: xData,
 | ||
|             silent: false,
 | ||
|             splitLine: {
 | ||
|               show: false
 | ||
|             },
 | ||
|             splitArea: {
 | ||
|               show: false
 | ||
|             }
 | ||
|           },
 | ||
|           yAxis: {
 | ||
|             splitArea: {
 | ||
|               show: false
 | ||
|             }
 | ||
|           },
 | ||
|           series: [
 | ||
|             {
 | ||
|               type: 'bar',
 | ||
|               data: yData,
 | ||
|               barWidth: 20,
 | ||
|               barGap: '250%',
 | ||
|               large: true
 | ||
|             }
 | ||
|           ]
 | ||
|         };
 | ||
| 
 | ||
|         // {
 | ||
|         //   tooltip: {
 | ||
|         //     trigger: 'axis',
 | ||
|         //     axisPointer: {
 | ||
|         //       type: 'shadow'
 | ||
|         //     }
 | ||
|         //   },
 | ||
|         //   grid: {
 | ||
|         //     top: '10%',
 | ||
|         //     left: '2%',
 | ||
|         //     right: '2%',
 | ||
|         //     bottom: '2%',
 | ||
|         //     containLabel: true
 | ||
|         //   },
 | ||
|         //   color: ['#2891FF'],
 | ||
|         //   xAxis: {
 | ||
|         //     type: 'category',
 | ||
|         //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 | ||
|         //   },
 | ||
|         //   yAxis: {
 | ||
|         //     type: 'value'
 | ||
|         //   },
 | ||
|         //   series: [
 | ||
|         //     {
 | ||
|         //       data: [120, 200, 150, 80, 70, 110, 130],
 | ||
|         //       type: 'bar',
 | ||
|         //       barWidth: 20,
 | ||
|         //       barGap: '250%',
 | ||
|         //     }
 | ||
|         //   ]
 | ||
|         // };
 | ||
|         this.departBarChart.setOption(option)
 | ||
|       }
 | ||
| 
 | ||
|     }
 | ||
|   }
 | ||
| </script>
 | ||
| 
 | ||
| <style lang="scss" scoped>
 | ||
|   .AppAnnounceStatistics {
 | ||
|     height: 100%;
 | ||
|     .flex-between{
 | ||
|       display: flex;
 | ||
|       justify-content: space-between;
 | ||
|     }
 | ||
|     .mar-b16{
 | ||
|       margin-bottom: 16px;
 | ||
|     }
 | ||
|     .mar-r0{
 | ||
|       margin-right: 0!important;
 | ||
|     }
 | ||
|     .statistics-content{
 | ||
|       padding: 0 24px 24px;
 | ||
|       background-color: #fff;
 | ||
|       box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
 | ||
|       border-radius: 4px;
 | ||
|       margin-bottom: 20px;
 | ||
|       .flex-content{
 | ||
|         width: 100%;
 | ||
|         display: flex;
 | ||
|         margin-top: 16px;
 | ||
|         .flex-left{
 | ||
|           width: 50%;
 | ||
|           .date-header{
 | ||
|             padding: 12px 16px;
 | ||
|             border: 1px solid #eee;
 | ||
|             display: flex;
 | ||
|             justify-content: space-between;
 | ||
|             p{
 | ||
|               line-height: 32px;
 | ||
|             }
 | ||
|           }
 | ||
|           .flex-date{
 | ||
|             display: flex;
 | ||
|             justify-content: space-between;
 | ||
|           }
 | ||
|           .tips{
 | ||
|             display: inline-block;
 | ||
|             padding: 0 4px;
 | ||
|             height: 16px;
 | ||
|             line-height: 16px;
 | ||
|             border-radius: 8px;
 | ||
|             background: #2891FF;
 | ||
|             font-size: 12px;
 | ||
|             font-family: ArialMT;
 | ||
|             color: #FFF;
 | ||
|             margin-top: 8px;
 | ||
|           }
 | ||
|         }
 | ||
|         .flex-right{
 | ||
|           width: 50%;
 | ||
|           margin-left: 16px;
 | ||
|           border: 1px solid #eee;
 | ||
|           .title{
 | ||
|             line-height: 56px;
 | ||
|             border-bottom: 1px solid #EEE;
 | ||
|             padding-left: 16px;
 | ||
|             font-size: 16px;
 | ||
|             font-family: MicrosoftYaHeiSemibold;
 | ||
|             color: #333;
 | ||
|           }
 | ||
|           .list-content{
 | ||
|             padding: 16px;
 | ||
|             height: 339px;
 | ||
|             box-sizing: border-box;
 | ||
|             overflow-y: scroll;
 | ||
|             background-color: #F9F9F9;
 | ||
|             box-sizing: border-box;
 | ||
|             .item-title{
 | ||
|               width: calc(100% - 100px);
 | ||
|               word-break: break-all;
 | ||
|               margin-bottom: 8px;
 | ||
|               font-size: 16px;
 | ||
|               font-family: MicrosoftYaHeiSemibold;
 | ||
|               color: #222;
 | ||
|               line-height: 24px;
 | ||
|             }
 | ||
|             .item-time{
 | ||
|               width: 100px;
 | ||
|               text-align: right;
 | ||
|               font-size: 16px;
 | ||
|               font-family: ArialMT;
 | ||
|               color: #888;
 | ||
|               line-height: 24px;
 | ||
|             }
 | ||
|             .item-info{
 | ||
|               display: inline-block;
 | ||
|               font-size: 14px;
 | ||
|               font-family: MicrosoftYaHei;
 | ||
|               color: #222;
 | ||
|               line-height: 22px;
 | ||
|               span{
 | ||
|                 display: inline-block;
 | ||
|                 color: #222;
 | ||
|                 word-break: break-all;
 | ||
|                 // vertical-align: text-top;
 | ||
|               }
 | ||
|               .label{
 | ||
|                 color: #999;
 | ||
|               }
 | ||
|             }
 | ||
|             .item-created{
 | ||
|               width: 152px;
 | ||
|               margin-bottom: 4px;
 | ||
|               .label{
 | ||
|                 width: 56px;
 | ||
|               }
 | ||
|               .name{
 | ||
|                 width: calc(100% - 56px);
 | ||
|               }
 | ||
|             }
 | ||
|             .item-dept{
 | ||
|               width: calc(100% - 152px);
 | ||
|               .label{
 | ||
|                 width: 70px;
 | ||
|               }
 | ||
|               .name{
 | ||
|                 width: calc(100% - 70px);
 | ||
|               }
 | ||
|             }
 | ||
|             .item-btn{
 | ||
|               color: #26f;
 | ||
|               cursor: pointer;
 | ||
|             }
 | ||
|           }
 | ||
|         }
 | ||
|       }
 | ||
|       .right-search{
 | ||
|         margin-top: 10px;
 | ||
|         div{
 | ||
|           display: inline-block;
 | ||
|         }
 | ||
|         .time-select{
 | ||
|           font-size: 14px;
 | ||
|           font-family: MicrosoftYaHei;
 | ||
|           color: #222;
 | ||
|           line-height: 22px;
 | ||
|           padding: 6px 12px;
 | ||
|           border-radius: 2px;
 | ||
|           border: 1px solid #D0D4DC;
 | ||
|           margin-right: 8px;
 | ||
|           box-sizing: border-box;
 | ||
|           cursor: pointer;
 | ||
|           .dept-name{
 | ||
|             display: inline-block;
 | ||
|             width: 200px;
 | ||
|             height: 22px;
 | ||
|             overflow:hidden;
 | ||
|             white-space: nowrap;
 | ||
|             text-overflow: ellipsis; 
 | ||
|             vertical-align: bottom;
 | ||
|           }
 | ||
|           .el-icon-arrow-down{
 | ||
|             vertical-align: middle;
 | ||
|           }
 | ||
|         }
 | ||
|         .active{
 | ||
|           border: 1px solid #26f;
 | ||
|           color: #26f;
 | ||
|         }
 | ||
|       }
 | ||
|       .line-content{
 | ||
|         display: flex;
 | ||
|         .flex1{
 | ||
|           flex: 1;
 | ||
|           margin-right: 16px;
 | ||
|           .header{
 | ||
|             padding: 16px;
 | ||
|             width: 100%;
 | ||
|             height: 90px;
 | ||
|             background: #F9F9F9;
 | ||
|             border-radius: 2px;
 | ||
|             box-sizing: border-box;
 | ||
|             margin-bottom: 16px;
 | ||
|             p{
 | ||
|               font-size: 14px;
 | ||
|               font-family: MicrosoftYaHeiSemibold;
 | ||
|               color: #222;
 | ||
|               line-height: 22px;
 | ||
|               margin-bottom: 4px;
 | ||
|             }
 | ||
|             h2{
 | ||
|               font-size: 24px;
 | ||
|               font-family: DINAlternate-Bold, DINAlternate;
 | ||
|               font-weight: bold;
 | ||
|               color: #26F;
 | ||
|               line-height: 32px;
 | ||
|             }
 | ||
|           }
 | ||
|           .chart-content{
 | ||
|             width: 100%;
 | ||
|             padding: 16px;
 | ||
|             background: #F9F9F9;
 | ||
|             border-radius: 2px;
 | ||
|             box-sizing: border-box;
 | ||
|             .chart-title{
 | ||
|               font-size: 16px;
 | ||
|               font-family: MicrosoftYaHeiSemibold;
 | ||
|               color: #333;
 | ||
|               line-height: 24px;
 | ||
|             }
 | ||
|             .chart-box{
 | ||
|               width: 100%;
 | ||
|               height: 280px;
 | ||
|             }
 | ||
|           }
 | ||
|         }
 | ||
| 
 | ||
|       }
 | ||
|       #departBarChart{
 | ||
|         width: 100%;
 | ||
|         height: 300px;
 | ||
|       }
 | ||
|     }
 | ||
| 
 | ||
| 
 | ||
|     ::v-deep .el-calendar-table:not(.is-range) td.next,
 | ||
|     ::v-deep .el-calendar-table:not(.is-range) td.prev {
 | ||
|       color: #ccc;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table .el-calendar-day{
 | ||
|       height: 48px;
 | ||
|       line-height: 32px;
 | ||
|       padding-left: 12px;
 | ||
|       font-size: 14px;
 | ||
|       font-family: ArialMT;
 | ||
|     }
 | ||
|     .el-calendar-table:not(.is-range) td .current{
 | ||
|       color: #888;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar__header{
 | ||
|       display: none;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar__body{
 | ||
|       padding: 0;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table thead th:nth-of-type(1){
 | ||
|       border-left: 1px solid #eee;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table thead th:nth-of-type(7){
 | ||
|       border-right: 1px solid #eee;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table tr td:first-child {
 | ||
|       border-left: 1px solid #eee;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table tr:first-child td {
 | ||
|       border-top: 1px solid #eee;
 | ||
|     }
 | ||
|     ::v-deep .el-calendar-table td {
 | ||
|       border-bottom: 1px solid #eee;
 | ||
|       border-right: 1px solid #eee;
 | ||
|     }
 | ||
|     ::v-deep .el-timeline-item__timestamp.is-top{
 | ||
|       margin-bottom: 0;
 | ||
|       padding-top: 0;
 | ||
|     }
 | ||
|     ::v-deep .el-timeline-item__node{
 | ||
|       background-color: #26F;
 | ||
|       width: 8px;
 | ||
|       height: 8px;
 | ||
|       border-radius: 50%;
 | ||
|       left: 1px;
 | ||
|     }
 | ||
|     ::v-deep .el-card{
 | ||
|       border: none;
 | ||
|     }
 | ||
|     ::v-deep .el-card__body{
 | ||
|       padding: 8px;
 | ||
|     }
 | ||
|   }
 | ||
| 
 | ||
|   ::v-deep .ai-list__content {
 | ||
|     padding: 0!important;
 | ||
| 
 | ||
|     .ai-list__content--right-wrapper {
 | ||
|       background: transparent!important;
 | ||
|       box-shadow: none!important;
 | ||
|       margin: 0!important;
 | ||
|       padding: 0 0 0!important;
 | ||
|     }
 | ||
|   }
 | ||
| 
 | ||
|   ::v-deep .AiPicker{
 | ||
|     display: inline-block;
 | ||
|   }
 | ||
| </style>
 |