InternalModel.vue 34 KB

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