ByteDanceBudgetTemplateModal.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="800"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. @ok="handleSubmit"
  8. @cancel="handleCancel"
  9. cancelText="关闭">
  10. <a-spin :spinning="confirmLoading">
  11. <a-form @submit="handleSubmit" :form="form">
  12. <a-form-item
  13. label="模板名称"
  14. :labelCol="labelCol"
  15. :wrapperCol="wrapperCol">
  16. <a-input v-model="name" placeholder="请输入模板名称">
  17. </a-input>
  18. </a-form-item>
  19. <a-form-item
  20. label="出价方式"
  21. :labelCol="labelCol"
  22. :wrapperCol="wrapperCol">
  23. <a-radio-group v-model="bidType">
  24. <a-radio-button v-for="bidType in bidTypeList" :key="bidType.itemValue" :value="bidType.itemValue">
  25. {{bidType.itemText}}
  26. </a-radio-button>
  27. </a-radio-group>
  28. </a-form-item>
  29. <a-form-item
  30. label="投放方式"
  31. :labelCol="labelCol"
  32. :wrapperCol="wrapperCol">
  33. <a-radio-group v-model="flowControlMode">
  34. <a-radio-button v-for="flowControlMode in flowControlModeList" :key="flowControlMode.itemValue"
  35. :value="flowControlMode.itemValue">
  36. {{flowControlMode.itemText}}
  37. </a-radio-button>
  38. </a-radio-group>
  39. </a-form-item>
  40. <a-form-item
  41. label="预算"
  42. :labelCol="labelCol"
  43. :wrapperCol="wrapperCol">
  44. <a-input v-model="budgetPrice"
  45. style="width: 70%">
  46. <a-select
  47. slot="addonBefore"
  48. v-model="budgetPriceMode"
  49. style="width: 100px">
  50. <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
  51. <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
  52. </a-select>
  53. </a-input>
  54. </a-form-item>
  55. <a-form-item
  56. label="投放时间"
  57. :labelCol="labelCol"
  58. :wrapperCol="wrapperCol">
  59. <a-radio-group @change="onChangeFlowDate" v-model="flowDateType">
  60. <a-radio-button v-for="flowDate in flowDateList" :key="flowDate.itemValue" :value="flowDate.itemValue">
  61. {{flowDate.itemText}}
  62. </a-radio-button>
  63. </a-radio-group>
  64. </a-form-item>
  65. <a-form-item label="投放时间"
  66. v-if="showDateFlowRange"
  67. :labelCol="labelCol"
  68. :wrapperCol="wrapperCol">
  69. <a-range-picker
  70. name="buildTime"
  71. style="width: 100%"
  72. v-model="time"/>
  73. </a-form-item>
  74. <a-form-item
  75. label="投放时段"
  76. :labelCol="labelCol"
  77. :wrapperCol="wrapperCol">
  78. <a-radio-group
  79. v-model="dateQuantum" @change="dateQuantumChange">
  80. <a-radio-button value="date_unlimited">不限</a-radio-button>
  81. <a-radio-button value="date_appoint">按时间段投放</a-radio-button>
  82. </a-radio-group>
  83. </a-form-item>
  84. <a-form-item
  85. v-if="showDateQuantumRange"
  86. label="设置时间段"
  87. :labelCol="labelCol"
  88. :wrapperCol="wrapperCol">
  89. <div id="table_time_selected1" class="table_time_selected1">
  90. </div>
  91. </a-form-item>
  92. <a-form-item
  93. label="付费方式"
  94. :labelCol="labelCol"
  95. :wrapperCol="wrapperCol">
  96. <a-radio-group v-model="priceType">
  97. <a-radio-button value="PRICING_OCPM">按展示付费(oCPM)</a-radio-button>
  98. <a-radio-button value="PRICING_OCPC">按点击付费(oCPC)</a-radio-button>
  99. </a-radio-group>
  100. </a-form-item>
  101. <a-form-item
  102. label="目标转化出价"
  103. :labelCol="labelCol"
  104. :wrapperCol="wrapperCol">
  105. <a-input-number v-model="convertPrice" :min="0" :max="10000000"/>
  106. </a-form-item>
  107. <!-- <a-form-item-->
  108. <!-- label="过滤已转化用户"-->
  109. <!-- :labelCol="labelCol"-->
  110. <!-- :wrapperCol="wrapperCol">-->
  111. <!-- <a-radio-group v-model="filterType">-->
  112. <!-- <a-radio-button v-for="filterType in filterTypeList" :key="filterType.itemValue"-->
  113. <!-- :value="filterType.itemValue">-->
  114. <!-- {{filterType.itemText}}-->
  115. <!-- </a-radio-button>-->
  116. <!-- </a-radio-group>-->
  117. <!-- </a-form-item>-->
  118. </a-form>
  119. </a-spin>
  120. </a-modal>
  121. </template>
  122. <script>
  123. import {deleteAction, postAction, getAction} from '@/api/manage'
  124. import pick from 'lodash.pick'
  125. import jq from 'jquery'
  126. import moment from 'moment';
  127. import AFormItem from "ant-design-vue/es/form/FormItem";
  128. let dateQuantumRangeConst = '';
  129. export default {
  130. name: 'ByteDanceBudgetTemplateModal',
  131. components: {AFormItem},
  132. data() {
  133. return {
  134. title: "操作",
  135. visible: false,
  136. model: {},
  137. time:[],
  138. labelCol: {
  139. xs: {span: 24},
  140. sm: {span: 5},
  141. },
  142. wrapperCol: {
  143. xs: {span: 24},
  144. sm: {span: 16},
  145. },
  146. name:'',
  147. confirmLoading: false,
  148. convertPrice: 0,
  149. budgetPrice: 0,
  150. budgetPriceMode: 'BUDGET_MODE_DAY',
  151. showDateFlowRange: false,
  152. showDateQuantumRange:true,
  153. flowControlMode: 'FLOW_CONTROL_MODE_FAST',
  154. flowDateType: 'SCHEDULE_FROM_NOW',
  155. dateQuantum: 'date_unlimited',
  156. dateQuantumRange: '',
  157. bidType: 'SMART_BID_CUSTOM',
  158. bidTypeList: {},
  159. priceType: 'PRICING_OCPM',
  160. flowControlModeList: {},
  161. filterTypeList: {},
  162. price: 0,
  163. filterType: "NO_EXCLUDE",
  164. flowDateList: {},
  165. form: this.$form.createForm(this),
  166. url: {
  167. dictListUrl: 'toutiao/dictitem/list',
  168. insertUrl:'template/budget/insert'
  169. }
  170. }
  171. },
  172. methods: {
  173. add() {
  174. this.edit({
  175. id:null,
  176. time:[],
  177. convertPrice:0,
  178. priceType:'PRICING_OCPM',
  179. dateQuantum:'date_unlimited',
  180. dateQuantumRange:'',
  181. flowDateType:'SCHEDULE_FROM_NOW',
  182. budgetPrice:0,
  183. budgetPriceMode:'BUDGET_MODE_DAY',
  184. flowControlMode:'FLOW_CONTROL_MODE_FAST',
  185. bidType:'SMART_BID_CUSTOM',
  186. filterType:'NO_EXCLUDE'
  187. });
  188. },
  189. edit(record) {
  190. this.form.resetFields();
  191. // this.time[0] = record.startDate
  192. // this.time[1] = record.endDate
  193. this.model = Object.assign({}, record);
  194. this.visible = true;
  195. this.id=record.id
  196. this.name=record.name
  197. this.convertPrice=record.convertPrice
  198. this.budgetPrice=record.budgetPrice
  199. this.budgetPriceMode=record.budgetPriceMode
  200. this.flowControlMode=record.flowControlMode
  201. this.flowDateType=record.flowDateType
  202. this.dateQuantum=record.dateQuantum
  203. if(record.dateQuantumRange != undefined){
  204. this.dateQuantumRange=record.dateQuantumRange
  205. dateQuantumRangeConst = record.dateQuantumRange
  206. }
  207. if(record.startDate != null && record.endDate != null){
  208. this.time=[moment(record.startDate),moment(record.endDate)]
  209. }
  210. this.bidType=record.bidType
  211. this.priceType=record.priceType
  212. this.price=record.price
  213. this.filterType=record.filterType
  214. if (this.flowDateType == 'SCHEDULE_FROM_NOW') {
  215. this.showDateFlowRange = false;
  216. } else {
  217. this.showDateFlowRange = true;
  218. }
  219. if (this.dateQuantum == 'date_unlimited') {
  220. this.showDateQuantumRange = false;
  221. } else {
  222. this.showDateQuantumRange = true;
  223. jq(function () {
  224. load_time_table('table_time_selected1',dateQuantumRangeConst);
  225. });
  226. }
  227. },
  228. close() {
  229. this.$emit('close');
  230. this.visible = false;
  231. },
  232. handleCancel() {
  233. this.close()
  234. },
  235. moment,
  236. disabledDate(current) {
  237. return current <moment().endOf('day');
  238. },
  239. handleSubmit(e) {
  240. e.preventDefault()
  241. this.form.validateFields((err, values) => {
  242. if (!err) {
  243. console.log('Received values of form: ', values);
  244. let params = {};
  245. this.dateQuantumRange = jq("#table_time_selected1_time_num").val();
  246. params.id=this.id;
  247. params.name=this.name;
  248. params.bidType = this.bidType;
  249. params.flowControlMode = this.flowControlMode;
  250. params.budgetPrice = this.budgetPrice;
  251. params.budgetPriceMode = this.budgetPriceMode;
  252. params.flowDateType = this.flowDateType;
  253. if(this.time != [] && this.time.length==2){
  254. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  255. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  256. }
  257. params.dateQuantum = this.dateQuantum;
  258. params.priceType = this.priceType;
  259. params.convertPrice = this.convertPrice;
  260. params.filterType = this.filterType;
  261. params.dateQuantumRange = this.dateQuantumRange;
  262. console.log(params)
  263. postAction(this.url.insertUrl,params).then((res)=>{
  264. console.log(res)
  265. if(res.success){
  266. this.$message.success(res.message);
  267. this.$emit('ok');
  268. this.close();
  269. }else {
  270. this.$message.warning(res.message);
  271. }
  272. this.confirmLoading = false;
  273. });
  274. }
  275. })
  276. },
  277. onChange(value) {
  278. console.log(value)
  279. },
  280. dateQuantumChange(value){
  281. if (this.dateQuantum == 'date_unlimited') {
  282. this.showDateQuantumRange = false;
  283. } else {
  284. this.showDateQuantumRange = true;
  285. jq(function () {
  286. load_time_table('table_time_selected1',dateQuantumRangeConst);
  287. });
  288. }
  289. },
  290. onChangeFlowDate() {
  291. console.log(this.flowDateType)
  292. if (this.flowDateType == 'SCHEDULE_FROM_NOW') {
  293. this.showDateFlowRange = false;
  294. } else {
  295. this.showDateFlowRange = true;
  296. }
  297. }
  298. },
  299. created: function () {
  300. //出价方式
  301. let params = {};
  302. params.dictId = '35c0634f642a0da32dcd2c75b4f03ad9';
  303. params.pageSize = '1000';
  304. getAction(this.url.dictListUrl, params).then((res) => {
  305. if (res.success) {
  306. this.bidTypeList = res.result.records
  307. }
  308. });
  309. //投放方式(计划投放速度类型)
  310. params = {};
  311. params.dictId = '46e24e805d5cd0356a9f4560d987a276';
  312. params.pageSize = '1000';
  313. getAction(this.url.dictListUrl, params).then((res) => {
  314. if (res.success) {
  315. this.flowControlModeList = res.result.records
  316. }
  317. });
  318. //投放时间类型
  319. params = {};
  320. params.dictId = '4c5bb1a99115c6130d6f71b3784a99ab';
  321. params.pageSize = '1000';
  322. getAction(this.url.dictListUrl, params).then((res) => {
  323. if (res.success) {
  324. this.flowDateList = res.result.records
  325. }
  326. });
  327. //过滤已转化用户
  328. params = {};
  329. params.dictId = 'd06027ca9be05d60b2946e5276fa1cba';
  330. params.pageSize = '1000';
  331. getAction(this.url.dictListUrl, params).then((res) => {
  332. if (res.success) {
  333. this.filterTypeList = res.result.records
  334. }
  335. });
  336. }
  337. }
  338. var box_id;
  339. var StartTD = null;
  340. var StartIndex = null;
  341. var EndTD = null;
  342. var EndIndex = null;
  343. var Selected = 'Selected';
  344. var Start_x = null;
  345. var Start_y = null;
  346. //点击中表格的小时值
  347. var hour;
  348. //点击选中的星期值
  349. var week;
  350. //1为这个格子在此次鼠标拖拽过程中被选中(不执行选中方法),0为没选中过
  351. var td_state = 0;
  352. //生成星期数组
  353. var num = ['一','二','三','四','五','六','日'];
  354. //生成时间值数组
  355. var arr_hour = get_hour_arr();
  356. //按下鼠标左键拖动选中单元格
  357. function SelectTD(StartIndex, EndIndex,Selected) {
  358. var MinX = null;
  359. var MaxX = null;
  360. var MinY = null;
  361. var MaxY = null;
  362. var coordinate = get_coordinate(StartIndex, EndIndex);
  363. MinX = coordinate[0];
  364. MaxX = coordinate[1];
  365. MinY = coordinate[2];
  366. MaxY = coordinate[3];
  367. for (var i = MinY; i <= MaxY; i++) {
  368. for (var j = MinX; j <= MaxX; j++) {
  369. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  370. var td_class = jq("td", SelectTR).eq(j).attr('class');
  371. td_state = jq("td", SelectTR).eq(j).attr("td_state");
  372. //在同一次鼠标按下的过程中,选中过的表格不进行选中或取消操作
  373. if (!td_state) {
  374. if (td_class == Selected) {
  375. jq("td", SelectTR).eq(j).removeClass(Selected);
  376. }else{
  377. //筛选掉标明为星期的表格
  378. jq("td", SelectTR).eq(j).attr("class", Selected);
  379. }
  380. jq("td", SelectTR).eq(j).attr("td_state", '1');
  381. }
  382. }
  383. }
  384. //改变二进制值
  385. get_time_val();
  386. //改变日期显示
  387. convert_date();
  388. }
  389. //点击选中或去掉选中整行、整列
  390. function SelectTD_click(StartIndex, EndIndex,Selected) {
  391. var MinX = null;
  392. var MaxX = null;
  393. var MinY = null;
  394. var MaxY = null;
  395. var Selected_true = 0;
  396. var Selected_false = 0;
  397. var coordinate = get_coordinate(StartIndex, EndIndex);
  398. MinX = coordinate[0];
  399. MaxX = coordinate[1];
  400. MinY = coordinate[2];
  401. MaxY = coordinate[3];
  402. //列出此列当中的表格选中状态
  403. for (var i = MinY; i <= MaxY; i++) {
  404. for (var j = MinX; j <= MaxX; j++) {
  405. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  406. var td_class = jq("td", SelectTR).eq(j).attr('class');
  407. if (td_class == Selected) {
  408. //表格里存在已选中的元素
  409. Selected_true = 1;
  410. }else{
  411. //表格里存在未选中的元素
  412. Selected_false = 1;
  413. }
  414. }
  415. }
  416. //执行选中或去掉选中方法
  417. for (var i = MinY; i <= MaxY; i++) {
  418. for (var j = MinX; j <= MaxX; j++) {
  419. var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
  420. var td_class = jq("td", SelectTR).eq(j).attr('class');
  421. //一列当中存在已选中与未选中的表格处理:整列全部选中
  422. if (Selected_true == 1 && Selected_false == 1) {
  423. jq("td", SelectTR).eq(j).attr("class", Selected);
  424. }else if(Selected_false == 1){
  425. //一列当中只存在未选中的表格处理:整列全部选中
  426. jq("td", SelectTR).eq(j).attr("class", Selected);
  427. }else{
  428. //一列当中只存在已选中的表格处理:整列全部去掉选中
  429. jq("td", SelectTR).eq(j).removeClass(Selected);
  430. }
  431. }
  432. }
  433. //改变二进制值
  434. get_time_val();
  435. //改变日期显示
  436. convert_date();
  437. }
  438. //获取选中范围的开始与结束的坐标
  439. function get_coordinate(StartIndex, EndIndex){
  440. var MinX = null;
  441. var MaxX = null;
  442. var MinY = null;
  443. var MaxY = null;
  444. if (StartIndex.x < EndIndex.x) {
  445. MinX = StartIndex.x; MaxX = EndIndex.x;
  446. }else {
  447. MinX = EndIndex.x; MaxX = StartIndex.x;
  448. }
  449. if (StartIndex.y < EndIndex.y) {
  450. MinY = StartIndex.y; MaxY = EndIndex.y;
  451. } else {
  452. MinY = EndIndex.y; MaxY = StartIndex.y;
  453. }
  454. return [MinX, MaxX, MinY, MaxY];
  455. }
  456. //改变二进制值
  457. function get_time_val(){
  458. var time_type = '';
  459. jq('#' + box_id + ' table tbody').find('td').each(function(k){
  460. var Selected_type = jq(this).attr('class');
  461. var week =jq(this).attr('week');
  462. if (Selected_type == Selected && !week) {
  463. time_type +="1";
  464. }else if(!week){
  465. time_type +="0";
  466. }
  467. });
  468. jq('#'+box_id+'_time_num').val(time_type);
  469. // convert_date();
  470. }
  471. //二进制数转换日期
  472. function convert_date(external_binary){
  473. //初始化周数数组
  474. var time_week_arr = [];
  475. if (!external_binary) {
  476. //内部调用,进行选中表格和输出时间操作。
  477. var binary = jq('#'+box_id+'_time_num').val();
  478. }else{
  479. //存在外部参入传入,此函数进行返回时间操作。
  480. var date_html = '';
  481. var binary = external_binary;
  482. }
  483. for (var y = 0; y < 7; y++) {
  484. //初始化小时数组
  485. var time_hour_arr = [];
  486. for (var x = 0; x < 48; x++) {
  487. //获取当前点击元素的位置
  488. if (y==0) {
  489. var index = x;
  490. }else{
  491. var index = (y*48)+x;
  492. }
  493. //获取td对应的二进制值
  494. var Selected_val = binary.charAt(index);
  495. if (Selected_val ==1) {
  496. //组装保存进数组里
  497. if (time_hour_arr == []) {
  498. //表格的第一个位置的值
  499. time_hour_arr = arr_hour[x];
  500. }else if(binary.charAt(index-1) == 1 && binary.charAt(index-2) == 1 ){
  501. //此位置(包含上一行)的前两个都为选中时
  502. if (x==0 && binary.charAt(index+1) == 0) {
  503. //选中行里第一个,后一个表格没选中,加逗号
  504. time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
  505. }else if(x==0 && binary.charAt(index+1) == 1){
  506. //选中行里第一个,后一个表格已选中,不加逗号
  507. time_hour_arr[time_hour_arr.length] = arr_hour[x];
  508. }else if(x==1 && binary.charAt(index-1) == 0){
  509. //选中行里第二个,上一个表格没选中,加逗号
  510. time_hour_arr[time_hour_arr.length] = arr_hour[x] +', ';
  511. }else if(x==1 && binary.charAt(index-1) == 1){
  512. //选中行里第二个,上一个表格已选中,前加-号,后加逗号
  513. time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] +', ';
  514. }else{
  515. //选中行里除第一、二的表格以外,前一个表格已经选中,此元素前加- 后加逗号
  516. time_hour_arr[time_hour_arr.length-1] = '-' + arr_hour[x] +', ';
  517. }
  518. }else if(binary.charAt(index-1) == 1 && x>0){
  519. //选中的前一个已选中,且此次选中的不是行里第一个,此次选中的元素前加-后加逗号
  520. time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
  521. }else if(binary.charAt(index+1) != 1 || x==47){
  522. //选中的后一个没选中,或者此次选中的是行里最后一个,此次选中的元素加逗号
  523. time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
  524. }else{
  525. //选中的后一已选中,此次选中的元素不加逗号
  526. time_hour_arr[time_hour_arr.length] = arr_hour[x] ;
  527. }
  528. }
  529. }
  530. time_week_arr[y] = time_hour_arr;
  531. }
  532. // console.info(box_id);
  533. if (!external_binary) {
  534. jq('#'+box_id+'_time_seled').html('');
  535. }
  536. //再次组装并输出数组
  537. var time_html = [];
  538. for(var y = 0; y < 7; y++){
  539. for(var x = 0; x < time_week_arr[y].length; x++){
  540. if (!time_html[y]) {
  541. time_html[y] = time_week_arr[y][x];
  542. }else{
  543. time_html[y] += time_week_arr[y][x];
  544. }
  545. }
  546. if (time_html[y]) {
  547. time_html[y]= time_html[y].substring(0,time_html[y].length-2);
  548. if (!external_binary) {
  549. jq('#'+box_id+'_time_seled').append('<div>星期'+num [y] + ' (' +time_html[y] + ')' + '</div>');
  550. }else{
  551. date_html += '星期'+num [y] + ' (' +time_html[y] + ')' + ', ';
  552. }
  553. }
  554. }
  555. if (external_binary) {
  556. return date_html;
  557. }
  558. // console.info(time_html);
  559. }
  560. //生成时间值数组
  561. function get_hour_arr(){
  562. var arr_hour = [];
  563. var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象;
  564. var oDate_hour = oDate.getHours();
  565. var oDate_minute = oDate.getMinutes();
  566. for(var i=0; i<48; i++){
  567. if(oDate_minute<10){
  568. var oDate_minute = "0"+oDate_minute;
  569. }
  570. if (i >=1) {
  571. oDate.setMinutes(oDate.getMinutes() + 30);
  572. oDate_hour = oDate.getHours();
  573. oDate_minute = oDate.getMinutes();
  574. if(oDate_minute<10){
  575. var oDate_minute = "0"+oDate_minute;
  576. }
  577. }
  578. arr_hour[i] = oDate_hour + ':' + oDate_minute;
  579. }
  580. return arr_hour;
  581. }
  582. //更新操作
  583. function renewal(id){
  584. if (id) {
  585. box_id = id;
  586. }
  587. //解绑鼠标移动监听事件
  588. jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
  589. //初始化表格的在此次选中状态
  590. jq('#' + box_id + ' table tbody tr td').attr("td_state", '');
  591. //改变二进制值
  592. get_time_val();
  593. //改变日期显示
  594. convert_date();
  595. }
  596. //二进制数赋值选中表格
  597. function binary_selected(){
  598. var default_time_val = jq('#'+box_id+' .default_time_val').val();
  599. if (default_time_val) {
  600. for(var i=0 ; i<336; i++){
  601. var td_selected = default_time_val.charAt(i);
  602. if (td_selected != 0 ) {
  603. jq('#' + box_id + ' table tbody tr td').eq(i).attr('class','Selected');
  604. //更新操作,显示文字形日期
  605. renewal();
  606. }
  607. }
  608. }
  609. }
  610. //实例化程序
  611. function load_time_table(id,value){
  612. //包住table的元素id
  613. box_id = id;
  614. var html;
  615. html = '<input type="hidden" class="default_time_val" value="'+value+'"/>';
  616. html += '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid" onselectstart="return false" onselect="document.selection.empty()">';
  617. html += '<thead>';
  618. html += '<tr>';
  619. html += '<th></th>';
  620. html += '<th colSpan="24">上午</th>';
  621. html += '<th colSpan="24">下午</th>';
  622. html += '</tr>';
  623. html += '<tr class="hour">';
  624. html += '<th></th>';
  625. html += '</tr>';
  626. html += '</thead>';
  627. html += '<tbody></tbody>';
  628. html += '</table>';
  629. html += '<input class="focus" type="hidden" style="opacity: 0;">';
  630. html += '<div id="'+box_id+'_time_seled" style="line-height: 15px;font-size:10px;"></div>';
  631. html += '<input type="hidden" id="'+box_id+'_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="'+value+'">';
  632. jq('#'+box_id).html('');
  633. jq('#'+box_id).append(html);
  634. var html_tbody_td = '';
  635. var html_thead_td = '';
  636. //创建表格
  637. for (var i = 0; i < 7; i++) {
  638. var week = i+1;
  639. html_tbody_td += '<tr>';
  640. for (var j = 0; j < 49; j++){
  641. if (j==0) {
  642. html_tbody_td += '<th week="'+week+'">周' + num[i] + '</th>';
  643. }else{
  644. html_tbody_td += '<td>' + '</td>';
  645. }
  646. }
  647. html_tbody_td += '</tr>';
  648. }
  649. //创建表格小时栏目
  650. for(var i =0; i<= 23; i++){
  651. html_thead_td += '<td colSpan="2" hour="'+i+'">'+ i + '</td>';
  652. }
  653. jq('#' + box_id + ' table thead .hour').append(html_thead_td);
  654. jq('#' + box_id + ' table tbody').html(html_tbody_td);
  655. //检查是否有赋有二进制值,如有,将选中相应的表格
  656. binary_selected();
  657. //控制器,控制当前在哪个表格进行操作
  658. jq('.plug-timer-grid').hover(function (e) {
  659. if(1 != e.which){ //判断是否为左击
  660. var id = jq(this).parent().attr('id');
  661. box_id = id;
  662. }
  663. });
  664. //清除所有选中项
  665. jq('.clear').click(function(){
  666. jq(this).parent().find('td').removeClass(Selected);
  667. var id =jq(this).parent().attr('id');
  668. renewal(id);
  669. });
  670. //点击小时选中或去掉整列处理块
  671. jq('#' + box_id + ' table thead tr td').click(function(){
  672. hour = jq(this).attr('hour');
  673. if (hour>=0) {
  674. var rows = jq('#' + box_id + ' table tbody tr').length;
  675. Start_x = (jq(this).index())*2-1;
  676. Start_y = 0;
  677. StartIndex = { x: Start_x, y: Start_y };
  678. EndTD = jq(this);
  679. var x = (jq(this).index())*2-2;
  680. var y = rows -1; //为了配合for计算公式-1
  681. EndIndex = { x: x, y: y };
  682. //改变第一次按下鼠标时候的改变选中状态
  683. SelectTD_click(StartIndex, EndIndex, Selected);
  684. }
  685. });
  686. //点击星期选中或去掉整行处理块
  687. jq('#' + box_id + ' table tbody tr th').click(function(){
  688. var week = jq(this).attr('week');
  689. if (week>=0) {
  690. var line = jq('#' + box_id + ' table tbody tr td').length/jq('#' + box_id + ' table tbody tr').length;
  691. Start_x = 0;
  692. Start_y = jq(this).parent().index();
  693. StartIndex = { x: Start_x, y: Start_y };
  694. EndTD = jq(this);
  695. var y = jq(this).parent().index();
  696. var x = line-1; //为了配合for计算公式-1
  697. EndIndex = { x: x, y: y };
  698. //改变第一次按下鼠标时候的改变选中状态
  699. SelectTD_click(StartIndex, EndIndex, Selected);
  700. }
  701. });
  702. //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
  703. jq('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
  704. //记录刚开始点击的元素位置
  705. Start_x = jq(this).index()-1;
  706. Start_y = jq(this).parent().index();
  707. StartIndex = { x: Start_x, y: Start_y };
  708. EndTD = jq(this);
  709. var x = jq(this).index()-1;
  710. var y = jq(this).parent().index();
  711. EndIndex = { x: x, y: y };
  712. //改变第一次按下鼠标时候的改变选中状态
  713. SelectTD(StartIndex, EndIndex, Selected);
  714. StartTD = jq(this);
  715. StartIndex = { x: Start_x, y: Start_y };
  716. //监听鼠标移动事件,实现改变后续鼠标拖拽时候的表格选中状态
  717. jq('#' + box_id + ' table tbody tr td').mouseover(function(e){
  718. EndTD = jq(this);
  719. var x = jq(this).index()-1;
  720. var y = jq(this).parent().index();
  721. EndIndex = { x: x, y: y };
  722. if(1 != e.which){ //判断是否为左击
  723. jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
  724. }
  725. //去除停留在td上的光标
  726. jq('#' + box_id + ' .focus').focus();
  727. SelectTD(StartIndex, EndIndex, Selected);
  728. });
  729. //放开鼠标左键时,初始化相关参数和解绑相关监听
  730. jq('html').unbind("mouseup").bind("mouseup", function () {
  731. renewal();
  732. });
  733. });
  734. }
  735. /*外部调用接口*/
  736. //解绑鼠标松开监听事件
  737. function unbundle_mouseover(){
  738. jq('html').unbind("mouseup");
  739. }
  740. /*二进制获取转换后的时间*/
  741. function get_time_html(binary){
  742. return convert_date(binary);
  743. }
  744. // jq(function(){
  745. // load_time_table('table_time_selected1',this.dateQuantumRange);
  746. // });
  747. </script>
  748. <style type="text/css">
  749. .plug-timer-grid{width: 100%;}
  750. .plug-timer-grid td, .plug-timer-grid th{
  751. border: 1px solid #97B4D1;
  752. text-align: center; /*cursor:pointer;*/
  753. font-size: 10px;
  754. line-height: 10px;
  755. }
  756. .Selected{background-color: rgb(102,162,243);opacity: 0.5;}
  757. .plug-timer-grid {
  758. border-collapse: collapse;
  759. z-index: 4;
  760. }
  761. .plug-timer-grid thead tr{
  762. display: table-row;
  763. vertical-align: inherit;
  764. border-color: inherit;
  765. }
  766. table td{
  767. height: 20px;
  768. max-width: 5px;
  769. border: 1px solid #dfe6ec;
  770. font-size: 12px;
  771. text-align: center;
  772. vertical-align: middle;
  773. overflow: hidden;
  774. transition: background .5s;
  775. -webkit-transition: background .5s;
  776. }
  777. .plug-timer-grid tbody th{
  778. width: 4%;
  779. }
  780. .plug-timer-grid tbody tr td{
  781. width: 2%;
  782. }
  783. /*.clear{*/
  784. /* margin:20px 0px 20px 0px;*/
  785. /*}*/
  786. </style>