|
@@ -0,0 +1,905 @@
|
|
|
|
+<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: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group buttonStyle="solid" @change="showBudgetStatusChange" v-model="campaignBudget">
|
|
|
|
+ <a-radio-button value="UNLIMITED">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="预算金额"
|
|
|
|
+ v-if="showBudgetDaily"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-input
|
|
|
|
+ v-model="dayBudget"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'confirm_dayBudget',
|
|
|
|
+ {rules: [{ required: true, message: ' ' },
|
|
|
|
+ {validator: handleConfirmValue}]}
|
|
|
|
+ ]"
|
|
|
|
+ placeholder="不小于500,不超过100000000,仅支持输入自然数" type="number" style="width: 70%"></a-input>
|
|
|
|
+ 元
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="投放方式"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="speed">
|
|
|
|
+ <a-radio-button value='1'>快速投放</a-radio-button>
|
|
|
|
+ <a-radio-button value='2'>平滑投放</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="排期"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="schedulingType" @change="showSetDate">
|
|
|
|
+ <a-radio-button value='1'>从今天开始长期投放</a-radio-button>
|
|
|
|
+ <a-radio-button value='2'>设置开始和结束日期</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item label="设置时间"
|
|
|
|
+ v-if="showTime"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-range-picker
|
|
|
|
+ name="buildTime"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ v-model="time"/>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="投放时段"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="scheduleTimeType" @change="showSetScheduleTime">
|
|
|
|
+ <a-radio-button value='1'>全天</a-radio-button>
|
|
|
|
+ <a-radio-button value='2'>特定时间</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="设置时间段"
|
|
|
|
+ v-if="showScheduleTime"
|
|
|
|
+ v-model="scheduleTime"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 20}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 16} }">
|
|
|
|
+ <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: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="showMode">
|
|
|
|
+ <a-radio-button value='1'>轮播</a-radio-button>
|
|
|
|
+ <a-radio-button value='2'>优先</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="优化目标出价类型"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="bidType" buttonStyle="solid" @change="showBidType">
|
|
|
|
+ <a-radio-button value='2'>CPC</a-radio-button>
|
|
|
|
+ <a-radio-button value='20'>ECPC</a-radio-button>
|
|
|
|
+ <a-radio-button value='6'>OCPC</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="出价"
|
|
|
|
+ v-if="showBid"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-input
|
|
|
|
+ v-model="bid"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'confirm_bid',
|
|
|
|
+ {rules: [{ required: true, message: ' ' },
|
|
|
|
+ {validator: handleConfirmBid}]}
|
|
|
|
+ ]"
|
|
|
|
+ placeholder="不低于0.2元,不高于100元" style="width: 70%"></a-input>
|
|
|
|
+ 元
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="优化目标"
|
|
|
|
+ v-if="showOcpxActionType"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="ocpxActionType" @change="showBidType">
|
|
|
|
+ <a-radio-button value="2">行为数</a-radio-button>
|
|
|
|
+ <a-radio-button value="180">激活数</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="出价"
|
|
|
|
+ v-if="showCpaBid"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-input
|
|
|
|
+ v-model="cpaBid"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'confirm_cap_bid',
|
|
|
|
+ {rules: [{ required: true, message: ' ' },
|
|
|
|
+ {validator: handleConfirmCpaBid}]}
|
|
|
|
+ ]"
|
|
|
|
+ placeholder="请填写出价金额" style="width: 70%"></a-input>
|
|
|
|
+ 元
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="广告组名称"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
|
+ <a-input v-model="unitName" placeholder="请填写广告组名称" style="width: 70%"></a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :wrapperCol="{ span: 20 }"
|
|
|
|
+ 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 {postAction} from '@/api/manage'
|
|
|
|
+ import moment from "moment"
|
|
|
|
+ import {mapGetters} from 'vuex'
|
|
|
|
+ import jq from 'jquery'
|
|
|
|
+
|
|
|
|
+ let dateQuantumRangeConst = '';
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ campaignBudget: 'UNLIMITED',
|
|
|
|
+ dayBudget: 0,
|
|
|
|
+ showBudgetDaily: false,
|
|
|
|
+ speed: '1', // 1 快速投放 2平滑投放
|
|
|
|
+ schedulingType: '1',// 1 从今天开始长期投放 2 设置开始和结束日期
|
|
|
|
+ showTime: false,
|
|
|
|
+ time: [],
|
|
|
|
+ scheduleTimeType: '1',
|
|
|
|
+ showScheduleTime: false,
|
|
|
|
+ scheduleTime: '',// 投放时间选择值
|
|
|
|
+ showMode: '1', // 1 轮播 2 优选
|
|
|
|
+ bidType: '2',
|
|
|
|
+ showBid: true,
|
|
|
|
+ bid: 0,// bid_type 为 CPC/eCPC 出价
|
|
|
|
+ ocpxActionType: '2',// 2行为数 180 激活数
|
|
|
|
+ showOcpxActionType: false,
|
|
|
|
+ showCpaBid: false,
|
|
|
|
+ cpaBid: 0,// bid_type 是 OCPC 时该字段必填
|
|
|
|
+ page: 2,// 资源位置
|
|
|
|
+ unitName: "_" + moment().format('YYYY-MM-DD HH:mm'),//广告组名称
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ url: {
|
|
|
|
+ insertTemplateUrl: '/kuaishou/kuaiShouGroupCreateTemplate/insert'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapGetters(["nickname", "avatar", "userInfo"]),
|
|
|
|
+
|
|
|
|
+ showBidType() {
|
|
|
|
+ if (this.bidType == '6') {
|
|
|
|
+ this.showBid = false;
|
|
|
|
+ this.showOcpxActionType = true;
|
|
|
|
+ this.showCpaBid = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.showBid = true;
|
|
|
|
+ this.showOcpxActionType = false;
|
|
|
|
+ this.showCpaBid = false;
|
|
|
|
+ }
|
|
|
|
+ this.unitName = "_" + moment().format('YYYY-MM-DD HH:mm');
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ showSetScheduleTime() {
|
|
|
|
+ if (this.scheduleTimeType == 2) {
|
|
|
|
+ this.showScheduleTime = true;
|
|
|
|
+ jq(function () {
|
|
|
|
+ load_time_table('table_time_selected1', dateQuantumRangeConst);
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.showScheduleTime = false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ showSetDate() {
|
|
|
|
+ if (this.schedulingType == '2') {
|
|
|
|
+ this.showTime = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.showTime = false;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
|
+ if (this.dayBudget == '' || this.dayBudget <= 500 || this.dayBudget >= 100000000) {
|
|
|
|
+ callback('请输入正确预算金额')
|
|
|
|
+ }
|
|
|
|
+ callback()
|
|
|
|
+ },
|
|
|
|
+ handleConfirmBid(rule, value, callback) {
|
|
|
|
+ if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
|
|
|
|
+ callback('不得低于0.2元,不得高于100元')
|
|
|
|
+ }
|
|
|
|
+ callback()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleConfirmCpaBid(rule, value, callback) {
|
|
|
|
+ if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
|
|
|
|
+ callback('金额不得低于1元,不得高于3000元')
|
|
|
|
+ }
|
|
|
|
+ if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
|
|
|
|
+ callback('金额不得低于5元,不得高于3000元')
|
|
|
|
+ }
|
|
|
|
+ callback()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ showBudgetStatusChange() {
|
|
|
|
+ if (this.campaignBudget == 'AS_BUDGET') {
|
|
|
|
+ this.showBudgetDaily = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.showBudgetDaily = false;
|
|
|
|
+ this.dayBudget = '0';
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ handleSubmit(e) {
|
|
|
|
+ e.preventDefault()
|
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ console.log('Received values of form: ', values);
|
|
|
|
+ console.log('预算金额: ', this.dayBudget);
|
|
|
|
+ console.log('投放方式: ', this.speed);
|
|
|
|
+
|
|
|
|
+ if (this.schedulingType == '1') {
|
|
|
|
+ console.log('开始投放时间: ', moment().format('YYYY-MM-DD'));
|
|
|
|
+ }
|
|
|
|
+ if (this.schedulingType == '2') {
|
|
|
|
+ console.log('开始投放时间: ', moment(this.time[0]).format('YYYY-MM-DD'));
|
|
|
|
+ console.log('结束投放时间: ', moment(this.time[1]).format('YYYY-MM-DD'));
|
|
|
|
+ }
|
|
|
|
+ if (this.scheduleTimeType == '2') {
|
|
|
|
+ this.scheduleTime = jq("#table_time_selected1_time_num").val();
|
|
|
|
+ console.log('投放时间段: ', this.scheduleTime);
|
|
|
|
+ }
|
|
|
|
+ console.log('出价方式:: ', this.bidType);
|
|
|
|
+ if (this.bidType == '2' || this.bidType == '20') {
|
|
|
|
+ console.log('出价金额,bid:: ', this.bid);
|
|
|
|
+ }
|
|
|
|
+ if (this.bidType == '6') {
|
|
|
|
+ console.log('优化目标:', this.ocpxActionType);
|
|
|
|
+ console.log('出价金额,cpaBid:', this.cpaBid);
|
|
|
|
+ }
|
|
|
|
+ console.log('资源位置: ', this.page);
|
|
|
|
+ console.log('广告组名称: ', this.unitName);
|
|
|
|
+ let params = {};
|
|
|
|
+ params.dayBudget = this.dayBudget;
|
|
|
|
+ params.speed = this.speed;
|
|
|
|
+ if (this.schedulingType == '1') {
|
|
|
|
+ params.beginTime = moment().format('YYYY-MM-DD');
|
|
|
|
+ }
|
|
|
|
+ if (this.schedulingType == '2') {
|
|
|
|
+ params.beginTime = moment(this.time[0]).format('YYYY-MM-DD');
|
|
|
|
+ params.endTime = moment(this.time[1]).format('YYYY-MM-DD');
|
|
|
|
+ }
|
|
|
|
+ if (this.scheduleTimeType == '2') {
|
|
|
|
+ this.scheduleTime = jq("#table_time_selected1_time_num").val();
|
|
|
|
+ params.scheduleTime = this.scheduleTime;
|
|
|
|
+ }
|
|
|
|
+ params.bidType = this.bidType;
|
|
|
|
+ if (this.bidType == '2' || this.bidType == '20') {
|
|
|
|
+ params.bid = this.bid * 1000;
|
|
|
|
+ }
|
|
|
|
+ if (this.bidType == '6') {
|
|
|
|
+ params.ocpxActionType = this.ocpxActionType;
|
|
|
|
+ params.cpaBid = this.cpaBid * 1000;
|
|
|
|
+ }
|
|
|
|
+ params.page = this.page;
|
|
|
|
+ params.showModel = this.showMode;
|
|
|
|
+ params.unitName = this.unitName;
|
|
|
|
+ params.loginId = this.userInfo().id;
|
|
|
|
+ console.log(params)
|
|
|
|
+ postAction(this.url.insertTemplateUrl, params).then((res) => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ alert("广告组模板创建成功");
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onChange(value) {
|
|
|
|
+ console.log(value);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ 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 = jq('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
|
+ var td_class = jq("td", SelectTR).eq(j).attr('class');
|
|
|
|
+ td_state = jq("td", SelectTR).eq(j).attr("td_state");
|
|
|
|
+
|
|
|
|
+ //在同一次鼠标按下的过程中,选中过的表格不进行选中或取消操作
|
|
|
|
+ if (!td_state) {
|
|
|
|
+ if (td_class == Selected) {
|
|
|
|
+ jq("td", SelectTR).eq(j).removeClass(Selected);
|
|
|
|
+ } else {
|
|
|
|
+ //筛选掉标明为星期的表格
|
|
|
|
+ jq("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
|
+ }
|
|
|
|
+ jq("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 = jq('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
|
+ var td_class = jq("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 = jq('#' + box_id + ' table tbody tr ').eq(i);
|
|
|
|
+ var td_class = jq("td", SelectTR).eq(j).attr('class');
|
|
|
|
+
|
|
|
|
+ //一列当中存在已选中与未选中的表格处理:整列全部选中
|
|
|
|
+ if (Selected_true == 1 && Selected_false == 1) {
|
|
|
|
+ jq("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
|
+ } else if (Selected_false == 1) {
|
|
|
|
+ //一列当中只存在未选中的表格处理:整列全部选中
|
|
|
|
+ jq("td", SelectTR).eq(j).attr("class", Selected);
|
|
|
|
+ } else {
|
|
|
|
+ //一列当中只存在已选中的表格处理:整列全部去掉选中
|
|
|
|
+ jq("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 = '';
|
|
|
|
+ jq('#' + box_id + ' table tbody').find('td').each(function (k) {
|
|
|
|
+ var Selected_type = jq(this).attr('class');
|
|
|
|
+ var week = jq(this).attr('week');
|
|
|
|
+
|
|
|
|
+ if (Selected_type == Selected && !week) {
|
|
|
|
+ time_type += "1";
|
|
|
|
+ } else if (!week) {
|
|
|
|
+ time_type += "0";
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ jq('#' + box_id + '_time_num').val(time_type);
|
|
|
|
+ // convert_date();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //二进制数转换日期
|
|
|
|
+ function convert_date(external_binary) {
|
|
|
|
+ //初始化周数数组
|
|
|
|
+ var time_week_arr = [];
|
|
|
|
+ if (!external_binary) {
|
|
|
|
+ //内部调用,进行选中表格和输出时间操作。
|
|
|
|
+ var binary = jq('#' + 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) {
|
|
|
|
+ jq('#' + 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) {
|
|
|
|
+ jq('#' + 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;
|
|
|
|
+ }
|
|
|
|
+ return arr_hour;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //更新操作
|
|
|
|
+ function renewal(id) {
|
|
|
|
+ if (id) {
|
|
|
|
+ box_id = id;
|
|
|
|
+ }
|
|
|
|
+ //解绑鼠标移动监听事件
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
|
|
|
|
+ //初始化表格的在此次选中状态
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').attr("td_state", '');
|
|
|
|
+ //改变二进制值
|
|
|
|
+ get_time_val();
|
|
|
|
+ //改变日期显示
|
|
|
|
+ convert_date();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //二进制数赋值选中表格
|
|
|
|
+ function binary_selected() {
|
|
|
|
+ var default_time_val = jq('#' + box_id + ' .default_time_val').val();
|
|
|
|
+ if (default_time_val) {
|
|
|
|
+ for (var i = 0; i < 336; i++) {
|
|
|
|
+ var td_selected = default_time_val.charAt(i);
|
|
|
|
+ if (td_selected != 0) {
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').eq(i).attr('class', 'Selected');
|
|
|
|
+ //更新操作,显示文字形日期
|
|
|
|
+ renewal();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //实例化程序
|
|
|
|
+ function load_time_table(id, value) {
|
|
|
|
+ //包住table的元素id
|
|
|
|
+ box_id = id;
|
|
|
|
+ var html;
|
|
|
|
+ html = '<input type="hidden" class="default_time_val" value="' + value + '"/>';
|
|
|
|
+ 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" type="hidden" style="opacity: 0;">';
|
|
|
|
+ html += '<div id="' + box_id + '_time_seled" style="line-height: 15px;font-size:10px;"></div>';
|
|
|
|
+ html += '<input type="hidden" id="' + box_id + '_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="' + value + '">';
|
|
|
|
+ jq('#' + box_id).html('');
|
|
|
|
+ jq('#' + 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>';
|
|
|
|
+ }
|
|
|
|
+ jq('#' + box_id + ' table thead .hour').append(html_thead_td);
|
|
|
|
+ jq('#' + box_id + ' table tbody').html(html_tbody_td);
|
|
|
|
+ //检查是否有赋有二进制值,如有,将选中相应的表格
|
|
|
|
+ binary_selected();
|
|
|
|
+
|
|
|
|
+ //控制器,控制当前在哪个表格进行操作
|
|
|
|
+ jq('.plug-timer-grid').hover(function (e) {
|
|
|
|
+ if (1 != e.which) { //判断是否为左击
|
|
|
|
+ var id = jq(this).parent().attr('id');
|
|
|
|
+ box_id = id;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ //清除所有选中项
|
|
|
|
+ jq('.clear').click(function () {
|
|
|
|
+ jq(this).parent().find('td').removeClass(Selected);
|
|
|
|
+ var id = jq(this).parent().attr('id');
|
|
|
|
+ renewal(id);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ //点击小时选中或去掉整列处理块
|
|
|
|
+ jq('#' + box_id + ' table thead tr td').click(function () {
|
|
|
|
+ hour = jq(this).attr('hour');
|
|
|
|
+ if (hour >= 0) {
|
|
|
|
+ var rows = jq('#' + box_id + ' table tbody tr').length;
|
|
|
|
+ Start_x = (jq(this).index()) * 2 - 1;
|
|
|
|
+ Start_y = 0;
|
|
|
|
+
|
|
|
|
+ StartIndex = {x: Start_x, y: Start_y};
|
|
|
|
+
|
|
|
|
+ EndTD = jq(this);
|
|
|
|
+ var x = (jq(this).index()) * 2 - 2;
|
|
|
|
+ var y = rows - 1; //为了配合for计算公式-1
|
|
|
|
+
|
|
|
|
+ EndIndex = {x: x, y: y};
|
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
|
+ SelectTD_click(StartIndex, EndIndex, Selected);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ //点击星期选中或去掉整行处理块
|
|
|
|
+ jq('#' + box_id + ' table tbody tr th').click(function () {
|
|
|
|
+ var week = jq(this).attr('week');
|
|
|
|
+ if (week >= 0) {
|
|
|
|
+ var line = jq('#' + box_id + ' table tbody tr td').length / jq('#' + box_id + ' table tbody tr').length;
|
|
|
|
+
|
|
|
|
+ Start_x = 0;
|
|
|
|
+ Start_y = jq(this).parent().index();
|
|
|
|
+
|
|
|
|
+ StartIndex = {x: Start_x, y: Start_y};
|
|
|
|
+
|
|
|
|
+ EndTD = jq(this);
|
|
|
|
+ var y = jq(this).parent().index();
|
|
|
|
+ var x = line - 1; //为了配合for计算公式-1
|
|
|
|
+
|
|
|
|
+ EndIndex = {x: x, y: y};
|
|
|
|
+
|
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
|
+ SelectTD_click(StartIndex, EndIndex, Selected);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
|
|
|
|
+ //记录刚开始点击的元素位置
|
|
|
|
+ Start_x = jq(this).index() - 1;
|
|
|
|
+ Start_y = jq(this).parent().index();
|
|
|
|
+ StartIndex = {x: Start_x, y: Start_y};
|
|
|
|
+
|
|
|
|
+ EndTD = jq(this);
|
|
|
|
+ var x = jq(this).index() - 1;
|
|
|
|
+ var y = jq(this).parent().index();
|
|
|
|
+ EndIndex = {x: x, y: y};
|
|
|
|
+ //改变第一次按下鼠标时候的改变选中状态
|
|
|
|
+ SelectTD(StartIndex, EndIndex, Selected);
|
|
|
|
+
|
|
|
|
+ StartTD = jq(this);
|
|
|
|
+
|
|
|
|
+ StartIndex = {x: Start_x, y: Start_y};
|
|
|
|
+
|
|
|
|
+ //监听鼠标移动事件,实现改变后续鼠标拖拽时候的表格选中状态
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').mouseover(function (e) {
|
|
|
|
+ EndTD = jq(this);
|
|
|
|
+ var x = jq(this).index() - 1;
|
|
|
|
+ var y = jq(this).parent().index();
|
|
|
|
+ EndIndex = {x: x, y: y};
|
|
|
|
+ if (1 != e.which) { //判断是否为左击
|
|
|
|
+ jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
|
|
|
|
+ }
|
|
|
|
+ //去除停留在td上的光标
|
|
|
|
+ jq('#' + box_id + ' .focus').focus();
|
|
|
|
+ SelectTD(StartIndex, EndIndex, Selected);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //放开鼠标左键时,初始化相关参数和解绑相关监听
|
|
|
|
+ jq('html').unbind("mouseup").bind("mouseup", function () {
|
|
|
|
+ renewal();
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /*外部调用接口*/
|
|
|
|
+
|
|
|
|
+ //解绑鼠标松开监听事件
|
|
|
|
+ function unbundle_mouseover() {
|
|
|
|
+ jq('html').unbind("mouseup");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /*二进制获取转换后的时间*/
|
|
|
|
+ function get_time_html(binary) {
|
|
|
|
+ return convert_date(binary);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ jq(function () {
|
|
|
|
+ load_time_table('table_time_selected1', this.dateQuantumRange);
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<style type="text/css">
|
|
|
|
+ .plug-timer-grid {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .plug-timer-grid td, .plug-timer-grid th {
|
|
|
|
+ border: 1px solid #97B4D1;
|
|
|
|
+ text-align: center; /*cursor:pointer;*/
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ line-height: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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: 20px;
|
|
|
|
+ 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>
|
|
|
|
+
|