diff --git a/package.json b/package.json index 4dde2df8..5380ca6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "SCUI-Admin", - "version": "1.0.3", + "version": "1.0.4", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/public/json/user.json b/public/json/user.json index 3798e3ae..c6b8a2de 100644 --- a/public/json/user.json +++ b/public/json/user.json @@ -36,6 +36,14 @@ "title": "过滤器" }, "component": "vab/filterBar" + }, + { + "path": "/vab/print", + "name": "print", + "meta": { + "title": "打印" + }, + "component": "vab/print" } ] }, diff --git a/src/components/scEcharts/index.vue b/src/components/scEcharts/index.vue index 4e211196..ae541bd1 100644 --- a/src/components/scEcharts/index.vue +++ b/src/components/scEcharts/index.vue @@ -6,7 +6,8 @@ import * as echarts from 'echarts'; import T from './echarts-theme-T.js'; echarts.registerTheme('T', T); - + const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj); + export default { ...echarts, name: "scEcharts", @@ -17,7 +18,17 @@ option: { type: Object, default: () => {} } }, data() { - return {} + return { + myChart: null + } + }, + watch: { + option: { + deep:true, + handler (v) { + unwarp(this.myChart).setOption(v); + } + } }, computed: { myOptions: function() { @@ -29,9 +40,10 @@ }, methods: { draw(){ - let myChart = echarts.init(this.$refs.scEcharts, 'T'); + var myChart = echarts.init(this.$refs.scEcharts, 'T'); myChart.setOption(this.myOptions); - window.addEventListener('resize', () => myChart.resize() ); + this.myChart = myChart; + window.addEventListener('resize', () => myChart.resize()); } } } diff --git a/src/config/index.js b/src/config/index.js index c0bb12af..07f0520e 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -3,7 +3,7 @@ const DEFAULT_CONFIG = { //标题 APP_NAME: "SCUI", //版本号 - APP_VER: "1.0.2", + APP_VER: "1.0.4", //接口地址 API_URL: "" } diff --git a/src/utils/print.js b/src/utils/print.js new file mode 100644 index 00000000..a3e26a45 --- /dev/null +++ b/src/utils/print.js @@ -0,0 +1,131 @@ +// 打印类属性、方法定义 +/* eslint-disable */ +const Print = function(dom, options) { + if (!(this instanceof Print)) return new Print(dom, options); + + this.options = this.extend({ + 'noPrint': '.no-print' + }, options); + + if ((typeof dom) === "string") { + this.dom = document.querySelector(dom); + } else { + this.isDOM(dom) + this.dom = this.isDOM(dom) ? dom : dom.$el; + } + + this.init(); +}; +Print.prototype = { + init: function() { + var content = this.getStyle() + this.getHtml(); + this.writeIframe(content); + }, + extend: function(obj, obj2) { + for (var k in obj2) { + obj[k] = obj2[k]; + } + return obj; + }, + + getStyle: function() { + var str = "", + styles = document.querySelectorAll('style,link'); + for (var i = 0; i < styles.length; i++) { + str += styles[i].outerHTML; + } + str += ""; + + return str; + }, + + getHtml: function() { + var inputs = document.querySelectorAll('input'); + var textareas = document.querySelectorAll('textarea'); + var selects = document.querySelectorAll('select'); + + for (var k = 0; k < inputs.length; k++) { + if (inputs[k].type == "checkbox" || inputs[k].type == "radio") { + if (inputs[k].checked == true) { + inputs[k].setAttribute('checked', "checked") + } else { + inputs[k].removeAttribute('checked') + } + } else if (inputs[k].type == "text") { + inputs[k].setAttribute('value', inputs[k].value) + } else { + inputs[k].setAttribute('value', inputs[k].value) + } + } + + for (var k2 = 0; k2 < textareas.length; k2++) { + if (textareas[k2].type == 'textarea') { + textareas[k2].innerHTML = textareas[k2].value + } + } + + for (var k3 = 0; k3 < selects.length; k3++) { + if (selects[k3].type == 'select-one') { + var child = selects[k3].children; + for (var i in child) { + if (child[i].tagName == 'OPTION') { + if (child[i].selected == true) { + child[i].setAttribute('selected', "selected") + } else { + child[i].removeAttribute('selected') + } + } + } + } + } + + return this.dom.outerHTML; + }, + + writeIframe: function(content) { + var w, doc, iframe = document.createElement('iframe'), + f = document.body.appendChild(iframe); + iframe.id = "myIframe"; + //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;"; + iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;'); + w = f.contentWindow || f.contentDocument; + doc = f.contentDocument || f.contentWindow.document; + doc.open(); + doc.write(content); + doc.close(); + var _this = this + iframe.onload = function() { + _this.toPrint(w); + setTimeout(function() { + document.body.removeChild(iframe) + }, 100) + } + }, + + toPrint: function(frameWindow) { + try { + setTimeout(function() { + frameWindow.focus(); + try { + if (!frameWindow.document.execCommand('print', false, null)) { + frameWindow.print(); + } + } catch (e) { + frameWindow.print(); + } + frameWindow.close(); + }, 10); + } catch (err) { + console.log('err', err); + } + }, + isDOM: (typeof HTMLElement === 'object') ? + function(obj) { + return obj instanceof HTMLElement; + } : function(obj) { + return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'; + } +}; + +export default Print diff --git a/src/utils/template.js b/src/utils/template.js index e8f07938..e441bd63 100644 --- a/src/utils/template.js +++ b/src/utils/template.js @@ -4,6 +4,7 @@ * Copyright 2015 yanhaijing. All Rights Reserved * Licensed under MIT (https://github.com/yanhaijing/template.js/blob/master/MIT-LICENSE.txt) */ +/* eslint-disable */ ;(function(root, factory) { var template = factory(root); if (typeof define === 'function' && define.amd) { diff --git a/src/views/home/components/C1.vue b/src/views/home/components/C1.vue index 6fb22c30..dbd0f382 100644 --- a/src/views/home/components/C1.vue +++ b/src/views/home/components/C1.vue @@ -1,6 +1,6 @@ @@ -30,7 +30,17 @@ }, xAxis: { boundaryGap: false, - data: ['周一', '周二', '周三', '周四', '周五', '周六'], + type: 'category', + data: (function (){ + var now = new Date(); + var res = []; + var len = 30; + while (len--) { + res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); + now = new Date(now - 2000); + } + return res; + })() }, yAxis: [{ type: 'value', @@ -43,29 +53,44 @@ { name: '收入', type: 'line', - symbolSize: 6, - smooth: true, + symbol: 'none', lineStyle: { - width: 8, - shadowColor: 'rgba(0,0,0,0.2)', - shadowBlur: 15, - shadowOffsetY: 15, - color: new scEcharts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#409EFF' - }, { - offset: 1, - color: '#36CE9E' - }]) + width: 1, + color: '#F56C6C' }, - 'areaStyle': { - 'opacity': 0 + areaStyle: { + opacity: 0.1, + color: '#F56C6C' }, - data: [15, 15, 35, 5, 35, 15], + data: (function (){ + var res = []; + var len = 30; + while (len--) { + res.push(Math.round(Math.random() * 0)); + } + return res; + })() }, ], }; this.option = option; - } + + }, + mounted(){ + var _this = this; + setInterval(function (){ + var o = _this.option; + + o.series[0].data.shift() + o.series[0].data.push(Math.round(Math.random() * 100)); + + o.xAxis.data.shift(); + o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, '')); + + + //_this.$refs.c1.myChart.setOption(o) + },2100) + + }, } diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue index 732f086b..bceaa3cf 100644 --- a/src/views/home/components/C2.vue +++ b/src/views/home/components/C2.vue @@ -22,6 +22,14 @@ data() { return { activities: [ + { + content: [ + "[新增] 打印工具", + "[新增] 移动端菜单布局", + '[修复] scEcharts数据双向绑定' + ], + timestamp: '2021-05-09' + }, { content: [ "[新增] 个性列表模板", diff --git a/src/views/vab/print.vue b/src/views/vab/print.vue new file mode 100644 index 00000000..8c4e4315 --- /dev/null +++ b/src/views/vab/print.vue @@ -0,0 +1,38 @@ + + + + +