123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879 |
- <template>
- <a-modal
- :title="title"
- :width="800"
- :visible="visible"
- :confirmLoading="confirmLoading"
- @ok="handleSubmit"
- @cancel="handleCancel"
- cancelText="关闭">
- <a-spin :spinning="confirmLoading">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item
- label="模板名称"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input v-model="name" placeholder="请输入模板名称">
- </a-input>
- </a-form-item>
- <a-form-item
- label="出价方式"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <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="labelCol"
- :wrapperCol="wrapperCol">
- <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="labelCol"
- :wrapperCol="wrapperCol">
- <a-input v-model="budgetPrice"
- style="width: 70%">
- <a-select
- slot="addonBefore"
- v-model="budgetPriceMode"
- 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="labelCol"
- :wrapperCol="wrapperCol">
- <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="labelCol"
- :wrapperCol="wrapperCol">
- <a-range-picker
- name="buildTime"
- style="width: 100%"
- v-model="time"/>
- </a-form-item>
- <a-form-item
- label="投放时段"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-radio-group
- v-model="dateQuantum" @change="dateQuantumChange">
- <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="labelCol"
- :wrapperCol="wrapperCol">
- <div id="table_time_selected1" class="table_time_selected1">
- </div>
- </a-form-item>
- <a-form-item
- label="付费方式"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <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="labelCol"
- :wrapperCol="wrapperCol">
- <a-input-number v-model="convertPrice" :min="0" :max="10000000"/>
- 元
- </a-form-item>
- <!-- <a-form-item-->
- <!-- label="过滤已转化用户"-->
- <!-- :labelCol="labelCol"-->
- <!-- :wrapperCol="wrapperCol">-->
- <!-- <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>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import {deleteAction, postAction, getAction} from '@/api/manage'
- import pick from 'lodash.pick'
- import jq from 'jquery'
- import moment from 'moment';
- import AFormItem from "ant-design-vue/es/form/FormItem";
- let dateQuantumRangeConst = '';
- export default {
- name: 'ByteDanceBudgetTemplateModal',
- components: {AFormItem},
- data() {
- return {
- title: "操作",
- visible: false,
- model: {},
- time:[],
- labelCol: {
- xs: {span: 24},
- sm: {span: 5},
- },
- wrapperCol: {
- xs: {span: 24},
- sm: {span: 16},
- },
- name:'',
- confirmLoading: false,
- 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:'template/budget/insert'
- }
- }
- },
- methods: {
- add() {
- this.edit({
- id:null,
- time:[],
- convertPrice:0,
- priceType:'PRICING_OCPM',
- dateQuantum:'date_unlimited',
- dateQuantumRange:'',
- flowDateType:'SCHEDULE_FROM_NOW',
- budgetPrice:0,
- budgetPriceMode:'BUDGET_MODE_DAY',
- flowControlMode:'FLOW_CONTROL_MODE_FAST',
- bidType:'SMART_BID_CUSTOM',
- filterType:'NO_EXCLUDE'
- });
- },
- edit(record) {
- this.form.resetFields();
- // this.time[0] = record.startDate
- // this.time[1] = record.endDate
- this.model = Object.assign({}, record);
- this.visible = true;
- this.id=record.id
- this.name=record.name
- this.convertPrice=record.convertPrice
- this.budgetPrice=record.budgetPrice
- this.budgetPriceMode=record.budgetPriceMode
- this.flowControlMode=record.flowControlMode
- this.flowDateType=record.flowDateType
- this.dateQuantum=record.dateQuantum
- if(record.dateQuantumRange != undefined){
- this.dateQuantumRange=record.dateQuantumRange
- dateQuantumRangeConst = record.dateQuantumRange
- }
- if(record.startDate != null && record.endDate != null){
- this.time=[moment(record.startDate),moment(record.endDate)]
- }
- this.bidType=record.bidType
- this.priceType=record.priceType
- this.price=record.price
- this.filterType=record.filterType
- if (this.flowDateType == 'SCHEDULE_FROM_NOW') {
- this.showDateFlowRange = false;
- } else {
- this.showDateFlowRange = true;
- }
- if (this.dateQuantum == 'date_unlimited') {
- this.showDateQuantumRange = false;
- } else {
- this.showDateQuantumRange = true;
- jq(function () {
- load_time_table('table_time_selected1',dateQuantumRangeConst);
- });
- }
- },
- close() {
- this.$emit('close');
- this.visible = false;
- },
- handleCancel() {
- this.close()
- },
- 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 = jq("#table_time_selected1_time_num").val();
- params.id=this.id;
- params.name=this.name;
- params.bidType = this.bidType;
- params.flowControlMode = this.flowControlMode;
- params.budgetPrice = this.budgetPrice;
- params.budgetPriceMode = this.budgetPriceMode;
- params.flowDateType = this.flowDateType;
- if(this.time != [] && this.time.length==2){
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- }
- 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){
- this.$message.success(res.message);
- this.$emit('ok');
- this.close();
- }else {
- this.$message.warning(res.message);
- }
- this.confirmLoading = false;
- });
- }
- })
- },
- onChange(value) {
- console.log(value)
- },
- dateQuantumChange(value){
- if (this.dateQuantum == 'date_unlimited') {
- this.showDateQuantumRange = false;
- } else {
- this.showDateQuantumRange = true;
- jq(function () {
- load_time_table('table_time_selected1',dateQuantumRangeConst);
- });
- }
- },
- onChangeFlowDate() {
- console.log(this.flowDateType)
- if (this.flowDateType == '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 = '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 = 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>
|