update
parent
ca65052619
commit
e51c15db73
|
|
@ -1 +1 @@
|
|||
html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem}.app::before{position:absolute;left:12.10938rem;top:-5.46875rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(88,88,88,0.85) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:''}.app .option,.app .close,.app .load{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover,.app .close:hover,.app .load:hover{opacity:1}.app .close{right:auto;left:.46875rem}.app .load{right:auto;left:12.10938rem}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-days{display:flex;width:5rem;height:2.34375rem;margin:0 .46875rem}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50}
|
||||
html{font-size:12.8px;width:100%;height:100vh}body{overflow:hidden;display:flex;flex-direction:column;width:100%;height:100%;line-height:1.25;font-size:14px;color:var(--color-dark-1);background:rgba(255,255,255,0.3)}.app-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app-nodrag{-webkit-app-region:no-drag}.app{position:relative;display:flex;height:100%}.app .sidebar{display:flex;flex-direction:column;justify-content:space-between;width:76px;height:100%;padding:48px 22px 24px;background:var(--color-dark-1);color:var(--color-plain-1)}.app .sidebar .item{cursor:pointer}.app .sidebar .item:hover,.app .sidebar .item.active{color:var(--color-orange-1)}.app .sidebar .item:active{color:var(--color-orange-2)}.app .select-box{display:flex;flex-direction:column;width:200px;height:100%;background:rgba(255,255,255,0.5)}.app .select-box .form{display:flex;align-items:center;width:100%;height:35px;padding:0 6px;background:#fff;border-bottom:1px solid var(--color-plain-2)}.app .select-box .form wc-input{flex:1;margin-right:12px}.app .select-box .list{flex:1}.app .select-box .list .item{display:flex;flex-direction:column;justify-content:center;height:48px;padding:6px;transition:color 0.15s ease-in-out, background 0.15s ease-in-out;cursor:pointer}.app .select-box .list .item section{display:flex;justify-content:space-between;align-items:center}.app .select-box .list .item cite{color:var(--color-grey-2)}.app .select-box .list .item .percent{padding:0 4px;border-radius:2px;font-size:12px;color:#fff;background:var(--color-grey-1)}.app .select-box .list .item .percent.red{background:var(--color-red-1)}.app .select-box .list .item .percent.green{background:var(--color-green-3)}.app .select-box .list .item:hover{color:var(--color-orange-1);background:rgba(255,255,255,0.35)}.app .select-box .list .item.active{color:var(--color-orange-3);background:rgba(255,255,255,0.7)}.app .detail{flex:1;height:100%;border-left:1px solid var(--color-plain-2);background:#fff}.app .detail .title{width:100%;height:35px;padding:0 16px;line-height:35px;font-size:16px;font-weight:bold}.app .detail .card{width:96%;padding:12px 12px 16px;margin:12px 2% 24px;border:0;background:#fff;box-shadow:0 0 8px rgba(0,0,0,0.075)}.app .detail .card legend{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#64b5f6}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
* 主窗口样式
|
||||
* @authors yutent<yutent@doui.cc>
|
||||
* @date 2018/12/16 17:15:07
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 12.8px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 1.25;
|
||||
font-size: 14px;
|
||||
color: var(--color-dark-1);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.app-drag {
|
||||
-webkit-app-region: drag;
|
||||
user-select: none;
|
||||
}
|
||||
.app-nodrag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.app {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 76px;
|
||||
height: 100%;
|
||||
padding: 48px 22px 24px;
|
||||
background: var(--color-dark-1);
|
||||
color: var(--color-plain-1);
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--color-orange-1);
|
||||
}
|
||||
&:active {
|
||||
color: var(--color-orange-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
padding: 0 6px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--color-plain-2);
|
||||
|
||||
wc-input {
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 48px;
|
||||
padding: 6px;
|
||||
transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
cite {
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
|
||||
.percent {
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: var(--color-grey-1);
|
||||
|
||||
&.red {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
&.green {
|
||||
background: var(--color-green-3);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-orange-1);
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-orange-3);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-left: 1px solid var(--color-plain-2);
|
||||
background: #fff;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 96%;
|
||||
padding: 12px 12px 16px;
|
||||
margin: 12px 2% 24px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.075);
|
||||
|
||||
legend {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
color: #64b5f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;line-height:1.25;font-size:14px;color:var(--color-dark-1);background:rgba(255,255,255,0.3)}.app-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app-nodrag{-webkit-app-region:no-drag}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:6px 0;border-radius:6px}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:54px;padding:10px 12px;line-height:15px;border-bottom:1px solid var(--color-plain-3)}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:14px}.app .list .item .info cite{color:var(--color-grey-2)}.app .list .item .last-days{display:flex;width:64px;height:30px;margin:0 6px}.app .list .item .today{width:52px;font-size:12px;text-align:right}.app .list .item .today span{display:block;padding:0 4px}.app .list .item .today .percent{border-radius:2px;color:#fff}.app .list .item .today .percent.red{background:var(--color-red-1)}.app .list .item .today .percent.green{background:var(--color-green-3)}
|
||||
html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;line-height:1.25;font-size:14px;color:var(--color-dark-1);background:rgba(255,255,255,0.3)}.app-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app-nodrag{-webkit-app-region:no-drag}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:6px 0}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:54px;padding:10px 12px;line-height:15px;border-bottom:1px solid rgba(155,155,155,0.3)}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:14px}.app .list .item .info cite{color:var(--color-grey-2)}.app .list .item .last-days{display:flex;width:64px;height:30px;margin:0 6px}.app .list .item .today{width:52px;font-size:12px;text-align:right}.app .list .item .today span{display:block;padding:0 4px}.app .list .item .today .percent{border-radius:2px;color:#fff}.app .list .item .today .percent.red{background:var(--color-red-1)}.app .list .item .today .percent.green{background:var(--color-green-3)}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ body {
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 6px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
|
|
@ -47,7 +46,7 @@ body {
|
|||
height: 54px;
|
||||
padding: 10px 12px;
|
||||
line-height: 15px;
|
||||
border-bottom: 1px solid var(--color-plain-3);
|
||||
border-bottom: 1px solid rgba(155, 155, 155, 0.3);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
<link href="/css/float.css" rel="stylesheet">
|
||||
<script src="/js/float.js" type="module"></script>
|
||||
</head>
|
||||
<body class="do-fn-noselect">
|
||||
<body class="noselect">
|
||||
|
||||
<div class="app" anot="app">
|
||||
<wc-scroll class="list">
|
||||
<section class="item" :for="it in list">
|
||||
<div class="info">
|
||||
<h3 class="do-fn-ell" :text="it.name"></h3>
|
||||
<h3 class="text-ell" :text="it.name"></h3>
|
||||
<cite :text="it.code"></cite>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,32 +9,56 @@
|
|||
<link href="/css/app.css" rel="stylesheet">
|
||||
<script src="/js/app.js" type="module"></script>
|
||||
</head>
|
||||
<body class="do-fn-noselect">
|
||||
<body class="noselect">
|
||||
|
||||
<div class="app" anot="app">
|
||||
<wc-icon class="close" color="red" is="close" @click="close"></wc-icon>
|
||||
<wc-icon class="load" color="red" is="load" @click="updateGays"></wc-icon>
|
||||
<wc-icon class="option" is="option" @click="addGay"></wc-icon>
|
||||
|
||||
<wc-scroll class="list">
|
||||
<section class="item" :for="it in list">
|
||||
<div class="info" @dblclick="removeGay(it)">
|
||||
<h3 class="do-fn-ell" :text="it.name"></h3>
|
||||
<cite :text="it.code"></cite>
|
||||
</div>
|
||||
<aside class="sidebar app-drag">
|
||||
<wc-icon class="app-nodrag item stat active" is="chart"></wc-icon>
|
||||
<wc-icon class="app-nodrag item opt" is="menu-dot"></wc-icon>
|
||||
</aside>
|
||||
|
||||
<canvas class="last-days" width="128" height="60" :draw="it.last"></canvas>
|
||||
|
||||
<div class="today">
|
||||
<span class="money" :text="it.curr"></span>
|
||||
<span
|
||||
class="percent"
|
||||
:class="{red: it.percent > 0, green: it.percent < 0}"
|
||||
:text="it.percent + '%'">
|
||||
</span>
|
||||
</div>
|
||||
<div class="select-box">
|
||||
<section class="form">
|
||||
<wc-input maxlength="6" placeholder="输入编号搞新基" round size="mini"></wc-input>
|
||||
<wc-button circle size="mini" color="orange" icon="plus"></wc-button>
|
||||
</section>
|
||||
</wc-scroll>
|
||||
<wc-scroll class="list">
|
||||
<item
|
||||
class="item"
|
||||
:class="{active: curr.code === it.code}"
|
||||
:for="it in list">
|
||||
<strong class="text-ell" :text="it.name"></strong>
|
||||
<section>
|
||||
<cite :text="it.code"></cite>
|
||||
<span
|
||||
class="percent"
|
||||
:class="{red: it.percent > 0, green: it.percent < 0}"
|
||||
:text="it.percent + '%'">
|
||||
</span>
|
||||
</section>
|
||||
</item>
|
||||
</wc-scroll>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="detail">
|
||||
<section class="title app-drag">
|
||||
[{{curr.code}}] {{curr.name}}
|
||||
</section>
|
||||
|
||||
<fieldset class="card">
|
||||
<legend>60天红绿榜</legend>
|
||||
<wc-rank :attr-list="curr.last60"></wc-rank>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="card">
|
||||
<legend>单位净值走势</legend>
|
||||
<wc-rank :attr-list="curr.last60"></wc-rank>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
import '/lib/anot.js'
|
||||
import '/lib/form/button.js'
|
||||
import '/lib/scroll/index.js'
|
||||
import '/lib/chart/rank.js'
|
||||
import '/lib/canvas-draw.js'
|
||||
|
||||
import layer from '/lib/layer/index.js'
|
||||
|
|
@ -18,7 +19,7 @@ const log = console.log
|
|||
|
||||
const { ipcRenderer } = require('electron')
|
||||
|
||||
// const WIN = remote.getCurrentWindow()
|
||||
// http://fund.eastmoney.com/pingzhongdata/161725.js?v=20201209153939
|
||||
|
||||
const $doc = Anot(document)
|
||||
|
||||
|
|
@ -59,6 +60,72 @@ function getTableData(str) {
|
|||
Anot({
|
||||
$id: 'app',
|
||||
state: {
|
||||
curr: {
|
||||
code: '161725',
|
||||
name: '招商中证白酒指数分级',
|
||||
last60: [
|
||||
1.56,
|
||||
2.81,
|
||||
0.82,
|
||||
-0.18,
|
||||
-1.67,
|
||||
-2.34,
|
||||
1.36,
|
||||
-1.52,
|
||||
-0.92,
|
||||
-0.49,
|
||||
-1.74,
|
||||
0.03,
|
||||
1.15,
|
||||
-0.21,
|
||||
0.46,
|
||||
1.45,
|
||||
5.54,
|
||||
1.7,
|
||||
-0.33,
|
||||
-0.11,
|
||||
-1.11,
|
||||
-0.76,
|
||||
3.16,
|
||||
0.32,
|
||||
1.85,
|
||||
-2.54,
|
||||
-1.08,
|
||||
0.91,
|
||||
3.27,
|
||||
2.84,
|
||||
-2.83,
|
||||
1.67,
|
||||
1.1,
|
||||
0.48,
|
||||
1.89,
|
||||
-0.66,
|
||||
1.91,
|
||||
2.15,
|
||||
0.12,
|
||||
1.75,
|
||||
-3.43,
|
||||
3.88,
|
||||
-1.37,
|
||||
-1.62,
|
||||
0.38,
|
||||
1.49,
|
||||
1.03,
|
||||
0.6,
|
||||
-3.51,
|
||||
0.5,
|
||||
0.6,
|
||||
-3.01,
|
||||
0.87,
|
||||
-0.03,
|
||||
0.99,
|
||||
3.4,
|
||||
0.32,
|
||||
1.53,
|
||||
-0.46,
|
||||
0.84
|
||||
].join(',')
|
||||
},
|
||||
list: [],
|
||||
$dict: {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -77,8 +77,14 @@ Anot({
|
|||
this.$dict[it.code] = it
|
||||
}
|
||||
|
||||
app.on('float-visible', function(data) {
|
||||
console.log(data)
|
||||
app.on('float-visible', data => {
|
||||
var time = +Anot.ss('last_update') || 0
|
||||
var now = Date.now()
|
||||
// 如果离上次更新超过15分钟, 则自动更新
|
||||
if (now - time > 15 * 60 * 1000) {
|
||||
this.updateGays()
|
||||
Anot.ss('last_update', now)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
const RED = '#ff5061'
|
||||
const GREEN = '#4caf50'
|
||||
const GREY = '#bdbdbd'
|
||||
const PLAIN = '#f2f5fc'
|
||||
|
||||
export default class Rank extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['list']
|
||||
}
|
||||
|
||||
props = {
|
||||
list: ''
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
display: flex; }
|
||||
|
||||
canvas {
|
||||
width: 680px;
|
||||
height: 100px; }
|
||||
</style>
|
||||
<canvas></canvas>
|
||||
`
|
||||
|
||||
this.__SCENE__ = this.root.children[1]
|
||||
this.__CTX__ = this.__SCENE__.getContext('2d')
|
||||
this.__SCENE__.width = 680
|
||||
this.__SCENE__.height = 100
|
||||
}
|
||||
|
||||
draw() {
|
||||
var { list } = this.props
|
||||
var ctx = this.__CTX__
|
||||
var x = 32
|
||||
|
||||
while (list.length < 60) {
|
||||
list.unshift(0)
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, 680, 101)
|
||||
|
||||
ctx.font = '10px Arial'
|
||||
ctx.textAlign = 'right'
|
||||
ctx.fillStyle = RED
|
||||
ctx.fillText('10%', 28, 10)
|
||||
ctx.fillText('5%', 28, 30)
|
||||
ctx.fillStyle = GREEN
|
||||
ctx.fillText('-5%', 28, 80)
|
||||
ctx.fillText('-10%', 28, 100)
|
||||
|
||||
ctx.fillStyle = PLAIN
|
||||
ctx.fillRect(28, 25, 652, 1)
|
||||
ctx.fillRect(28, 75, 652, 1)
|
||||
ctx.fillStyle = GREY
|
||||
ctx.fillRect(28, 0, 1, 140)
|
||||
ctx.fillRect(0, 50, 680, 1)
|
||||
|
||||
while (list.length) {
|
||||
var n = list.shift()
|
||||
var y = Math.ceil(50 - (n / 10) * 50)
|
||||
|
||||
ctx.fillStyle = n > 0 ? RED : GREEN
|
||||
|
||||
if (y > 50) {
|
||||
ctx.fillRect(x, 50, 3, y - 50)
|
||||
} else {
|
||||
ctx.fillRect(x, y, 3, 50 - y)
|
||||
}
|
||||
|
||||
x += 10
|
||||
}
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {
|
||||
return
|
||||
}
|
||||
switch (name) {
|
||||
case 'list':
|
||||
var list = val.split(',')
|
||||
this.props.list = list.map(n => +n)
|
||||
this.removeAttribute('list')
|
||||
this.draw()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!customElements.get('wc-rank')) {
|
||||
customElements.define('wc-rank', Rank)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,311 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import "../icon/index.js"
|
||||
import $ from "../utils.js"
|
||||
|
||||
export default class CheckboxItem extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["color","value","checked","readonly","disabled"]
|
||||
}
|
||||
|
||||
props = {
|
||||
color: '',
|
||||
value: '',
|
||||
checked: false,
|
||||
readonly: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
font-size: 14px; }
|
||||
:host label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 5px;
|
||||
line-height: 0;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
cursor: inherit;
|
||||
color: var(--color-grey-3); }
|
||||
:host .dot {
|
||||
--size: 18px;
|
||||
padding: 2px;
|
||||
margin-right: 3px; }
|
||||
|
||||
:host([readonly]) {
|
||||
opacity: 0.8; }
|
||||
|
||||
:host([disabled]) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6; }
|
||||
|
||||
:host([size='large']) {
|
||||
font-size: 16px; }
|
||||
:host([size='large']) label {
|
||||
height: 42px; }
|
||||
:host([size='large']) .dot {
|
||||
--size: 22px; }
|
||||
|
||||
:host([size='medium']) label {
|
||||
height: 38px; }
|
||||
|
||||
:host([size='medium']) .dot {
|
||||
--size: 20px; }
|
||||
|
||||
:host([size='mini']) {
|
||||
font-size: 12px; }
|
||||
:host([size='mini']) label {
|
||||
height: 20px; }
|
||||
:host([size='mini']) .dot {
|
||||
--size: 14px; }
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
color: var(--color-red-1); }
|
||||
:host([color='red']) label.checked .dot {
|
||||
border-color: var(--color-red-1); }
|
||||
:host([color='red']) label.checked .dot::after {
|
||||
background: var(--color-red-1); }
|
||||
|
||||
:host([color='blue']) label.checked {
|
||||
color: var(--color-blue-1); }
|
||||
:host([color='blue']) label.checked .dot {
|
||||
border-color: var(--color-blue-1); }
|
||||
:host([color='blue']) label.checked .dot::after {
|
||||
background: var(--color-blue-1); }
|
||||
|
||||
:host([color='green']) label.checked {
|
||||
color: var(--color-green-1); }
|
||||
:host([color='green']) label.checked .dot {
|
||||
border-color: var(--color-green-1); }
|
||||
:host([color='green']) label.checked .dot::after {
|
||||
background: var(--color-green-1); }
|
||||
|
||||
:host([color='teal']) label.checked {
|
||||
color: var(--color-teal-1); }
|
||||
:host([color='teal']) label.checked .dot {
|
||||
border-color: var(--color-teal-1); }
|
||||
:host([color='teal']) label.checked .dot::after {
|
||||
background: var(--color-teal-1); }
|
||||
|
||||
:host([color='orange']) label.checked {
|
||||
color: var(--color-orange-1); }
|
||||
:host([color='orange']) label.checked .dot {
|
||||
border-color: var(--color-orange-1); }
|
||||
:host([color='orange']) label.checked .dot::after {
|
||||
background: var(--color-orange-1); }
|
||||
|
||||
:host([color='dark']) label.checked {
|
||||
color: var(--color-dark-1); }
|
||||
:host([color='dark']) label.checked .dot {
|
||||
border-color: var(--color-dark-1); }
|
||||
:host([color='dark']) label.checked .dot::after {
|
||||
background: var(--color-dark-1); }
|
||||
|
||||
:host([color='purple']) label.checked {
|
||||
color: var(--color-purple-1); }
|
||||
:host([color='purple']) label.checked .dot {
|
||||
border-color: var(--color-purple-1); }
|
||||
:host([color='purple']) label.checked .dot::after {
|
||||
background: var(--color-purple-1); }
|
||||
</style>
|
||||
<label>
|
||||
<wc-icon class="dot" is="checkbox-off"></wc-icon>
|
||||
<slot />
|
||||
</label>
|
||||
`
|
||||
|
||||
|
||||
this.__SWITCH__ = this.root.lastElementChild
|
||||
this.__ICO__ = this.__SWITCH__.children[0]
|
||||
|
||||
this._isInGroup = false
|
||||
}
|
||||
|
||||
_checkGroup() {
|
||||
this._isInGroup = this.parentNode.tagName === 'WC-CHECKBOX'
|
||||
if (this._isInGroup && this.parentNode.root) {
|
||||
if (this.parentNode.value.includes(this.value)) {
|
||||
this.checked = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.props.value = val
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.props.checked
|
||||
}
|
||||
|
||||
set checked(val) {
|
||||
this.props.checked = !!val
|
||||
var { checked, color } = this.props
|
||||
this.__SWITCH__.classList.toggle('checked', checked)
|
||||
this.__ICO__.setAttribute('is', 'checkbox-' + (checked ? 'on' : 'off'))
|
||||
|
||||
if (checked) {
|
||||
this.__ICO__.setAttribute('color', color)
|
||||
} else {
|
||||
this.__ICO__.removeAttribute('color')
|
||||
}
|
||||
}
|
||||
|
||||
get readOnly() {
|
||||
return this.props.readonly
|
||||
}
|
||||
|
||||
set readOnly(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.readonly) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.readonly = true
|
||||
this.setAttribute('readonly', '')
|
||||
} else {
|
||||
this.props.readonly = false
|
||||
this.removeAttribute('readonly')
|
||||
}
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.props.disabled
|
||||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._checkGroup()
|
||||
|
||||
this._handlClick = $.bind(this, 'click', ev => {
|
||||
ev.preventDefault()
|
||||
|
||||
if (this.disabled || this.readOnly) {
|
||||
return
|
||||
}
|
||||
|
||||
this.checked = !this.checked
|
||||
|
||||
if (this._isInGroup) {
|
||||
this.parentNode.dispatchEvent(
|
||||
new CustomEvent('child-picked', {
|
||||
detail: { value: this.value, checked: this.checked }
|
||||
})
|
||||
)
|
||||
} else {
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
$.unbind(this, 'click', this._handlClick)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'value':
|
||||
case 'color':
|
||||
this.props[name] = val
|
||||
break
|
||||
|
||||
case 'checked':
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
var k = name
|
||||
if (k === 'readonly') {
|
||||
k = 'readOnly'
|
||||
}
|
||||
this[k] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-checkbox-item')){
|
||||
customElements.define('wc-checkbox-item', CheckboxItem)
|
||||
}
|
||||
|
|
@ -1,14 +1,141 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-07-22 19:57:05
|
||||
* @version v2.0.1
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import"../icon/index.js";import $ from"../utils.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["label","color","value","checked","readonly","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",color:"",value:[],checked:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;line-height:1;font-size:14px}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 5px;line-height:0;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;color:#757575}:host .dot{--size: 18px;padding:2px;margin-right:3px}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']){font-size:16px}:host([size='large']) label{height:42px}:host([size='large']) .dot{--size: 22px}:host([size='medium']) label{height:38px}:host([size='medium']) .dot{--size: 20px}:host([size='mini']){font-size:12px}:host([size='mini']) label{height:20px}:host([size='mini']) .dot{--size: 14px}:host([color='red']) label.checked{color:#ff5061}:host([color='red']) label.checked .dot{border-color:#ff5061}:host([color='red']) label.checked .dot::after{background:#ff5061}:host([color='blue']) label.checked{color:#64b5f6}:host([color='blue']) label.checked .dot{border-color:#64b5f6}:host([color='blue']) label.checked .dot::after{background:#64b5f6}:host([color='green']) label.checked{color:#81c784}:host([color='green']) label.checked .dot{border-color:#81c784}:host([color='green']) label.checked .dot::after{background:#81c784}:host([color='teal']) label.checked{color:#4db6ac}:host([color='teal']) label.checked .dot{border-color:#4db6ac}:host([color='teal']) label.checked .dot::after{background:#4db6ac}:host([color='orange']) label.checked{color:#ffb618}:host([color='orange']) label.checked .dot{border-color:#ffb618}:host([color='orange']) label.checked .dot::after{background:#ffb618}:host([color='dark']) label.checked{color:#62778d}:host([color='dark']) label.checked .dot{border-color:#62778d}:host([color='dark']) label.checked .dot::after{background:#62778d}:host([color='purple']) label.checked{color:#9575cd}:host([color='purple']) label.checked .dot{border-color:#9575cd}:host([color='purple']) label.checked .dot::after{background:#9575cd}</style> <label> <wc-icon class=\"dot\" is=\"checkbox-off\"></wc-icon> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0]}get value(){return this.props.value}set value(e){Array.isArray(e)?(this.props.value=e,this.checked=this.props.value.includes(this.props.label)):console.error("checkbox组件的value必须是数组, 当前为: "+typeof e)}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e;var{value:o,checked:t,label:l,color:r}=this.props;this.__SWITCH__.classList.toggle("checked",t),this.__ICO__.setAttribute("is","checkbox-"+(t?"on":"off"));var c=o.indexOf(l);t?(this.__ICO__.setAttribute("color",r),c<0&&o.push(l)):(this.__ICO__.removeAttribute("color"),~c&&o.splice(c,1))}get readOnly(){return this.props.readonly}set readOnly(e){var o=typeof e;e!==this.props.readonly&&("boolean"===o&&e||"boolean"!==o?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var o=typeof e;e!==this.props.disabled&&("boolean"===o&&e||"boolean"!==o?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handlClick=$.bind(this,"click",e=>{e.preventDefault(),this.disabled||this.readOnly||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){$.unbind(this,"click",this._handlClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":case"color":this.props[e]=t;break;case"checked":case"readonly":case"disabled":var l=e;"readonly"===l&&(l="readOnly"),this[l]=!0}}};
|
||||
import $ from "../utils.js"
|
||||
import "./checkbox-item.js"
|
||||
|
||||
export default class Checkbox extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["value"]
|
||||
}
|
||||
|
||||
props = {
|
||||
value: []
|
||||
}
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: inline-flex; }
|
||||
</style>
|
||||
<slot />
|
||||
`
|
||||
|
||||
}
|
||||
|
||||
_updateChildrenStat() {
|
||||
Array.from(this.children).forEach(it => {
|
||||
if (it.tagName === 'WC-CHECKBOX-ITEM' && it.root) {
|
||||
if (this.value.includes(it.value)) {
|
||||
it.checked = true
|
||||
} else {
|
||||
it.checked = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
if (val === this.props.value) {
|
||||
return
|
||||
}
|
||||
this.props.value = val
|
||||
this._updateChildrenStat()
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
||||
var tmp = [...this.props.value]
|
||||
var idx = tmp.indexOf(ev.detail.value)
|
||||
if (ev.detail.checked) {
|
||||
if (idx < 0) {
|
||||
tmp.push(ev.detail.value)
|
||||
}
|
||||
} else {
|
||||
if (~idx) {
|
||||
tmp.splice(idx, 1)
|
||||
}
|
||||
}
|
||||
this.props.value = tmp
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
$.unbind(this, 'child-picked', this._pickedFn)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'value':
|
||||
if (val) {
|
||||
this.value = val.split(/,\s*?/)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-checkbox')){
|
||||
customElements.define('wc-checkbox', Checkbox)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,162 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-07-22 19:57:05
|
||||
* @version v2.0.1
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
export default class Progress extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,max:1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:flex;align-items:center}:host label{flex:1;height:var(--size, 10px);border-radius:9px;background:#e8ebf4}:host label span{display:block;width:0;height:100%;border-radius:9px;background:#4db6ac}:host([size='large']) label{height:18px}:host([size='medium']) label{height:14px}:host([size='mini']) label{height:6px}:host([color='red']) label span{background:#ff5061}:host([color='blue']) label span{background:#64b5f6}:host([color='green']) label span{background:#81c784}:host([color='orange']) label span{background:#ffb618}:host([color='dark']) label span{background:#62778d}:host([color='purple']) label span{background:#9575cd}</style> <label><span></span></label> ",this.__THUMB__=this.root.children[1].lastElementChild}get value(){return this.props.value}set value(e){this.props.value=+e,this.calculate()}calculate(){var{max:e,value:a}=this.props;this.__THUMB__.style.width=`${100*a/e}%`}connectedCallback(){this.calculate()}attributeChangedCallback(e,a,l){if(null!==l&&a!==l)switch(e){case"max":var t=+l;(t!=t||t<1)&&(t=1),this.props.max=t,this.calculate();break;case"value":var r=+l;r==r&&(this.props.value=r,this.calculate())}}};
|
||||
export default class Progress extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["value","max"]
|
||||
}
|
||||
|
||||
props = {
|
||||
value: 0,
|
||||
max: 1
|
||||
}
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
:host label {
|
||||
flex: 1;
|
||||
height: var(--size, 10px);
|
||||
border-radius: 9px;
|
||||
background: var(--color-plain-2); }
|
||||
:host label span {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: 9px;
|
||||
background: var(--color-teal-1); }
|
||||
|
||||
:host([size='large']) label {
|
||||
height: 18px; }
|
||||
|
||||
:host([size='medium']) label {
|
||||
height: 14px; }
|
||||
|
||||
:host([size='mini']) label {
|
||||
height: 6px; }
|
||||
|
||||
:host([color='red']) label span {
|
||||
background: var(--color-red-1); }
|
||||
|
||||
:host([color='blue']) label span {
|
||||
background: var(--color-blue-1); }
|
||||
|
||||
:host([color='green']) label span {
|
||||
background: var(--color-green-1); }
|
||||
|
||||
:host([color='orange']) label span {
|
||||
background: var(--color-orange-1); }
|
||||
|
||||
:host([color='dark']) label span {
|
||||
background: var(--color-dark-1); }
|
||||
|
||||
:host([color='purple']) label span {
|
||||
background: var(--color-purple-1); }
|
||||
</style>
|
||||
<label><span></span></label>
|
||||
`
|
||||
|
||||
this.__THUMB__ = this.root.children[1].lastElementChild
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.props.value = +val
|
||||
this.calculate()
|
||||
}
|
||||
|
||||
calculate() {
|
||||
var { max, value } = this.props
|
||||
this.__THUMB__.style.width = `${(100 * value) / max}%`
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.calculate()
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'max':
|
||||
var max = +val
|
||||
if (max !== max || max < 1) {
|
||||
max = 1
|
||||
}
|
||||
this.props.max = max
|
||||
this.calculate()
|
||||
break
|
||||
|
||||
case 'value':
|
||||
var v = +val
|
||||
if (v === v) {
|
||||
this.props.value = v
|
||||
this.calculate()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-progress')){
|
||||
customElements.define('wc-progress', Progress)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import $ from "../utils.js"
|
||||
|
||||
export default class RadioItem extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["value","checked","readonly","disabled"]
|
||||
}
|
||||
|
||||
props = {
|
||||
value: '',
|
||||
checked: false,
|
||||
readonly: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
font-size: 14px; }
|
||||
:host label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
cursor: inherit;
|
||||
color: var(--color-grey-3); }
|
||||
:host label.checked .dot::after {
|
||||
visibility: visible; }
|
||||
:host .dot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
border: 1px solid var(--color-grey-1);
|
||||
border-radius: 50%;
|
||||
background: #fff; }
|
||||
:host .dot::after {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-grey-1);
|
||||
content: ''; }
|
||||
|
||||
:host([readonly]) {
|
||||
opacity: 0.8; }
|
||||
|
||||
:host([disabled]) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6; }
|
||||
|
||||
:host([size='large']) label {
|
||||
min-width: 58px;
|
||||
height: 32px; }
|
||||
|
||||
:host([size='large']) .dot {
|
||||
width: 26px;
|
||||
height: 26px; }
|
||||
:host([size='large']) .dot::after {
|
||||
width: 18px;
|
||||
height: 18px; }
|
||||
|
||||
:host([size='medium']) label {
|
||||
min-width: 50px;
|
||||
height: 28px; }
|
||||
|
||||
:host([size='medium']) .dot {
|
||||
width: 22px;
|
||||
height: 22px; }
|
||||
:host([size='medium']) .dot::after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
|
||||
:host([size='mini']) label {
|
||||
height: 14px; }
|
||||
|
||||
:host([size='mini']) .dot {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
:host([size='mini']) .dot::after {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
color: var(--color-red-1); }
|
||||
:host([color='red']) label.checked .dot {
|
||||
border-color: var(--color-red-1); }
|
||||
:host([color='red']) label.checked .dot::after {
|
||||
background: var(--color-red-1); }
|
||||
|
||||
:host([color='blue']) label.checked {
|
||||
color: var(--color-blue-1); }
|
||||
:host([color='blue']) label.checked .dot {
|
||||
border-color: var(--color-blue-1); }
|
||||
:host([color='blue']) label.checked .dot::after {
|
||||
background: var(--color-blue-1); }
|
||||
|
||||
:host([color='green']) label.checked {
|
||||
color: var(--color-green-1); }
|
||||
:host([color='green']) label.checked .dot {
|
||||
border-color: var(--color-green-1); }
|
||||
:host([color='green']) label.checked .dot::after {
|
||||
background: var(--color-green-1); }
|
||||
|
||||
:host([color='teal']) label.checked {
|
||||
color: var(--color-teal-1); }
|
||||
:host([color='teal']) label.checked .dot {
|
||||
border-color: var(--color-teal-1); }
|
||||
:host([color='teal']) label.checked .dot::after {
|
||||
background: var(--color-teal-1); }
|
||||
|
||||
:host([color='orange']) label.checked {
|
||||
color: var(--color-orange-1); }
|
||||
:host([color='orange']) label.checked .dot {
|
||||
border-color: var(--color-orange-1); }
|
||||
:host([color='orange']) label.checked .dot::after {
|
||||
background: var(--color-orange-1); }
|
||||
|
||||
:host([color='dark']) label.checked {
|
||||
color: var(--color-dark-1); }
|
||||
:host([color='dark']) label.checked .dot {
|
||||
border-color: var(--color-dark-1); }
|
||||
:host([color='dark']) label.checked .dot::after {
|
||||
background: var(--color-dark-1); }
|
||||
|
||||
:host([color='purple']) label.checked {
|
||||
color: var(--color-purple-1); }
|
||||
:host([color='purple']) label.checked .dot {
|
||||
border-color: var(--color-purple-1); }
|
||||
:host([color='purple']) label.checked .dot::after {
|
||||
background: var(--color-purple-1); }
|
||||
</style>
|
||||
<label>
|
||||
<span class="dot"></span>
|
||||
<slot />
|
||||
</label>
|
||||
`
|
||||
|
||||
|
||||
this.__SWITCH__ = this.root.lastElementChild
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.props.value = val
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.props.checked
|
||||
}
|
||||
|
||||
set checked(val) {
|
||||
this.props.checked = !!val
|
||||
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
||||
}
|
||||
|
||||
get readOnly() {
|
||||
return this.props.readonly
|
||||
}
|
||||
|
||||
set readOnly(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.readonly) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.readonly = true
|
||||
this.setAttribute('readonly', '')
|
||||
} else {
|
||||
this.props.readonly = false
|
||||
this.removeAttribute('readonly')
|
||||
}
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.props.disabled
|
||||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.value === this.parentNode.value) {
|
||||
this.checked = true
|
||||
}
|
||||
|
||||
this._handleClick = $.catch(this, 'click', ev => {
|
||||
if (this.disabled || this.readOnly || this.checked) {
|
||||
return
|
||||
}
|
||||
|
||||
this.parentNode.dispatchEvent(
|
||||
new CustomEvent('child-picked', { detail: this.value })
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
$.unbind(this, 'click', this._handleClick)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'value':
|
||||
this.value = val
|
||||
break
|
||||
|
||||
case 'checked':
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
var k = name
|
||||
if (k === 'readonly') {
|
||||
k = 'readOnly'
|
||||
}
|
||||
this[k] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-radio-item')){
|
||||
customElements.define('wc-radio-item', RadioItem)
|
||||
}
|
||||
|
|
@ -1,14 +1,129 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-07-22 19:57:05
|
||||
* @version v2.0.1
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import $ from"../utils.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["label","checked","readonly","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",checked:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;line-height:1;font-size:14px}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 5px;line-height:0;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;color:#757575}:host label.checked .dot::after{content:''}:host .dot{display:flex;justify-content:center;align-items:center;width:18px;height:18px;padding:2px;margin-right:3px;border:1px solid #bdbdbd;border-radius:50%;background:#fff}:host .dot::after{display:block;width:12px;height:12px;border-radius:50%;background:#bdbdbd}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{min-width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='large']) .dot::after{width:18px;height:18px}:host([size='medium']) label{min-width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='medium']) .dot::after{width:14px;height:14px}:host([size='mini']) label{height:14px}:host([size='mini']) .dot{width:14px;height:14px}:host([size='mini']) .dot::after{width:8px;height:8px}:host([color='red']) label.checked{color:#ff5061}:host([color='red']) label.checked .dot{border-color:#ff5061}:host([color='red']) label.checked .dot::after{background:#ff5061}:host([color='blue']) label.checked{color:#64b5f6}:host([color='blue']) label.checked .dot{border-color:#64b5f6}:host([color='blue']) label.checked .dot::after{background:#64b5f6}:host([color='green']) label.checked{color:#81c784}:host([color='green']) label.checked .dot{border-color:#81c784}:host([color='green']) label.checked .dot::after{background:#81c784}:host([color='teal']) label.checked{color:#4db6ac}:host([color='teal']) label.checked .dot{border-color:#4db6ac}:host([color='teal']) label.checked .dot::after{background:#4db6ac}:host([color='orange']) label.checked{color:#ffb618}:host([color='orange']) label.checked .dot{border-color:#ffb618}:host([color='orange']) label.checked .dot::after{background:#ffb618}:host([color='dark']) label.checked{color:#62778d}:host([color='dark']) label.checked .dot{border-color:#62778d}:host([color='dark']) label.checked .dot::after{background:#62778d}:host([color='purple']) label.checked{color:#9575cd}:host([color='purple']) label.checked .dot{border-color:#9575cd}:host([color='purple']) label.checked .dot::after{background:#9575cd}</style> <label> <span class=\"dot\"></span> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild}get value(){return this.props.label}set value(e){this.checked=this.props.label===e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get readOnly(){return this.props.readonly}set readOnly(e){var o=typeof e;e!==this.props.readonly&&("boolean"===o&&e||"boolean"!==o?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var o=typeof e;e!==this.props.disabled&&("boolean"===o&&e||"boolean"!==o?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handleClick=$.catch(this,"click",e=>{this.disabled||this.readOnly||this.checked||(this.checked=!0,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){$.unbind(this,"click",this._handleClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":this.props.label=t;break;case"checked":case"readonly":case"disabled":var l=e;"readonly"===l&&(l="readOnly"),this[l]=!0}}};
|
||||
import $ from "../utils.js"
|
||||
import "./radio-item.js"
|
||||
|
||||
export default class Radio extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["value"]
|
||||
}
|
||||
|
||||
props = {
|
||||
value: null
|
||||
}
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: inline-flex; }
|
||||
</style>
|
||||
<slot />
|
||||
`
|
||||
|
||||
}
|
||||
|
||||
_updateChildrenStat() {
|
||||
Array.from(this.children).forEach(it => {
|
||||
if (it.tagName === 'WC-RADIO-ITEM' && it.root) {
|
||||
if (it.value === this.props.value) {
|
||||
it.checked = true
|
||||
} else {
|
||||
it.checked = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
if (val === this.props.value) {
|
||||
return
|
||||
}
|
||||
this.props.value = val
|
||||
this._updateChildrenStat()
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
||||
log('radio picked: ', ev.detail)
|
||||
this.value = ev.detail
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
$.unbind(this, 'child-picked', this._pickedFn)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'value':
|
||||
this.value = val
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-radio')){
|
||||
customElements.define('wc-radio', Radio)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,300 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-07-22 19:57:05
|
||||
* @version v2.0.1
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import $ from"../utils.js";export default class Star extends HTMLElement{static get observedAttributes(){return["value","text","size","color","allow-half","show-value","starSize","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,text:[],size:"",color:"","allow-half":!1,"show-value":!1,starSize:32,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;font-size:14px;--size: 24px}label{display:flex;align-items:center;line-height:0;cursor:inherit}label wc-icon{margin:0 3px;transition:transform .1s ease-in-out}label wc-icon:hover{transform:scale(1.05)}label span{padding:0 8px;margin:0 3px}:host([size=\'large\']){font-size:16px;--size: 36px}:host([size=\'medium\']){--size: 30px}:host([size=\'mini\']){font-size:12px;--size: 20px}:host([color=\'red\']) label span{color:#ff5061}:host([color=\'teal\']) label span{color:#4db6ac}:host([color=\'green\']) label span{color:#81c784}:host([color=\'grey\']) label span{color:#bdbdbd}:host([color=\'blue\']) label span{color:#64b5f6}:host([color=\'purple\']) label span{color:#9575cd}:host([color=\'orange\']) label span{color:#ffb618}:host([disabled]){cursor:default;opacity:0.6}:host([disabled]) label wc-icon:hover{transform:none}</style> <label> <wc-icon data-idx="0" is="star" color="grey"></wc-icon> <wc-icon data-idx="1" is="star" color="grey"></wc-icon> <wc-icon data-idx="2" is="star" color="grey"></wc-icon> <wc-icon data-idx="3" is="star" color="grey"></wc-icon> <wc-icon data-idx="4" is="star" color="grey"></wc-icon> <span class="text"></span> </label> ',this.__BOX__=this.root.children[1],this.__STARS__=Array.from(this.__BOX__.children),this.__TEXT__=this.__STARS__.pop()}get value(){return this.props.value}set value(t){var e=+t;(t=e==e&&e>0?e:0)>5&&(t=5),this.props.value=t,this._updateDraw(-1)}_updateDraw(t,e=0){var s="star-half",{value:o,tmp:a={i:0,f:0}}=this.props;-1===t&&(t=Math.floor(o),e=+(o%1).toFixed(1),t>0&&t===o&&(t--,e=1)),this.props["allow-half"]||(e=e>0?1:0),t===a.i&&e===a.f||(e>.5&&(s="star-full"),this.__STARS__.forEach((e,s)=>{e.setAttribute("is",s<t?"star-full":"star"),e.setAttribute("color",s<t?this.props.color:"grey")}),e>0&&(this.__STARS__[t].setAttribute("is",s),this.__STARS__[t].setAttribute("color",this.props.color)),this.props.tmp={i:t,f:e},0===t&&0===e?this.__TEXT__.textContent="":5===this.props.text.length?this.__TEXT__.textContent=this.props.text[t]:this.props["show-value"]&&(this.__TEXT__.textContent=t+e))}connectedCallback(){$.catch(this.__BOX__,"mousemove",t=>{if(!this.props.disabled&&"WC-ICON"===t.target.tagName){let e=+t.target.dataset.idx;this._updateDraw(e,+(t.offsetX/this.props.starSize).toFixed(1))}}),$.catch(this.__BOX__,"click",t=>{var{tmp:e,disabled:s}=this.props;s||"WC-ICON"===t.target.tagName&&(this.props.value=e.i+e.f,this.dispatchEvent(new CustomEvent("input")))}),$.catch(this.__BOX__,"mouseleave",t=>{this.props.disabled||this._updateDraw(-1)})}attributeChangedCallback(t,e,s){if(null!==s&&e!==s)switch(t){case"size":this.props.starSize=this.__STARS__[0].clientWidth;break;case"allow-half":case"show-value":case"disabled":this.props[t]=!0;break;case"color":s&&(this.props.color=s);break;case"text":s&&5===(s=s.split("|")).length&&(this.props.text=s.map(t=>t.trim()));break;case"value":this.value=s}}};
|
||||
import $ from "../utils.js"
|
||||
|
||||
export default class Star extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["value","text","size","color","'allow-half'","'show-value'","starSize","disabled"]
|
||||
}
|
||||
|
||||
props = {
|
||||
value: 0,
|
||||
text: [],
|
||||
size: '',
|
||||
color: '',
|
||||
'allow-half': false,
|
||||
'show-value': false,
|
||||
starSize: 32, // 星星的宽度, 用于实现半星
|
||||
disabled: false
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
--size: 24px; }
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
cursor: inherit; }
|
||||
label wc-icon {
|
||||
margin: 0 3px;
|
||||
transition: transform 0.1s easein-out; }
|
||||
label wc-icon:hover {
|
||||
transform: scale(1.05); }
|
||||
label span {
|
||||
padding: 0 8px;
|
||||
margin: 0 3px; }
|
||||
|
||||
:host([size='large']) {
|
||||
font-size: 16px;
|
||||
--size: 36px; }
|
||||
|
||||
:host([size='medium']) {
|
||||
--size: 30px; }
|
||||
|
||||
:host([size='mini']) {
|
||||
font-size: 12px;
|
||||
--size: 20px; }
|
||||
|
||||
:host([color='red']) label span {
|
||||
color: var(--color-red-1); }
|
||||
|
||||
:host([color='teal']) label span {
|
||||
color: var(--color-teal-1); }
|
||||
|
||||
:host([color='green']) label span {
|
||||
color: var(--color-green-1); }
|
||||
|
||||
:host([color='grey']) label span {
|
||||
color: var(--color-grey-1); }
|
||||
|
||||
:host([color='blue']) label span {
|
||||
color: var(--color-blue-1); }
|
||||
|
||||
:host([color='purple']) label span {
|
||||
color: var(--color-purple-1); }
|
||||
|
||||
:host([color='orange']) label span {
|
||||
color: var(--color-orange-1); }
|
||||
|
||||
:host([disabled]) {
|
||||
cursor: default;
|
||||
opacity: 0.6; }
|
||||
:host([disabled]) label wc-icon:hover {
|
||||
transform: none; }
|
||||
</style>
|
||||
<label>
|
||||
<wc-icon data-idx="0" is="star" color="grey"></wc-icon>
|
||||
<wc-icon data-idx="1" is="star" color="grey"></wc-icon>
|
||||
<wc-icon data-idx="2" is="star" color="grey"></wc-icon>
|
||||
<wc-icon data-idx="3" is="star" color="grey"></wc-icon>
|
||||
<wc-icon data-idx="4" is="star" color="grey"></wc-icon>
|
||||
<span class="text"></span>
|
||||
</label>
|
||||
`
|
||||
|
||||
|
||||
this.__BOX__ = this.root.children[1]
|
||||
this.__STARS__ = Array.from(this.__BOX__.children)
|
||||
this.__TEXT__ = this.__STARS__.pop()
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
var v = +val
|
||||
var tmp = val >> 0
|
||||
if (v === v && v > 0) {
|
||||
val = v
|
||||
} else {
|
||||
val = 0
|
||||
}
|
||||
|
||||
if (val > 5) {
|
||||
val = 5
|
||||
}
|
||||
|
||||
this.props.value = val
|
||||
this._updateDraw(-1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新图标渲染
|
||||
* i: int
|
||||
* f: float
|
||||
*/
|
||||
_updateDraw(i, f = 0) {
|
||||
var _last = 'star-half'
|
||||
var { value, tmp = { i: 0, f: 0 } } = this.props
|
||||
|
||||
if (i === -1) {
|
||||
i = Math.floor(value)
|
||||
f = +(value % 1).toFixed(1)
|
||||
if (i > 0 && i === value) {
|
||||
i--
|
||||
f = 1
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.props['allow-half']) {
|
||||
f = f > 0 ? 1 : 0
|
||||
}
|
||||
// 减少DOM操作
|
||||
if (i === tmp.i && f === tmp.f) {
|
||||
return
|
||||
}
|
||||
|
||||
if (f > 0.5) {
|
||||
_last = 'star-full'
|
||||
}
|
||||
|
||||
this.__STARS__.forEach((it, k) => {
|
||||
it.setAttribute('is', k < i ? 'star-full' : 'star')
|
||||
it.setAttribute('color', k < i ? this.props.color : 'grey')
|
||||
})
|
||||
|
||||
if (f > 0) {
|
||||
this.__STARS__[i].setAttribute('is', _last)
|
||||
this.__STARS__[i].setAttribute('color', this.props.color)
|
||||
}
|
||||
|
||||
// 缓存结果
|
||||
this.props.tmp = { i, f }
|
||||
|
||||
if (i === 0 && f === 0) {
|
||||
this.__TEXT__.textContent = ''
|
||||
} else {
|
||||
if (this.props.text.length === 5) {
|
||||
this.__TEXT__.textContent = this.props.text[i]
|
||||
} else {
|
||||
if (this.props['show-value']) {
|
||||
this.__TEXT__.textContent = i + f
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
$.catch(this.__BOX__, 'mousemove', ev => {
|
||||
if (this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if (ev.target.tagName === 'WC-ICON') {
|
||||
let idx = +ev.target.dataset.idx
|
||||
this._updateDraw(idx, +(ev.offsetX / this.props.starSize).toFixed(1))
|
||||
}
|
||||
})
|
||||
|
||||
$.catch(this.__BOX__, 'click', ev => {
|
||||
var { tmp, disabled } = this.props
|
||||
if (disabled) {
|
||||
return
|
||||
}
|
||||
if (ev.target.tagName === 'WC-ICON') {
|
||||
this.props.value = tmp.i + tmp.f
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
}
|
||||
})
|
||||
|
||||
$.catch(this.__BOX__, 'mouseleave', ev => {
|
||||
if (this.props.disabled) {
|
||||
return
|
||||
}
|
||||
this._updateDraw(-1)
|
||||
})
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'size':
|
||||
this.props.starSize = this.__STARS__[0].clientWidth
|
||||
break
|
||||
|
||||
case 'allow-half':
|
||||
case 'show-value':
|
||||
case 'disabled':
|
||||
this.props[name] = true
|
||||
break
|
||||
|
||||
case 'color':
|
||||
if (val) {
|
||||
this.props.color = val
|
||||
}
|
||||
break
|
||||
|
||||
case 'text':
|
||||
if (val) {
|
||||
val = val.split('|')
|
||||
if (val.length === 5) {
|
||||
this.props.text = val.map(it => it.trim())
|
||||
}
|
||||
}
|
||||
break
|
||||
|
||||
case 'value':
|
||||
this.value = val
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-star')){
|
||||
customElements.define('wc-star', Star)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,240 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
* @date 2020-07-22 19:57:05
|
||||
* @version v2.0.1
|
||||
* @date 2020-12-08 11:30:52
|
||||
* @version v1.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import $ from"../utils.js";export default class Switch extends HTMLElement{static get observedAttributes(){return["active-text","inactive-text","checked","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{"active-text":null,"inactive-text":null,checked:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block}:host section{display:flex;justify-content:center;align-items:center;line-height:0;white-space:nowrap}:host label{display:flex;align-items:center;width:32px;height:18px;padding:3px;margin:5px;border-radius:21px;background:#dae1e9;cursor:inherit}:host label.checked{flex-direction:row-reverse;background:#757575}:host .dot{width:12px;height:12px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:46px;height:26px;padding:3px 5px}:host([size='large']) .dot{width:18px;height:18px}:host([size='medium']) label{width:38px;height:22px;padding:3px 4px}:host([size='medium']) .dot{width:16px;height:16px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}:host([color='red']) label.checked{background:#ff5061}:host([color='blue']) label.checked{background:#64b5f6}:host([color='green']) label.checked{background:#81c784}:host([color='teal']) label.checked{background:#4db6ac}:host([color='orange']) label.checked{background:#ffb618}:host([color='dark']) label.checked{background:#62778d}:host([color='purple']) label.checked{background:#9575cd}</style> <section> <label> <span class=\"dot\"></span> </label> <slot></slot> </section> ",this.__SWITCH__=this.root.lastElementChild.firstElementChild}get value(){return this.props.checked}set value(e){this.checked=e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handleClick=$.bind(this,"click",e=>{this.disabled||(this.checked=!this.checked,this.checked?null!==this.props["active-text"]&&(this.textContent=this.props["active-text"]):null!==this.props["inactive-text"]&&(this.textContent=this.props["inactive-text"]),this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){$.unbind(this,"click",this._handleClick)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"checked":case"disabled":this[e]=!0;break;case"active-text":case"inactive-text":this.props[e]=i+""}}};
|
||||
import $ from "../utils.js"
|
||||
export default class Switch extends HTMLElement {
|
||||
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["'active-text'","'inactive-text'","checked","disabled"]
|
||||
}
|
||||
|
||||
props = {
|
||||
'active-text': null,
|
||||
'inactive-text': null,
|
||||
checked: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.attachShadow({ mode: 'open' }),
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
})
|
||||
|
||||
this.root.innerHTML = `<style>* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:host {
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064; }
|
||||
|
||||
:host {
|
||||
display: inline-block; }
|
||||
:host section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
white-space: nowrap; }
|
||||
:host label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
padding: 3px;
|
||||
margin: 5px;
|
||||
border-radius: 21px;
|
||||
background: var(--color-plain-3);
|
||||
cursor: inherit; }
|
||||
:host label.checked {
|
||||
flex-direction: row-reverse;
|
||||
background: var(--color-grey-3); }
|
||||
:host .dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #fff; }
|
||||
|
||||
:host([disabled]) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6; }
|
||||
|
||||
:host([size='large']) label {
|
||||
width: 46px;
|
||||
height: 26px;
|
||||
padding: 3px 5px; }
|
||||
|
||||
:host([size='large']) .dot {
|
||||
width: 18px;
|
||||
height: 18px; }
|
||||
|
||||
:host([size='medium']) label {
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
padding: 3px 4px; }
|
||||
|
||||
:host([size='medium']) .dot {
|
||||
width: 16px;
|
||||
height: 16px; }
|
||||
|
||||
:host([size='mini']) label {
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
padding: 2px; }
|
||||
|
||||
:host([size='mini']) .dot {
|
||||
width: 10px;
|
||||
height: 10px; }
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
background: var(--color-red-1); }
|
||||
|
||||
:host([color='blue']) label.checked {
|
||||
background: var(--color-blue-1); }
|
||||
|
||||
:host([color='green']) label.checked {
|
||||
background: var(--color-green-1); }
|
||||
|
||||
:host([color='teal']) label.checked {
|
||||
background: var(--color-teal-1); }
|
||||
|
||||
:host([color='orange']) label.checked {
|
||||
background: var(--color-orange-1); }
|
||||
|
||||
:host([color='dark']) label.checked {
|
||||
background: var(--color-dark-1); }
|
||||
|
||||
:host([color='purple']) label.checked {
|
||||
background: var(--color-purple-1); }
|
||||
</style>
|
||||
<section>
|
||||
<label>
|
||||
<span class="dot"></span>
|
||||
</label>
|
||||
<slot></slot>
|
||||
</section>
|
||||
`
|
||||
|
||||
|
||||
this.__SWITCH__ = this.root.lastElementChild.firstElementChild
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.checked
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.checked = val
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.props.checked
|
||||
}
|
||||
|
||||
set checked(val) {
|
||||
this.props.checked = !!val
|
||||
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.props.disabled
|
||||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._handleClick = $.bind(this, 'click', ev => {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.checked = !this.checked
|
||||
if (this.checked) {
|
||||
if (this.props['active-text'] !== null) {
|
||||
this.textContent = this.props['active-text']
|
||||
}
|
||||
} else {
|
||||
if (this.props['inactive-text'] !== null) {
|
||||
this.textContent = this.props['inactive-text']
|
||||
}
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
$.unbind(this, 'click', this._handleClick)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, old, val) {
|
||||
if (val === null || old === val) {return}
|
||||
switch (name) {
|
||||
case 'checked':
|
||||
case 'disabled':
|
||||
this[name] = true
|
||||
break
|
||||
case 'active-text':
|
||||
case 'inactive-text':
|
||||
this.props[name] = val + ''
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!customElements.get('wc-switch')){
|
||||
customElements.define('wc-switch', Switch)
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ const createTay = require('./tray')
|
|||
exports.createMainWindow = function(icon) {
|
||||
var win = new BrowserWindow({
|
||||
title: '搞基数据',
|
||||
width: 820,
|
||||
height: 460,
|
||||
width: 1024,
|
||||
height: 540,
|
||||
frame: false,
|
||||
titleBarStyle: 'hiddenInset',
|
||||
resizable: false,
|
||||
|
|
@ -44,10 +44,10 @@ exports.createMainWindow = function(icon) {
|
|||
|
||||
createMenu(win)
|
||||
|
||||
// win.on('ready-to-show', _ => {
|
||||
// win.show()
|
||||
// win.openDevTools()
|
||||
// })
|
||||
win.on('ready-to-show', _ => {
|
||||
win.show()
|
||||
win.openDevTools()
|
||||
})
|
||||
|
||||
win.on('close', ev => {
|
||||
ev.preventDefault()
|
||||
|
|
|
|||
838
test.js
838
test.js
|
|
@ -1,4 +1,4 @@
|
|||
/** * 测试数据 * @type {arry} */ /*2020-12-09 15:31:17*/ var ishb = false
|
||||
/** * 测试数据 * @type {arry} */ /*2020-12-11 16:09:21*/ var ishb = false
|
||||
/*基金或股票信息*/ var fS_name = '招商中证白酒指数分级'
|
||||
var fS_code = '161725'
|
||||
/*原费率*/ var fund_sourceRate = '1.00'
|
||||
|
|
@ -30,13 +30,11 @@ var fS_code = '161725'
|
|||
'1.603589'
|
||||
]
|
||||
/*基金持仓债券代码（新市场号）*/ var zqCodesNew = '1.019627,1.019640'
|
||||
/*收益率*/ /*近一年收益率*/ var syl_1n = '88.41'
|
||||
/*近6月收益率*/ var syl_6y = '63.33'
|
||||
/*近三月收益率*/ var syl_3y = '23.86'
|
||||
/*近一月收益率*/ var syl_1y = '8.48'
|
||||
/*收益率*/ /*近一年收益率*/ var syl_1n = '90.15'
|
||||
/*近6月收益率*/ var syl_6y = '62.1'
|
||||
/*近三月收益率*/ var syl_3y = '24.91'
|
||||
/*近一月收益率*/ var syl_1y = '4.61'
|
||||
/*股票仓位测算图*/ var Data_fundSharesPositions = [
|
||||
[1604851200000, 95.0],
|
||||
[1604937600000, 95.0],
|
||||
[1605024000000, 95.0],
|
||||
[1605110400000, 95.0],
|
||||
[1605196800000, 95.0],
|
||||
|
|
@ -56,7 +54,9 @@ var fS_code = '161725'
|
|||
[1606924800000, 79.06],
|
||||
[1607011200000, 85.65],
|
||||
[1607270400000, 95.75],
|
||||
[1607356800000, 96.65]
|
||||
[1607356800000, 96.65],
|
||||
[1607443200000, 78.09],
|
||||
[1607529600000, 77.79]
|
||||
]
|
||||
/*单位净值走势 equityReturn-净值回报 unitMoney-每份派送金*/ var Data_netWorthTrend = [
|
||||
{ x: 1432656000000, y: 1.0, equityReturn: 0, unitMoney: '' },
|
||||
|
|
@ -1449,7 +1449,9 @@ var fS_code = '161725'
|
|||
{ x: 1606924800000, y: 1.1684, equityReturn: 0.99, unitMoney: '' },
|
||||
{ x: 1607011200000, y: 1.2081, equityReturn: 3.4, unitMoney: '' },
|
||||
{ x: 1607270400000, y: 1.212, equityReturn: 0.32, unitMoney: '' },
|
||||
{ x: 1607356800000, y: 1.2305, equityReturn: 1.53, unitMoney: '' }
|
||||
{ x: 1607356800000, y: 1.2305, equityReturn: 1.53, unitMoney: '' },
|
||||
{ x: 1607443200000, y: 1.2249, equityReturn: -0.46, unitMoney: '' },
|
||||
{ x: 1607529600000, y: 1.2352, equityReturn: 0.84, unitMoney: '' }
|
||||
]
|
||||
/*累计净值走势*/ var Data_ACWorthTrend = [
|
||||
[1432656000000, 1.0],
|
||||
|
|
@ -2802,394 +2804,396 @@ var fS_code = '161725'
|
|||
[1606924800000, 2.7926],
|
||||
[1607011200000, 2.8323],
|
||||
[1607270400000, 2.8362],
|
||||
[1607356800000, 2.8547]
|
||||
[1607356800000, 2.8547],
|
||||
[1607443200000, 2.8491],
|
||||
[1607529600000, 2.8594]
|
||||
]
|
||||
/*累计收益率走势*/ var Data_grandTotal = [
|
||||
{
|
||||
name: '招商中证白酒指数分级',
|
||||
data: [
|
||||
[1591545600000, 0],
|
||||
[1591632000000, 0.74],
|
||||
[1591718400000, 1.14],
|
||||
[1591804800000, -0.52],
|
||||
[1591891200000, -0.22],
|
||||
[1592150400000, -2.91],
|
||||
[1592236800000, -1.31],
|
||||
[1592323200000, -2.25],
|
||||
[1592409600000, -1.97],
|
||||
[1592496000000, 0.38],
|
||||
[1592755200000, -0.35],
|
||||
[1592841600000, 2.85],
|
||||
[1592928000000, 2.67],
|
||||
[1593360000000, 3.03],
|
||||
[1593446400000, 4.67],
|
||||
[1593532800000, 10.69],
|
||||
[1593619200000, 14.54],
|
||||
[1593705600000, 13.41],
|
||||
[1593964800000, 16.18],
|
||||
[1594051200000, 19.69],
|
||||
[1594137600000, 19.54],
|
||||
[1594224000000, 21.37],
|
||||
[1594310400000, 22.94],
|
||||
[1594569600000, 28.32],
|
||||
[1594656000000, 28.66],
|
||||
[1594742400000, 31.49],
|
||||
[1594828800000, 20.07],
|
||||
[1594915200000, 19.93],
|
||||
[1595174400000, 18.59],
|
||||
[1595260800000, 21.36],
|
||||
[1595347200000, 22.93],
|
||||
[1595433600000, 23.27],
|
||||
[1595520000000, 17.68],
|
||||
[1595779200000, 19.08],
|
||||
[1595865600000, 22.05],
|
||||
[1595952000000, 22.79],
|
||||
[1596038400000, 23.66],
|
||||
[1596124800000, 23.5],
|
||||
[1596384000000, 23.61],
|
||||
[1596470400000, 23.01],
|
||||
[1596556800000, 23.33],
|
||||
[1596643200000, 20.16],
|
||||
[1596729600000, 18.76],
|
||||
[1596988800000, 18.91],
|
||||
[1597075200000, 20.0],
|
||||
[1597161600000, 17.87],
|
||||
[1597248000000, 18.8],
|
||||
[1597334400000, 22.88],
|
||||
[1597593600000, 25.72],
|
||||
[1597680000000, 26.46],
|
||||
[1597766400000, 26.64],
|
||||
[1597852800000, 23.81],
|
||||
[1597939200000, 25.5],
|
||||
[1598198400000, 28.08],
|
||||
[1598284800000, 33.06],
|
||||
[1598371200000, 32.73],
|
||||
[1598457600000, 34.3],
|
||||
[1598544000000, 39.64],
|
||||
[1598803200000, 40.39],
|
||||
[1598889600000, 38.8],
|
||||
[1598976000000, 37.74],
|
||||
[1599062400000, 40.61],
|
||||
[1599148800000, 37.92],
|
||||
[1599408000000, 35.63],
|
||||
[1599494400000, 31.87],
|
||||
[1599580800000, 29.24],
|
||||
[1599667200000, 31.26],
|
||||
[1599753600000, 34.95],
|
||||
[1600012800000, 36.05],
|
||||
[1600099200000, 35.81],
|
||||
[1600185600000, 33.54],
|
||||
[1600272000000, 30.42],
|
||||
[1600358400000, 32.2],
|
||||
[1600617600000, 30.2],
|
||||
[1600704000000, 29.0],
|
||||
[1600790400000, 28.37],
|
||||
[1600876800000, 26.14],
|
||||
[1600963200000, 26.18],
|
||||
[1601222400000, 27.62],
|
||||
[1601308800000, 27.36],
|
||||
[1601395200000, 27.94],
|
||||
[1602172800000, 29.8],
|
||||
[1602432000000, 37.0],
|
||||
[1602518400000, 39.32],
|
||||
[1602604800000, 38.85],
|
||||
[1602691200000, 38.69],
|
||||
[1602777600000, 37.15],
|
||||
[1603036800000, 36.11],
|
||||
[1603123200000, 40.41],
|
||||
[1603209600000, 40.86],
|
||||
[1603296000000, 43.46],
|
||||
[1603382400000, 39.81],
|
||||
[1603641600000, 38.3],
|
||||
[1603728000000, 39.56],
|
||||
[1603814400000, 44.12],
|
||||
[1603900800000, 48.21],
|
||||
[1603987200000, 44.02],
|
||||
[1604246400000, 46.42],
|
||||
[1604332800000, 48.03],
|
||||
[1604419200000, 48.74],
|
||||
[1604505600000, 51.56],
|
||||
[1604592000000, 50.56],
|
||||
[1604851200000, 53.44],
|
||||
[1604937600000, 56.73],
|
||||
[1605024000000, 56.92],
|
||||
[1605110400000, 59.67],
|
||||
[1605196800000, 54.2],
|
||||
[1605456000000, 60.18],
|
||||
[1605542400000, 57.99],
|
||||
[1605628800000, 55.43],
|
||||
[1605715200000, 56.03],
|
||||
[1605801600000, 58.35],
|
||||
[1606060800000, 59.98],
|
||||
[1606147200000, 60.94],
|
||||
[1606233600000, 55.29],
|
||||
[1606320000000, 56.07],
|
||||
[1606406400000, 57.01],
|
||||
[1606665600000, 52.29],
|
||||
[1606752000000, 53.61],
|
||||
[1606838400000, 53.56],
|
||||
[1606924800000, 55.09],
|
||||
[1607011200000, 60.36],
|
||||
[1607270400000, 60.87],
|
||||
[1607356800000, 63.33]
|
||||
[1591718400000, 0],
|
||||
[1591804800000, -1.65],
|
||||
[1591891200000, -1.35],
|
||||
[1592150400000, -4.0],
|
||||
[1592236800000, -2.43],
|
||||
[1592323200000, -3.35],
|
||||
[1592409600000, -3.07],
|
||||
[1592496000000, -0.75],
|
||||
[1592755200000, -1.47],
|
||||
[1592841600000, 1.69],
|
||||
[1592928000000, 1.51],
|
||||
[1593360000000, 1.87],
|
||||
[1593446400000, 3.49],
|
||||
[1593532800000, 9.44],
|
||||
[1593619200000, 13.24],
|
||||
[1593705600000, 12.13],
|
||||
[1593964800000, 14.87],
|
||||
[1594051200000, 18.33],
|
||||
[1594137600000, 18.19],
|
||||
[1594224000000, 20.0],
|
||||
[1594310400000, 21.55],
|
||||
[1594569600000, 26.87],
|
||||
[1594656000000, 27.21],
|
||||
[1594742400000, 30.0],
|
||||
[1594828800000, 18.71],
|
||||
[1594915200000, 18.57],
|
||||
[1595174400000, 17.25],
|
||||
[1595260800000, 19.99],
|
||||
[1595347200000, 21.54],
|
||||
[1595433600000, 21.88],
|
||||
[1595520000000, 16.35],
|
||||
[1595779200000, 17.73],
|
||||
[1595865600000, 20.67],
|
||||
[1595952000000, 21.4],
|
||||
[1596038400000, 22.26],
|
||||
[1596124800000, 22.1],
|
||||
[1596384000000, 22.21],
|
||||
[1596470400000, 21.62],
|
||||
[1596556800000, 21.93],
|
||||
[1596643200000, 18.8],
|
||||
[1596729600000, 17.42],
|
||||
[1596988800000, 17.56],
|
||||
[1597075200000, 18.64],
|
||||
[1597161600000, 16.54],
|
||||
[1597248000000, 17.46],
|
||||
[1597334400000, 21.49],
|
||||
[1597593600000, 24.3],
|
||||
[1597680000000, 25.04],
|
||||
[1597766400000, 25.21],
|
||||
[1597852800000, 22.41],
|
||||
[1597939200000, 24.08],
|
||||
[1598198400000, 26.63],
|
||||
[1598284800000, 31.55],
|
||||
[1598371200000, 31.23],
|
||||
[1598457600000, 32.78],
|
||||
[1598544000000, 38.06],
|
||||
[1598803200000, 38.81],
|
||||
[1598889600000, 37.23],
|
||||
[1598976000000, 36.18],
|
||||
[1599062400000, 39.02],
|
||||
[1599148800000, 36.37],
|
||||
[1599408000000, 34.1],
|
||||
[1599494400000, 30.38],
|
||||
[1599580800000, 27.78],
|
||||
[1599667200000, 29.78],
|
||||
[1599753600000, 33.43],
|
||||
[1600012800000, 34.52],
|
||||
[1600099200000, 34.28],
|
||||
[1600185600000, 32.04],
|
||||
[1600272000000, 28.95],
|
||||
[1600358400000, 30.71],
|
||||
[1600617600000, 28.73],
|
||||
[1600704000000, 27.55],
|
||||
[1600790400000, 26.92],
|
||||
[1600876800000, 24.71],
|
||||
[1600963200000, 24.75],
|
||||
[1601222400000, 26.18],
|
||||
[1601308800000, 25.92],
|
||||
[1601395200000, 26.5],
|
||||
[1602172800000, 28.33],
|
||||
[1602432000000, 35.45],
|
||||
[1602518400000, 37.74],
|
||||
[1602604800000, 37.28],
|
||||
[1602691200000, 37.13],
|
||||
[1602777600000, 35.6],
|
||||
[1603036800000, 34.57],
|
||||
[1603123200000, 38.82],
|
||||
[1603209600000, 39.27],
|
||||
[1603296000000, 41.84],
|
||||
[1603382400000, 38.23],
|
||||
[1603641600000, 36.73],
|
||||
[1603728000000, 37.98],
|
||||
[1603814400000, 42.49],
|
||||
[1603900800000, 46.54],
|
||||
[1603987200000, 42.39],
|
||||
[1604246400000, 44.76],
|
||||
[1604332800000, 46.35],
|
||||
[1604419200000, 47.06],
|
||||
[1604505600000, 49.84],
|
||||
[1604592000000, 48.86],
|
||||
[1604851200000, 51.71],
|
||||
[1604937600000, 54.96],
|
||||
[1605024000000, 55.15],
|
||||
[1605110400000, 57.86],
|
||||
[1605196800000, 52.46],
|
||||
[1605456000000, 58.37],
|
||||
[1605542400000, 56.21],
|
||||
[1605628800000, 53.68],
|
||||
[1605715200000, 54.27],
|
||||
[1605801600000, 56.56],
|
||||
[1606060800000, 58.18],
|
||||
[1606147200000, 59.12],
|
||||
[1606233600000, 53.53],
|
||||
[1606320000000, 54.31],
|
||||
[1606406400000, 55.24],
|
||||
[1606665600000, 50.57],
|
||||
[1606752000000, 51.88],
|
||||
[1606838400000, 51.83],
|
||||
[1606924800000, 53.33],
|
||||
[1607011200000, 58.54],
|
||||
[1607270400000, 59.06],
|
||||
[1607356800000, 61.48],
|
||||
[1607443200000, 60.75],
|
||||
[1607529600000, 62.1]
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '同类平均',
|
||||
data: [
|
||||
[1591545600000, 0],
|
||||
[1591632000000, 0.7],
|
||||
[1591718400000, 0.81],
|
||||
[1591804800000, 0.11],
|
||||
[1591891200000, 0.23],
|
||||
[1592150400000, -0.48],
|
||||
[1592236800000, 1.16],
|
||||
[1592323200000, 1.47],
|
||||
[1592409600000, 1.88],
|
||||
[1592496000000, 3.15],
|
||||
[1592755200000, 3.41],
|
||||
[1592841600000, 4.0],
|
||||
[1592928000000, 4.28],
|
||||
[1593360000000, 3.69],
|
||||
[1593446400000, 5.26],
|
||||
[1593532800000, 6.42],
|
||||
[1593619200000, 8.29],
|
||||
[1593705600000, 10.11],
|
||||
[1593964800000, 15.27],
|
||||
[1594051200000, 16.25],
|
||||
[1594137600000, 18.44],
|
||||
[1594224000000, 20.71],
|
||||
[1594310400000, 19.45],
|
||||
[1594569600000, 22.35],
|
||||
[1594656000000, 21.28],
|
||||
[1594742400000, 19.48],
|
||||
[1594828800000, 14.51],
|
||||
[1594915200000, 15.22],
|
||||
[1595174400000, 18.36],
|
||||
[1595260800000, 18.85],
|
||||
[1595347200000, 19.6],
|
||||
[1595433600000, 19.75],
|
||||
[1595520000000, 14.5],
|
||||
[1595779200000, 14.84],
|
||||
[1595865600000, 15.88],
|
||||
[1595952000000, 18.73],
|
||||
[1596038400000, 18.21],
|
||||
[1596124800000, 19.34],
|
||||
[1596384000000, 21.61],
|
||||
[1596470400000, 21.39],
|
||||
[1596556800000, 21.94],
|
||||
[1596643200000, 21.75],
|
||||
[1596729600000, 20.34],
|
||||
[1596988800000, 20.74],
|
||||
[1597075200000, 19.43],
|
||||
[1597161600000, 18.43],
|
||||
[1597248000000, 18.35],
|
||||
[1597334400000, 19.88],
|
||||
[1597593600000, 22.25],
|
||||
[1597680000000, 22.53],
|
||||
[1597766400000, 20.54],
|
||||
[1597852800000, 19.22],
|
||||
[1597939200000, 20.18],
|
||||
[1598198400000, 21.36],
|
||||
[1598284800000, 21.25],
|
||||
[1598371200000, 19.55],
|
||||
[1598457600000, 20.33],
|
||||
[1598544000000, 22.68],
|
||||
[1598803200000, 21.99],
|
||||
[1598889600000, 22.7],
|
||||
[1598976000000, 22.72],
|
||||
[1599062400000, 21.93],
|
||||
[1599148800000, 21.02],
|
||||
[1599408000000, 18.49],
|
||||
[1599494400000, 19.05],
|
||||
[1599580800000, 16.2],
|
||||
[1599667200000, 15.33],
|
||||
[1599753600000, 16.54],
|
||||
[1600012800000, 17.21],
|
||||
[1600099200000, 18.04],
|
||||
[1600185600000, 17.34],
|
||||
[1600272000000, 17.11],
|
||||
[1600358400000, 19.24],
|
||||
[1600617600000, 18.43],
|
||||
[1600704000000, 17.24],
|
||||
[1600790400000, 17.79],
|
||||
[1600876800000, 15.54],
|
||||
[1600963200000, 15.54],
|
||||
[1601222400000, 15.43],
|
||||
[1601308800000, 16.03],
|
||||
[1601395200000, 15.94],
|
||||
[1602172800000, 18.54],
|
||||
[1602432000000, 21.8],
|
||||
[1602518400000, 22.14],
|
||||
[1602604800000, 21.43],
|
||||
[1602691200000, 20.98],
|
||||
[1602777600000, 20.82],
|
||||
[1603036800000, 19.85],
|
||||
[1603123200000, 20.81],
|
||||
[1603209600000, 20.2],
|
||||
[1603296000000, 19.7],
|
||||
[1603382400000, 18.13],
|
||||
[1603641600000, 17.98],
|
||||
[1603728000000, 18.31],
|
||||
[1603814400000, 18.97],
|
||||
[1603900800000, 19.68],
|
||||
[1603987200000, 17.63],
|
||||
[1604246400000, 18.33],
|
||||
[1604332800000, 19.87],
|
||||
[1604419200000, 20.35],
|
||||
[1604505600000, 22.25],
|
||||
[1604592000000, 21.77],
|
||||
[1604851200000, 24.12],
|
||||
[1604937600000, 23.15],
|
||||
[1605024000000, 21.73],
|
||||
[1605110400000, 21.98],
|
||||
[1605196800000, 21.27],
|
||||
[1605456000000, 22.3],
|
||||
[1605542400000, 21.65],
|
||||
[1605628800000, 21.58],
|
||||
[1605715200000, 22.26],
|
||||
[1605801600000, 22.9],
|
||||
[1606060800000, 24.01],
|
||||
[1606147200000, 23.62],
|
||||
[1606233600000, 21.83],
|
||||
[1606320000000, 21.84],
|
||||
[1606406400000, 22.86],
|
||||
[1606665600000, 22.4],
|
||||
[1606752000000, 24.66],
|
||||
[1606838400000, 24.66],
|
||||
[1606924800000, 24.58],
|
||||
[1607011200000, 24.89],
|
||||
[1607270400000, 24.04],
|
||||
[1607356800000, 23.95]
|
||||
[1591718400000, 0],
|
||||
[1591804800000, -0.69],
|
||||
[1591891200000, -0.57],
|
||||
[1592150400000, -1.28],
|
||||
[1592236800000, 0.35],
|
||||
[1592323200000, 0.65],
|
||||
[1592409600000, 1.07],
|
||||
[1592496000000, 2.32],
|
||||
[1592755200000, 2.58],
|
||||
[1592841600000, 3.16],
|
||||
[1592928000000, 3.45],
|
||||
[1593360000000, 2.86],
|
||||
[1593446400000, 4.42],
|
||||
[1593532800000, 5.57],
|
||||
[1593619200000, 7.43],
|
||||
[1593705600000, 9.23],
|
||||
[1593964800000, 14.35],
|
||||
[1594051200000, 15.32],
|
||||
[1594137600000, 17.49],
|
||||
[1594224000000, 19.74],
|
||||
[1594310400000, 18.49],
|
||||
[1594569600000, 21.37],
|
||||
[1594656000000, 20.31],
|
||||
[1594742400000, 18.53],
|
||||
[1594828800000, 13.59],
|
||||
[1594915200000, 14.3],
|
||||
[1595174400000, 17.41],
|
||||
[1595260800000, 17.9],
|
||||
[1595347200000, 18.64],
|
||||
[1595433600000, 18.79],
|
||||
[1595520000000, 13.58],
|
||||
[1595779200000, 13.92],
|
||||
[1595865600000, 14.96],
|
||||
[1595952000000, 17.78],
|
||||
[1596038400000, 17.26],
|
||||
[1596124800000, 18.39],
|
||||
[1596384000000, 20.64],
|
||||
[1596470400000, 20.41],
|
||||
[1596556800000, 20.96],
|
||||
[1596643200000, 20.77],
|
||||
[1596729600000, 19.38],
|
||||
[1596988800000, 19.78],
|
||||
[1597075200000, 18.47],
|
||||
[1597161600000, 17.48],
|
||||
[1597248000000, 17.4],
|
||||
[1597334400000, 18.91],
|
||||
[1597593600000, 21.27],
|
||||
[1597680000000, 21.55],
|
||||
[1597766400000, 19.57],
|
||||
[1597852800000, 18.26],
|
||||
[1597939200000, 19.22],
|
||||
[1598198400000, 20.39],
|
||||
[1598284800000, 20.28],
|
||||
[1598371200000, 18.6],
|
||||
[1598457600000, 19.36],
|
||||
[1598544000000, 21.7],
|
||||
[1598803200000, 21.01],
|
||||
[1598889600000, 21.72],
|
||||
[1598976000000, 21.74],
|
||||
[1599062400000, 20.96],
|
||||
[1599148800000, 20.05],
|
||||
[1599408000000, 17.54],
|
||||
[1599494400000, 18.1],
|
||||
[1599580800000, 15.27],
|
||||
[1599667200000, 14.4],
|
||||
[1599753600000, 15.61],
|
||||
[1600012800000, 16.28],
|
||||
[1600099200000, 17.09],
|
||||
[1600185600000, 16.4],
|
||||
[1600272000000, 16.17],
|
||||
[1600358400000, 18.29],
|
||||
[1600617600000, 17.48],
|
||||
[1600704000000, 16.3],
|
||||
[1600790400000, 16.85],
|
||||
[1600876800000, 14.61],
|
||||
[1600963200000, 14.62],
|
||||
[1601222400000, 14.5],
|
||||
[1601308800000, 15.1],
|
||||
[1601395200000, 15.01],
|
||||
[1602172800000, 17.59],
|
||||
[1602432000000, 20.82],
|
||||
[1602518400000, 21.16],
|
||||
[1602604800000, 20.46],
|
||||
[1602691200000, 20.01],
|
||||
[1602777600000, 19.85],
|
||||
[1603036800000, 18.89],
|
||||
[1603123200000, 19.84],
|
||||
[1603209600000, 19.24],
|
||||
[1603296000000, 18.74],
|
||||
[1603382400000, 17.19],
|
||||
[1603641600000, 17.04],
|
||||
[1603728000000, 17.37],
|
||||
[1603814400000, 18.01],
|
||||
[1603900800000, 18.72],
|
||||
[1603987200000, 16.69],
|
||||
[1604246400000, 17.38],
|
||||
[1604332800000, 18.9],
|
||||
[1604419200000, 19.38],
|
||||
[1604505600000, 21.27],
|
||||
[1604592000000, 20.8],
|
||||
[1604851200000, 23.12],
|
||||
[1604937600000, 22.16],
|
||||
[1605024000000, 20.76],
|
||||
[1605110400000, 21.0],
|
||||
[1605196800000, 20.3],
|
||||
[1605456000000, 21.32],
|
||||
[1605542400000, 20.68],
|
||||
[1605628800000, 20.6],
|
||||
[1605715200000, 21.28],
|
||||
[1605801600000, 21.91],
|
||||
[1606060800000, 23.02],
|
||||
[1606147200000, 22.63],
|
||||
[1606233600000, 20.85],
|
||||
[1606320000000, 20.87],
|
||||
[1606406400000, 21.88],
|
||||
[1606665600000, 21.42],
|
||||
[1606752000000, 23.66],
|
||||
[1606838400000, 23.66],
|
||||
[1606924800000, 23.58],
|
||||
[1607011200000, 23.89],
|
||||
[1607270400000, 23.05],
|
||||
[1607356800000, 22.95],
|
||||
[1607443200000, 21.31],
|
||||
[1607529600000, 21.46]
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '沪深300',
|
||||
data: [
|
||||
[1591545600000, 0],
|
||||
[1591632000000, 0.62],
|
||||
[1591718400000, 0.44],
|
||||
[1591804800000, -0.65],
|
||||
[1591891200000, -0.47],
|
||||
[1592150400000, -1.67],
|
||||
[1592236800000, -0.18],
|
||||
[1592323200000, -0.11],
|
||||
[1592409600000, 0.56],
|
||||
[1592496000000, 1.91],
|
||||
[1592755200000, 1.99],
|
||||
[1592841600000, 2.48],
|
||||
[1592928000000, 2.91],
|
||||
[1593360000000, 2.18],
|
||||
[1593446400000, 3.53],
|
||||
[1593532800000, 5.61],
|
||||
[1593619200000, 7.8],
|
||||
[1593705600000, 9.89],
|
||||
[1593964800000, 16.12],
|
||||
[1594051200000, 16.81],
|
||||
[1594137600000, 18.7],
|
||||
[1594224000000, 20.36],
|
||||
[1594310400000, 18.18],
|
||||
[1594569600000, 20.66],
|
||||
[1594656000000, 19.51],
|
||||
[1594742400000, 17.96],
|
||||
[1594828800000, 12.29],
|
||||
[1594915200000, 13.0],
|
||||
[1595174400000, 16.37],
|
||||
[1595260800000, 16.64],
|
||||
[1595347200000, 17.22],
|
||||
[1595433600000, 17.17],
|
||||
[1595520000000, 12.02],
|
||||
[1595779200000, 12.59],
|
||||
[1595865600000, 13.58],
|
||||
[1595952000000, 16.34],
|
||||
[1596038400000, 15.77],
|
||||
[1596124800000, 16.74],
|
||||
[1596384000000, 18.63],
|
||||
[1596470400000, 18.74],
|
||||
[1596556800000, 18.78],
|
||||
[1596643200000, 18.42],
|
||||
[1596729600000, 17.06],
|
||||
[1596988800000, 17.48],
|
||||
[1597075200000, 16.41],
|
||||
[1597161600000, 15.56],
|
||||
[1597248000000, 15.26],
|
||||
[1597334400000, 16.97],
|
||||
[1597593600000, 19.72],
|
||||
[1597680000000, 19.66],
|
||||
[1597766400000, 17.87],
|
||||
[1597852800000, 16.34],
|
||||
[1597939200000, 17.33],
|
||||
[1598198400000, 18.25],
|
||||
[1598284800000, 18.4],
|
||||
[1598371200000, 17.01],
|
||||
[1598457600000, 17.64],
|
||||
[1598544000000, 20.45],
|
||||
[1598803200000, 19.75],
|
||||
[1598889600000, 20.39],
|
||||
[1598976000000, 20.44],
|
||||
[1599062400000, 19.77],
|
||||
[1599148800000, 18.6],
|
||||
[1599408000000, 16.1],
|
||||
[1599494400000, 16.72],
|
||||
[1599580800000, 13.99],
|
||||
[1599667200000, 13.92],
|
||||
[1599753600000, 15.05],
|
||||
[1600012800000, 15.64],
|
||||
[1600099200000, 16.57],
|
||||
[1600185600000, 15.8],
|
||||
[1600272000000, 15.19],
|
||||
[1600358400000, 17.78],
|
||||
[1600617600000, 16.65],
|
||||
[1600704000000, 15.26],
|
||||
[1600790400000, 15.67],
|
||||
[1600876800000, 13.45],
|
||||
[1600963200000, 13.63],
|
||||
[1601222400000, 13.92],
|
||||
[1601308800000, 14.17],
|
||||
[1601395200000, 14.06],
|
||||
[1602172800000, 16.39],
|
||||
[1602432000000, 19.92],
|
||||
[1602518400000, 20.32],
|
||||
[1602604800000, 19.52],
|
||||
[1602691200000, 19.31],
|
||||
[1602777600000, 19.14],
|
||||
[1603036800000, 18.24],
|
||||
[1603123200000, 19.18],
|
||||
[1603209600000, 19.17],
|
||||
[1603296000000, 18.8],
|
||||
[1603382400000, 17.32],
|
||||
[1603641600000, 16.64],
|
||||
[1603728000000, 16.84],
|
||||
[1603814400000, 17.79],
|
||||
[1603900800000, 18.67],
|
||||
[1603987200000, 16.74],
|
||||
[1604246400000, 17.38],
|
||||
[1604332800000, 18.79],
|
||||
[1604419200000, 19.68],
|
||||
[1604505600000, 21.46],
|
||||
[1604592000000, 21.48],
|
||||
[1604851200000, 23.85],
|
||||
[1604937600000, 23.17],
|
||||
[1605024000000, 21.95],
|
||||
[1605110400000, 22.04],
|
||||
[1605196800000, 20.76],
|
||||
[1605456000000, 21.94],
|
||||
[1605542400000, 21.7],
|
||||
[1605628800000, 21.62],
|
||||
[1605715200000, 22.53],
|
||||
[1605801600000, 22.91],
|
||||
[1606060800000, 24.44],
|
||||
[1606147200000, 23.68],
|
||||
[1606233600000, 22.1],
|
||||
[1606320000000, 22.32],
|
||||
[1606406400000, 23.84],
|
||||
[1606665600000, 23.33],
|
||||
[1606752000000, 25.99],
|
||||
[1606838400000, 25.99],
|
||||
[1606924800000, 25.74],
|
||||
[1607011200000, 25.96],
|
||||
[1607270400000, 24.87],
|
||||
[1607356800000, 24.56]
|
||||
[1591718400000, 0],
|
||||
[1591804800000, -1.08],
|
||||
[1591891200000, -0.91],
|
||||
[1592150400000, -2.1],
|
||||
[1592236800000, -0.62],
|
||||
[1592323200000, -0.55],
|
||||
[1592409600000, 0.12],
|
||||
[1592496000000, 1.46],
|
||||
[1592755200000, 1.54],
|
||||
[1592841600000, 2.03],
|
||||
[1592928000000, 2.46],
|
||||
[1593360000000, 1.73],
|
||||
[1593446400000, 3.08],
|
||||
[1593532800000, 5.15],
|
||||
[1593619200000, 7.33],
|
||||
[1593705600000, 9.4],
|
||||
[1593964800000, 15.6],
|
||||
[1594051200000, 16.3],
|
||||
[1594137600000, 18.18],
|
||||
[1594224000000, 19.83],
|
||||
[1594310400000, 17.66],
|
||||
[1594569600000, 20.13],
|
||||
[1594656000000, 18.99],
|
||||
[1594742400000, 17.45],
|
||||
[1594828800000, 11.8],
|
||||
[1594915200000, 12.5],
|
||||
[1595174400000, 15.86],
|
||||
[1595260800000, 16.12],
|
||||
[1595347200000, 16.7],
|
||||
[1595433600000, 16.65],
|
||||
[1595520000000, 11.53],
|
||||
[1595779200000, 12.1],
|
||||
[1595865600000, 13.08],
|
||||
[1595952000000, 15.83],
|
||||
[1596038400000, 15.26],
|
||||
[1596124800000, 16.22],
|
||||
[1596384000000, 18.11],
|
||||
[1596470400000, 18.22],
|
||||
[1596556800000, 18.25],
|
||||
[1596643200000, 17.9],
|
||||
[1596729600000, 16.54],
|
||||
[1596988800000, 16.96],
|
||||
[1597075200000, 15.89],
|
||||
[1597161600000, 15.05],
|
||||
[1597248000000, 14.75],
|
||||
[1597334400000, 16.46],
|
||||
[1597593600000, 19.2],
|
||||
[1597680000000, 19.14],
|
||||
[1597766400000, 17.35],
|
||||
[1597852800000, 15.83],
|
||||
[1597939200000, 16.81],
|
||||
[1598198400000, 17.73],
|
||||
[1598284800000, 17.88],
|
||||
[1598371200000, 16.5],
|
||||
[1598457600000, 17.12],
|
||||
[1598544000000, 19.92],
|
||||
[1598803200000, 19.22],
|
||||
[1598889600000, 19.86],
|
||||
[1598976000000, 19.91],
|
||||
[1599062400000, 19.24],
|
||||
[1599148800000, 18.08],
|
||||
[1599408000000, 15.59],
|
||||
[1599494400000, 16.21],
|
||||
[1599580800000, 13.49],
|
||||
[1599667200000, 13.42],
|
||||
[1599753600000, 14.55],
|
||||
[1600012800000, 15.13],
|
||||
[1600099200000, 16.06],
|
||||
[1600185600000, 15.29],
|
||||
[1600272000000, 14.68],
|
||||
[1600358400000, 17.26],
|
||||
[1600617600000, 16.13],
|
||||
[1600704000000, 14.75],
|
||||
[1600790400000, 15.17],
|
||||
[1600876800000, 12.96],
|
||||
[1600963200000, 13.13],
|
||||
[1601222400000, 13.42],
|
||||
[1601308800000, 13.67],
|
||||
[1601395200000, 13.56],
|
||||
[1602172800000, 15.88],
|
||||
[1602432000000, 19.39],
|
||||
[1602518400000, 19.79],
|
||||
[1602604800000, 19.0],
|
||||
[1602691200000, 18.79],
|
||||
[1602777600000, 18.61],
|
||||
[1603036800000, 17.72],
|
||||
[1603123200000, 18.66],
|
||||
[1603209600000, 18.64],
|
||||
[1603296000000, 18.28],
|
||||
[1603382400000, 16.8],
|
||||
[1603641600000, 16.13],
|
||||
[1603728000000, 16.33],
|
||||
[1603814400000, 17.27],
|
||||
[1603900800000, 18.15],
|
||||
[1603987200000, 16.23],
|
||||
[1604246400000, 16.86],
|
||||
[1604332800000, 18.27],
|
||||
[1604419200000, 19.16],
|
||||
[1604505600000, 20.93],
|
||||
[1604592000000, 20.94],
|
||||
[1604851200000, 23.31],
|
||||
[1604937600000, 22.63],
|
||||
[1605024000000, 21.42],
|
||||
[1605110400000, 21.51],
|
||||
[1605196800000, 20.23],
|
||||
[1605456000000, 21.4],
|
||||
[1605542400000, 21.17],
|
||||
[1605628800000, 21.09],
|
||||
[1605715200000, 21.99],
|
||||
[1605801600000, 22.37],
|
||||
[1606060800000, 23.9],
|
||||
[1606147200000, 23.13],
|
||||
[1606233600000, 21.56],
|
||||
[1606320000000, 21.78],
|
||||
[1606406400000, 23.3],
|
||||
[1606665600000, 22.79],
|
||||
[1606752000000, 25.43],
|
||||
[1606838400000, 25.43],
|
||||
[1606924800000, 25.18],
|
||||
[1607011200000, 25.4],
|
||||
[1607270400000, 24.32],
|
||||
[1607356800000, 24.02],
|
||||
[1607443200000, 22.35],
|
||||
[1607529600000, 22.3]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -4478,7 +4482,9 @@ var fS_code = '161725'
|
|||
{ x: 1606924800000, y: 72, sc: '1190' },
|
||||
{ x: 1607011200000, y: 16, sc: '1191' },
|
||||
{ x: 1607270400000, y: 15, sc: '1190' },
|
||||
{ x: 1607356800000, y: 14, sc: '1189' }
|
||||
{ x: 1607356800000, y: 14, sc: '1190' },
|
||||
{ x: 1607443200000, y: 14, sc: '1189' },
|
||||
{ x: 1607529600000, y: 15, sc: '1189' }
|
||||
]
|
||||
/*同类排名百分比*/ var Data_rateInSimilarPersent = [
|
||||
[1440604800000, 93.0],
|
||||
|
|
@ -5765,7 +5771,9 @@ var fS_code = '161725'
|
|||
[1606924800000, 93.95],
|
||||
[1607011200000, 98.66],
|
||||
[1607270400000, 98.74],
|
||||
[1607356800000, 98.82]
|
||||
[1607356800000, 98.82],
|
||||
[1607443200000, 98.82],
|
||||
[1607529600000, 98.74]
|
||||
]
|
||||
/*规模变动 mom-较上期环比*/ var Data_fluctuationScale = {
|
||||
categories: [
|
||||
|
|
@ -5833,7 +5841,7 @@ var fS_code = '161725'
|
|||
pic: 'https://pdf.dfcfw.com/pdf/H8_JPG30379533_1.jpg',
|
||||
name: '侯昊',
|
||||
star: 3,
|
||||
workTime: '3年又110天',
|
||||
workTime: '3年又112天',
|
||||
fundSize: '416.28亿(17只基金)',
|
||||
power: {
|
||||
avr: '56.39',
|
||||
|
|
@ -5846,20 +5854,20 @@ var fS_code = '161725'
|
|||
'根据基金经理现任管理基金资产规模评分'
|
||||
],
|
||||
data: [47.2, 76.5, 37.7, 47.4, 94.8],
|
||||
jzrq: '2020-12-04'
|
||||
jzrq: '2020-12-08'
|
||||
},
|
||||
profit: {
|
||||
categories: ['任期收益', '同类平均', '沪深300'],
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{ name: null, color: '#7cb5ec', y: 223.5091 },
|
||||
{ name: null, color: '#414c7b', y: 52.32 },
|
||||
{ name: null, color: '#f7a35c', y: 33.51 }
|
||||
{ name: null, color: '#7cb5ec', y: 224.7448 },
|
||||
{ name: null, color: '#414c7b', y: 50.71 },
|
||||
{ name: null, color: '#f7a35c', y: 30.31 }
|
||||
]
|
||||
}
|
||||
],
|
||||
jzrq: '2020-12-04'
|
||||
jzrq: '2020-12-08'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -5873,38 +5881,38 @@ var fS_code = '161725'
|
|||
}
|
||||
/*同类型基金涨幅榜（页面底部通栏）*/ var swithSameType = [
|
||||
[
|
||||
'001838_国投瑞银国家安全混合_14.17',
|
||||
'050018_博时行业轮动混合_12.19',
|
||||
'519198_万家颐和灵活配置混合_11.95',
|
||||
'004205_东方支柱产业灵活配置_11.76',
|
||||
'161724_招商中证煤炭等权指数_11.34'
|
||||
'161724_招商中证煤炭等权指数_12.58',
|
||||
'001838_国投瑞银国家安全混合_11.51',
|
||||
'002251_华夏军工安全混合_9.64',
|
||||
'004698_博时军工主题股票_9.60',
|
||||
'168501_北信瑞丰产业升级_9.55'
|
||||
],
|
||||
[
|
||||
'003834_华夏能源革新股票_38.23',
|
||||
'005939_工银新能源汽车混合A_37.46',
|
||||
'400015_东方新能源汽车混合_37.40',
|
||||
'005940_工银新能源汽车混合C_37.32',
|
||||
'004854_广发中证全指汽车指数_36.33'
|
||||
'400015_东方新能源汽车混合_41.99',
|
||||
'003834_华夏能源革新股票_41.82',
|
||||
'001643_汇丰晋信智造先锋股票_41.26',
|
||||
'001644_汇丰晋信智造先锋股票_41.08',
|
||||
'540008_汇丰晋信低碳先锋股票_40.90'
|
||||
],
|
||||
[
|
||||
'002190_农银新能源主题_85.39',
|
||||
'001606_农银工业4.0混合_80.23',
|
||||
'000336_农银研究精选混合_73.68',
|
||||
'004854_广发中证全指汽车指数_73.30',
|
||||
'004855_广发中证全指汽车指数_73.16'
|
||||
'002190_农银新能源主题_81.34',
|
||||
'001606_农银工业4.0混合_75.57',
|
||||
'004997_广发高端制造股票A_69.53',
|
||||
'000336_农银研究精选混合_68.58',
|
||||
'005968_创金合信工业周期股票_68.13'
|
||||
],
|
||||
[
|
||||
'002190_农银新能源主题_142.15',
|
||||
'004997_广发高端制造股票A_135.58',
|
||||
'000336_农银研究精选混合_132.16',
|
||||
'001606_农银工业4.0混合_132.16',
|
||||
'001643_汇丰晋信智造先锋股票_125.33'
|
||||
'002190_农银新能源主题_138.28',
|
||||
'004997_广发高端制造股票A_135.79',
|
||||
'001643_汇丰晋信智造先锋股票_126.15',
|
||||
'001606_农银工业4.0混合_126.10',
|
||||
'540008_汇丰晋信低碳先锋股票_125.42'
|
||||
],
|
||||
[
|
||||
'001679_前海开源中国稀缺资产_225.57',
|
||||
'002079_前海开源中国稀缺资产_224.94',
|
||||
'001508_富国新动力灵活配置混_209.84',
|
||||
'161903_万家行业优选混合(L_209.20',
|
||||
'001510_富国新动力灵活配置混_205.92'
|
||||
'001679_前海开源中国稀缺资产_226.05',
|
||||
'002079_前海开源中国稀缺资产_225.40',
|
||||
'001508_富国新动力灵活配置混_208.52',
|
||||
'001510_富国新动力灵活配置混_204.58',
|
||||
'161903_万家行业优选混合(L_203.41'
|
||||
]
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue