|
@@ -0,0 +1,794 @@
|
|
|
+<template>
|
|
|
+ <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
|
+ <a-form @submit="handleSubmit" :form="form">
|
|
|
+ <a-form-item
|
|
|
+ label="出价方式"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="bidType">
|
|
|
+ <a-radio-button v-for="bidType in bidTypeList" :key="bidType.itemValue" :value="bidType.itemValue">
|
|
|
+ {{bidType.itemText}}
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="投放方式"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="flowControlMode">
|
|
|
+ <a-radio-button v-for="flowControlMode in flowControlModeList" :key="flowControlMode.itemValue"
|
|
|
+ :value="flowControlMode.itemValue">
|
|
|
+ {{flowControlMode.itemText}}
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="预算"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="budgetPrice"
|
|
|
+ style="width: 70%">
|
|
|
+ <a-select
|
|
|
+ slot="addonBefore"
|
|
|
+ v-model="budgetPriceMode"
|
|
|
+ v-decorator="['prefix',{ initialValue: 'BUDGET_MODE_DAY' }]"
|
|
|
+ style="width: 100px">
|
|
|
+ <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
|
|
|
+ <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-input>
|
|
|
+ 元
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="投放时间"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group @change="onChangeFlowDate" v-model="flowDateType">
|
|
|
+ <a-radio-button v-for="flowDate in flowDateList" :key="flowDate.itemValue" :value="flowDate.itemValue">
|
|
|
+ {{flowDate.itemText}}
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="起始时间"
|
|
|
+ v-if="showDateFlowRange"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ 开始时间:
|
|
|
+ <a-date-picker v-model="startDate"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ />
|
|
|
+ 结束时间:
|
|
|
+ <a-date-picker v-model="endDate"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="投放时段"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group @change="dateQuantumChange" v-model="dateQuantum">
|
|
|
+ <a-radio-button value="date_unlimited">不限</a-radio-button>
|
|
|
+ <a-radio-button value="date_appoint">指定时间段</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ v-if="showDateQuantumRange"
|
|
|
+ label="设置时间段"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <div id="table_time_selected1" class="table_time_selected1">
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="付费方式"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="priceType">
|
|
|
+ <a-radio-button value="PRICING_OCPM">按展示付费(oCPM)</a-radio-button>
|
|
|
+ <a-radio-button value="PRICING_OCPC">按点击付费(oCPC)</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="目标转化出价"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input-number v-model="convertPrice" :min="0" :max="10" @change="onChange"/>
|
|
|
+ 元
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="过滤已转化用户"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="filterType">
|
|
|
+ <a-radio-button v-for="filterType in filterTypeList" :key="filterType.itemValue"
|
|
|
+ :value="filterType.itemValue">
|
|
|
+ {{filterType.itemText}}
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :wrapperCol="{ span: 24 }"
|
|
|
+ style="text-align: center"
|
|
|
+ >
|
|
|
+ <a-button htmlType="submit" type="primary">提交</a-button>
|
|
|
+ <a-button style="margin-left: 8px">保存</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {deleteAction, postAction, getAction} from '@/api/manage'
|
|
|
+ import $ from 'jquery'
|
|
|
+ import moment from 'moment';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'BaseForm',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startDate:moment(new Date(), "YYYY-MM-dd"),
|
|
|
+ endDate:moment(new Date(), "YYYY-MM-dd"),
|
|
|
+ convertPrice: 0,
|
|
|
+ budgetPrice: 0,
|
|
|
+ budgetPriceMode: 'BUDGET_MODE_DAY',
|
|
|
+ showDateFlowRange: false,
|
|
|
+ showDateQuantumRange:true,
|
|
|
+ flowControlMode: 'FLOW_CONTROL_MODE_FAST',
|
|
|
+ flowDateType: 'SCHEDULE_FROM_NOW',
|
|
|
+ dateQuantum: 'date_unlimited',
|
|
|
+ dateQuantumRange: '',
|
|
|
+ bidType: 'SMART_BID_CUSTOM',
|
|
|
+ bidTypeList: {},
|
|
|
+ priceType: 'PRICING_OCPM',
|
|
|
+ flowControlModeList: {},
|
|
|
+ filterTypeList: {},
|
|
|
+ price: 0,
|
|
|
+ filterType: "NO_EXCLUDE",
|
|
|
+ flowDateList: {},
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ url: {
|
|
|
+ dictListUrl: 'toutiao/dictitem/list',
|
|
|
+ insertUrl:'toutiao/budget/template/insert'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ disabledDate(current) {
|
|
|
+ return current <moment().endOf('day');
|
|
|
+ },
|
|
|
+ handleSubmit(e) {
|
|
|
+ e.preventDefault()
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ console.log('Received values of form: ', values);
|
|
|
+
|
|
|
+ let params = {};
|
|
|
+ this.dateQuantumRange = $("#table_time_selected1_time_num").val();
|
|
|
+ params.bidType = this.bidType;
|
|
|
+ params.flowControlMode = this.flowControlMode;
|
|
|
+ params.budgetPrice = this.budgetPrice;
|
|
|
+ params.budgetPriceMode = this.budgetPriceMode;
|
|
|
+ params.flowDateType = this.flowDateType;
|
|
|
+ params.startDate = this.startDate;
|
|
|
+ params.endDate = this.endDate;
|
|
|
+ params.dateQuantum = this.dateQuantum;
|
|
|
+ params.priceType = this.priceType;
|
|
|
+ params.convertPrice = this.convertPrice;
|
|
|
+ params.filterType = this.filterType;
|
|
|
+ params.dateQuantumRange = this.dateQuantumRange;
|
|
|
+ console.log(params)
|
|
|
+ postAction(this.url.insertUrl,params).then((res)=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ alert("预算模板创建成功");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onChange(value) {
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ dateQuantumChange(value){
|
|
|
+ console.log(this.dateQuantum);
|
|
|
+ if (this.dateQuantum == 'date_unlimited') {
|
|
|
+ this.showDateQuantumRange = true;
|
|
|
+ } else {
|
|
|
+ this.showDateQuantumRange = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onChangeFlowDate() {
|
|
|
+ console.log(this.flowDate)
|
|
|
+ if (this.flowDate == 'SCHEDULE_FROM_NOW') {
|
|
|
+ this.showDateFlowRange = false;
|
|
|
+ } else {
|
|
|
+ this.showDateFlowRange = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+ //出价方式
|
|
|
+ let params = {};
|
|
|
+ params.dictId = '35c0634f642a0da32dcd2c75b4f03ad9';
|
|
|
+ params.pageSize = '1000';
|
|
|
+ getAction(this.url.dictListUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.bidTypeList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //投放方式(计划投放速度类型)
|
|
|
+ params = {};
|
|
|
+ params.dictId = '46e24e805d5cd0356a9f4560d987a276';
|
|
|
+ params.pageSize = '1000';
|
|
|
+ getAction(this.url.dictListUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.flowControlModeList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //投放时间类型
|
|
|
+ params = {};
|
|
|
+ params.dictId = '4c5bb1a99115c6130d6f71b3784a99ab';
|
|
|
+ params.pageSize = '1000';
|
|
|
+ getAction(this.url.dictListUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.flowDateList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // //付费方式类型
|
|
|
+ // params = {};
|
|
|
+ // params.dictId = '46e24e805d5cd0356a9f4560d987a276';
|
|
|
+ // params.pageSize = '1000';
|
|
|
+ // getAction(this.url.dictListUrl,params).then((res) => {
|
|
|
+ // if (res.success) {
|
|
|
+ // this.flowControlModeList = res.result.records
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ //过滤已转化用户
|
|
|
+ params = {};
|
|
|
+ params.dictId = 'd06027ca9be05d60b2946e5276fa1cba';
|
|
|
+ params.pageSize = '1000';
|
|
|
+ getAction(this.url.dictListUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.filterTypeList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var box_id;
|
|
|
+ var StartTD = null;
|
|
|
+ var StartIndex = null;
|
|
|
+ var EndTD = null;
|
|
|
+ var EndIndex = null;
|
|
|
+ var Selected = 'Selected';
|
|
|
+ var Start_x = null;
|
|
|
+ var Start_y = null;
|
|
|
+ //点击中表格的小时值
|
|
|
+ var hour;
|
|
|
+ //点击选中的星期值
|
|
|
+ var week;
|
|
|
+ //1为这个格子在此次鼠标拖拽过程中被选中(不执行选中方法),0为没选中过
|
|
|
+ var td_state = 0;
|
|
|
+ //生成星期数组
|
|
|
+ var num = ['一','二','三','四','五','六','日'];
|
|
|
+ //生成时间值数组
|
|
|
+ var arr_hour = get_hour_arr();
|
|
|
+
|
|
|
+
|
|
|
+ //按下鼠标左键拖动选中单元格
|
|
|
+ function SelectTD(StartIndex, EndIndex,Selected) {
|
|
|
+
|
|
|
+ var MinX = null;
|
|
|
+ var MaxX = null;
|
|
|
+ var MinY = null;
|
|
|
+ var MaxY = null;
|
|
|
+
|
|
|
+ var coordinate = get_coordinate(StartIndex, EndIndex);
|
|
|
+ MinX = coordinate[0];
|
|
|
+ MaxX = coordinate[1];
|
|
|
+ MinY = coordinate[2];
|
|
|
+ MaxY = coordinate[3];
|
|
|
+
|
|
|
+ for (var i = MinY; i <= MaxY; i++) {
|
|
|
+
|
|
|
+ for (var j = MinX; j <= MaxX; j++) {
|
|
|
+
|
|
|
+ var SelectTR = $('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
+ var td_class = $("td", SelectTR).eq(j).attr('class');
|
|
|
+ td_state = $("td", SelectTR).eq(j).attr("td_state");
|
|
|
+
|
|
|
+ //在同一次鼠标按下的过程中,选中过的表格不进行选中或取消操作
|
|
|
+ if (!td_state) {
|
|
|
+ if (td_class == Selected) {
|
|
|
+ $("td", SelectTR).eq(j).removeClass(Selected);
|
|
|
+ }else{
|
|
|
+ //筛选掉标明为星期的表格
|
|
|
+ $("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
+ }
|
|
|
+ $("td", SelectTR).eq(j).attr("td_state", '1');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //改变二进制值
|
|
|
+ get_time_val();
|
|
|
+ //改变日期显示
|
|
|
+ convert_date();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //点击选中或去掉选中整行、整列
|
|
|
+ function SelectTD_click(StartIndex, EndIndex,Selected) {
|
|
|
+
|
|
|
+ var MinX = null;
|
|
|
+ var MaxX = null;
|
|
|
+ var MinY = null;
|
|
|
+ var MaxY = null;
|
|
|
+ var Selected_true = 0;
|
|
|
+ var Selected_false = 0;
|
|
|
+
|
|
|
+ var coordinate = get_coordinate(StartIndex, EndIndex);
|
|
|
+ MinX = coordinate[0];
|
|
|
+ MaxX = coordinate[1];
|
|
|
+ MinY = coordinate[2];
|
|
|
+ MaxY = coordinate[3];
|
|
|
+
|
|
|
+ //列出此列当中的表格选中状态
|
|
|
+ for (var i = MinY; i <= MaxY; i++) {
|
|
|
+
|
|
|
+ for (var j = MinX; j <= MaxX; j++) {
|
|
|
+
|
|
|
+ var SelectTR = $('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
+ var td_class = $("td", SelectTR).eq(j).attr('class');
|
|
|
+
|
|
|
+ if (td_class == Selected) {
|
|
|
+ //表格里存在已选中的元素
|
|
|
+ Selected_true = 1;
|
|
|
+ }else{
|
|
|
+ //表格里存在未选中的元素
|
|
|
+ Selected_false = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //执行选中或去掉选中方法
|
|
|
+ for (var i = MinY; i <= MaxY; i++) {
|
|
|
+
|
|
|
+ for (var j = MinX; j <= MaxX; j++) {
|
|
|
+
|
|
|
+ var SelectTR = $('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
+ var td_class = $("td", SelectTR).eq(j).attr('class');
|
|
|
+
|
|
|
+ //一列当中存在已选中与未选中的表格处理:整列全部选中
|
|
|
+ if (Selected_true == 1 && Selected_false == 1) {
|
|
|
+ $("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
+ }else if(Selected_false == 1){
|
|
|
+ //一列当中只存在未选中的表格处理:整列全部选中
|
|
|
+ $("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
+ }else{
|
|
|
+ //一列当中只存在已选中的表格处理:整列全部去掉选中
|
|
|
+ $("td", SelectTR).eq(j).removeClass(Selected);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ //改变二进制值
|
|
|
+ get_time_val();
|
|
|
+ //改变日期显示
|
|
|
+ convert_date();
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取选中范围的开始与结束的坐标
|
|
|
+ function get_coordinate(StartIndex, EndIndex){
|
|
|
+ var MinX = null;
|
|
|
+ var MaxX = null;
|
|
|
+ var MinY = null;
|
|
|
+ var MaxY = null;
|
|
|
+
|
|
|
+ if (StartIndex.x < EndIndex.x) {
|
|
|
+ MinX = StartIndex.x; MaxX = EndIndex.x;
|
|
|
+ }else {
|
|
|
+ MinX = EndIndex.x; MaxX = StartIndex.x;
|
|
|
+ }
|
|
|
+ if (StartIndex.y < EndIndex.y) {
|
|
|
+ MinY = StartIndex.y; MaxY = EndIndex.y;
|
|
|
+ } else {
|
|
|
+ MinY = EndIndex.y; MaxY = StartIndex.y;
|
|
|
+ }
|
|
|
+ return [MinX, MaxX, MinY, MaxY];
|
|
|
+ }
|
|
|
+
|
|
|
+ //改变二进制值
|
|
|
+ function get_time_val(){
|
|
|
+ var time_type = '';
|
|
|
+ $('#' + box_id + ' table tbody').find('td').each(function(k){
|
|
|
+ var Selected_type = $(this).attr('class');
|
|
|
+ var week = $(this).attr('week');
|
|
|
+
|
|
|
+ if (Selected_type == Selected && !week) {
|
|
|
+ time_type +="1";
|
|
|
+ }else if(!week){
|
|
|
+ time_type +="0";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#'+box_id+'_time_num').val(time_type);
|
|
|
+ // convert_date();
|
|
|
+ }
|
|
|
+ //二进制数转换日期
|
|
|
+ function convert_date(external_binary){
|
|
|
+ //初始化周数数组
|
|
|
+ var time_week_arr = [];
|
|
|
+ if (!external_binary) {
|
|
|
+ //内部调用,进行选中表格和输出时间操作。
|
|
|
+ var binary = $('#'+box_id+'_time_num').val();
|
|
|
+ }else{
|
|
|
+ //存在外部参入传入,此函数进行返回时间操作。
|
|
|
+ var date_html = '';
|
|
|
+ var binary = external_binary;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var y = 0; y < 7; y++) {
|
|
|
+ //初始化小时数组
|
|
|
+ var time_hour_arr = [];
|
|
|
+
|
|
|
+ for (var x = 0; x < 48; x++) {
|
|
|
+
|
|
|
+ //获取当前点击元素的位置
|
|
|
+ if (y==0) {
|
|
|
+ var index = x;
|
|
|
+ }else{
|
|
|
+ var index = (y*48)+x;
|
|
|
+ }
|
|
|
+ //获取td对应的二进制值
|
|
|
+ var Selected_val = binary.charAt(index);
|
|
|
+
|
|
|
+ if (Selected_val ==1) {
|
|
|
+ //组装保存进数组里
|
|
|
+ if (time_hour_arr == []) {
|
|
|
+ //表格的第一个位置的值
|
|
|
+ time_hour_arr = arr_hour[x];
|
|
|
+ }else if(binary.charAt(index-1) == 1 && binary.charAt(index-2) == 1 ){
|
|
|
+ //此位置(包含上一行)的前两个都为选中时
|
|
|
+
|
|
|
+ if (x==0 && binary.charAt(index+1) == 0) {
|
|
|
+ //选中行里第一个,后一个表格没选中,加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
|
|
|
+ }else if(x==0 && binary.charAt(index+1) == 1){
|
|
|
+ //选中行里第一个,后一个表格已选中,不加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = arr_hour[x];
|
|
|
+ }else if(x==1 && binary.charAt(index-1) == 0){
|
|
|
+ //选中行里第二个,上一个表格没选中,加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = arr_hour[x] +', ';
|
|
|
+ }else if(x==1 && binary.charAt(index-1) == 1){
|
|
|
+ //选中行里第二个,上一个表格已选中,前加-号,后加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] +', ';
|
|
|
+ }else{
|
|
|
+ //选中行里除第一、二的表格以外,前一个表格已经选中,此元素前加- 后加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length-1] = '-' + arr_hour[x] +', ';
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(binary.charAt(index-1) == 1 && x>0){
|
|
|
+ //选中的前一个已选中,且此次选中的不是行里第一个,此次选中的元素前加-后加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
|
|
|
+ }else if(binary.charAt(index+1) != 1 || x==47){
|
|
|
+ //选中的后一个没选中,或者此次选中的是行里最后一个,此次选中的元素加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
|
|
|
+ }else{
|
|
|
+ //选中的后一已选中,此次选中的元素不加逗号
|
|
|
+ time_hour_arr[time_hour_arr.length] = arr_hour[x] ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ time_week_arr[y] = time_hour_arr;
|
|
|
+
|
|
|
+ }
|
|
|
+// console.info(box_id);
|
|
|
+ if (!external_binary) {
|
|
|
+ $('#'+box_id+'_time_seled').html('');
|
|
|
+ }
|
|
|
+ //再次组装并输出数组
|
|
|
+ var time_html = [];
|
|
|
+ for(var y = 0; y < 7; y++){
|
|
|
+
|
|
|
+ for(var x = 0; x < time_week_arr[y].length; x++){
|
|
|
+
|
|
|
+ if (!time_html[y]) {
|
|
|
+ time_html[y] = time_week_arr[y][x];
|
|
|
+ }else{
|
|
|
+ time_html[y] += time_week_arr[y][x];
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (time_html[y]) {
|
|
|
+ time_html[y]= time_html[y].substring(0,time_html[y].length-2);
|
|
|
+
|
|
|
+ if (!external_binary) {
|
|
|
+ $('#'+box_id+'_time_seled').append('<div>星期'+num [y] + ' (' +time_html[y] + ')' + '</div>');
|
|
|
+ }else{
|
|
|
+ date_html += '星期'+num [y] + ' (' +time_html[y] + ')' + ', ';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (external_binary) {
|
|
|
+ return date_html;
|
|
|
+ }
|
|
|
+ // console.info(time_html);
|
|
|
+ }
|
|
|
+
|
|
|
+ //生成时间值数组
|
|
|
+ function get_hour_arr(){
|
|
|
+ var arr_hour = [];
|
|
|
+ var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象;
|
|
|
+ var oDate_hour = oDate.getHours();
|
|
|
+ var oDate_minute = oDate.getMinutes();
|
|
|
+ for(var i=0; i<48; i++){
|
|
|
+ if(oDate_minute<10){
|
|
|
+ var oDate_minute = "0"+oDate_minute;
|
|
|
+ }
|
|
|
+ if (i >=1) {
|
|
|
+ oDate.setMinutes(oDate.getMinutes() + 30);
|
|
|
+ oDate_hour = oDate.getHours();
|
|
|
+ oDate_minute = oDate.getMinutes();
|
|
|
+ if(oDate_minute<10){
|
|
|
+ var oDate_minute = "0"+oDate_minute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arr_hour[i] = oDate_hour + ':' + oDate_minute;
|
|
|
+ // alert(oDate_hour + ':' + oDate.getMinutes());
|
|
|
+ }
|
|
|
+ return arr_hour;
|
|
|
+ }
|
|
|
+
|
|
|
+ //更新操作
|
|
|
+ function renewal(id){
|
|
|
+ if (id) {
|
|
|
+ box_id = id;
|
|
|
+ }
|
|
|
+ //解绑鼠标移动监听事件
|
|
|
+ $('#' + box_id + ' table tbody tr td').unbind("mouseover");
|
|
|
+ //初始化表格的在此次选中状态
|
|
|
+ $('#' + box_id + ' table tbody tr td').attr("td_state", '');
|
|
|
+ //改变二进制值
|
|
|
+ get_time_val();
|
|
|
+ //改变日期显示
|
|
|
+ convert_date();
|
|
|
+ }
|
|
|
+
|
|
|
+ //二进制数赋值选中表格
|
|
|
+ function binary_selected(){
|
|
|
+ var default_time_val = $('#'+box_id+' .default_time_val').val();
|
|
|
+ if (default_time_val) {
|
|
|
+ for(i=0 ; i<336; i++){
|
|
|
+ var td_selected = default_time_val.charAt(i);
|
|
|
+ if (td_selected != 0 ) {
|
|
|
+ $('#' + box_id + ' table tbody tr td').eq(i).attr('class','Selected');
|
|
|
+ //更新操作,显示文字形日期
|
|
|
+ renewal();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //实例化程序
|
|
|
+ function load_time_table(id){
|
|
|
+ //包住table的元素id
|
|
|
+ box_id = id;
|
|
|
+ var html;
|
|
|
+ html = '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid" onselectstart="return false" onselect="document.selection.empty()">';
|
|
|
+ html += '<thead>';
|
|
|
+ html += '<tr>';
|
|
|
+ html += '<th></th>';
|
|
|
+ html += '<th colSpan="24">上午</th>';
|
|
|
+ html += '<th colSpan="24">下午</th>';
|
|
|
+ html += '</tr>';
|
|
|
+ html += '<tr class="hour">';
|
|
|
+ html += '<th></th>';
|
|
|
+ html += '</tr>';
|
|
|
+ html += '</thead>';
|
|
|
+ html += '<tbody></tbody>';
|
|
|
+ html += '</table>';
|
|
|
+ html += '<input class="focus" style="opacity: 0;">';
|
|
|
+ html += '<div id="'+box_id+'_time_seled"></div>';
|
|
|
+ html += '<input v-model="dateQuantumRange" type="hidden" id="'+box_id+'_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="">';
|
|
|
+ $('#'+box_id).append(html);
|
|
|
+ var html_tbody_td = '';
|
|
|
+ var html_thead_td = '';
|
|
|
+
|
|
|
+ //创建表格
|
|
|
+ for (var i = 0; i < 7; i++) {
|
|
|
+ var week = i+1;
|
|
|
+ html_tbody_td += '<tr>';
|
|
|
+ for (var j = 0; j < 49; j++){
|
|
|
+ if (j==0) {
|
|
|
+ html_tbody_td += '<th week="'+week+'">周' + num[i] + '</th>';
|
|
|
+ }else{
|
|
|
+ html_tbody_td += '<td>' + '</td>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ html_tbody_td += '</tr>';
|
|
|
+ }
|
|
|
+
|
|
|
+ //创建表格小时栏目
|
|
|
+ for(var i =0; i<= 23; i++){
|
|
|
+ html_thead_td += '<td colSpan="2" hour="'+i+'">'+ i + '</td>';
|
|
|
+ }
|
|
|
+ $('#' + box_id + ' table thead .hour').append(html_thead_td);
|
|
|
+ $('#' + box_id + ' table tbody').html(html_tbody_td);
|
|
|
+
|
|
|
+ //检查是否有赋有二进制值,如有,将选中相应的表格
|
|
|
+ binary_selected();
|
|
|
+
|
|
|
+ //控制器,控制当前在哪个表格进行操作
|
|
|
+ $('.plug-timer-grid').hover(function (e) {
|
|
|
+ if(1 != e.which){ //判断是否为左击
|
|
|
+ var id = $(this).parent().attr('id');
|
|
|
+ box_id = id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //清除所有选中项
|
|
|
+ $('.clear').click(function(){
|
|
|
+ $(this).parent().find('td').removeClass(Selected);
|
|
|
+ var id =$(this).parent().attr('id');
|
|
|
+ renewal(id);
|
|
|
+ });
|
|
|
+
|
|
|
+ //点击小时选中或去掉整列处理块
|
|
|
+ $('#' + box_id + ' table thead tr td').click(function(){
|
|
|
+ hour = $(this).attr('hour');
|
|
|
+ if (hour>=0) {
|
|
|
+ var rows = $('#' + box_id + ' table tbody tr').length;
|
|
|
+ Start_x = ($(this).index())*2-1;
|
|
|
+ Start_y = 0;
|
|
|
+
|
|
|
+ StartIndex = { x: Start_x, y: Start_y };
|
|
|
+
|
|
|
+ EndTD = $(this);
|
|
|
+ var x = ($(this).index())*2-2;
|
|
|
+ var y = rows -1; //为了配合for计算公式-1
|
|
|
+
|
|
|
+ EndIndex = { x: x, y: y };
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
+ SelectTD_click(StartIndex, EndIndex, Selected);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //点击星期选中或去掉整行处理块
|
|
|
+ $('#' + box_id + ' table tbody tr th').click(function(){
|
|
|
+ var week = $(this).attr('week');
|
|
|
+ if (week>=0) {
|
|
|
+ var line = $('#' + box_id + ' table tbody tr td').length/$('#' + box_id + ' table tbody tr').length;
|
|
|
+
|
|
|
+ Start_x = 0;
|
|
|
+ Start_y = $(this).parent().index();
|
|
|
+
|
|
|
+ StartIndex = { x: Start_x, y: Start_y };
|
|
|
+
|
|
|
+ EndTD = $(this);
|
|
|
+ var y = $(this).parent().index();
|
|
|
+ var x = line-1; //为了配合for计算公式-1
|
|
|
+
|
|
|
+ EndIndex = { x: x, y: y };
|
|
|
+
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
+ SelectTD_click(StartIndex, EndIndex, Selected);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
|
|
|
+ $('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
|
|
|
+ //记录刚开始点击的元素位置
|
|
|
+ Start_x = $(this).index()-1;
|
|
|
+ Start_y = $(this).parent().index();
|
|
|
+ StartIndex = { x: Start_x, y: Start_y };
|
|
|
+
|
|
|
+ EndTD = $(this);
|
|
|
+ var x = $(this).index()-1;
|
|
|
+ var y = $(this).parent().index();
|
|
|
+ EndIndex = { x: x, y: y };
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
+ SelectTD(StartIndex, EndIndex, Selected);
|
|
|
+
|
|
|
+ StartTD = $(this);
|
|
|
+
|
|
|
+ StartIndex = { x: Start_x, y: Start_y };
|
|
|
+
|
|
|
+ //监听鼠标移动事件,实现改变后续鼠标拖拽时候的表格选中状态
|
|
|
+ $('#' + box_id + ' table tbody tr td').mouseover(function(e){
|
|
|
+ EndTD = $(this);
|
|
|
+ var x = $(this).index()-1;
|
|
|
+ var y = $(this).parent().index();
|
|
|
+ EndIndex = { x: x, y: y };
|
|
|
+ if(1 != e.which){ //判断是否为左击
|
|
|
+ $('#' + box_id + ' table tbody tr td').unbind("mouseover");
|
|
|
+ }
|
|
|
+ //去除停留在td上的光标
|
|
|
+ $('#' + box_id + ' .focus').focus();
|
|
|
+ SelectTD(StartIndex, EndIndex, Selected);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ //放开鼠标左键时,初始化相关参数和解绑相关监听
|
|
|
+ $('html').unbind("mouseup").bind("mouseup", function () {
|
|
|
+ renewal();
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /*外部调用接口*/
|
|
|
+
|
|
|
+ //解绑鼠标松开监听事件
|
|
|
+ function unbundle_mouseover(){
|
|
|
+ $('html').unbind("mouseup");
|
|
|
+ }
|
|
|
+
|
|
|
+ /*二进制获取转换后的时间*/
|
|
|
+ function get_time_html(binary){
|
|
|
+ return convert_date(binary);
|
|
|
+ }
|
|
|
+
|
|
|
+ $(function(){
|
|
|
+ load_time_table('table_time_selected1');
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+<style type="text/css">
|
|
|
+ .plug-timer-grid{width: 80%;}
|
|
|
+ .plug-timer-grid td, .plug-timer-grid th{border: 1px solid #97B4D1;text-align: center; /*cursor:pointer;*/}
|
|
|
+ .Selected{background-color: rgb(102,162,243);opacity: 0.5;}
|
|
|
+
|
|
|
+ .plug-timer-grid {
|
|
|
+ border-collapse: collapse;
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+ .plug-timer-grid thead tr{
|
|
|
+ display: table-row;
|
|
|
+ vertical-align: inherit;
|
|
|
+ border-color: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ table td{
|
|
|
+ height: 30px;
|
|
|
+ max-width: 5px;
|
|
|
+ border: 1px solid #dfe6ec;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: background .5s;
|
|
|
+ -webkit-transition: background .5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plug-timer-grid tbody th{
|
|
|
+ width: 4%;
|
|
|
+ }
|
|
|
+ .plug-timer-grid tbody tr td{
|
|
|
+ width: 2%;
|
|
|
+ }
|
|
|
+ .clear{
|
|
|
+ margin:20px 0px 20px 0px;
|
|
|
+ }
|
|
|
+</style>
|