Skip to content

Instantly share code, notes, and snippets.

@ssddi456

ssddi456/testCaculate.html

Last active May 9, 2018 12:23
Show Gist options
  • Save ssddi456/9b1a6148d63f0a6743c8e1866da9a2b6 to your computer and use it in GitHub Desktop.
Save ssddi456/9b1a6148d63f0a6743c8e1866da9a2b6 to your computer and use it in GitHub Desktop.
Download ZIP
a simple caculate
Raw
testCaculate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="main" class="container">
<div class="clearfix">
<div v-for="(peopleEffort, peopleName) in people" class="card mb-3" style="max-width: 18rem; float: left; margin-left: 15px;"
:class="[ checkPeopleEfforts(peopleName) == 1 && 'text-white bg-warning', checkPeopleEfforts(peopleName) == 0 && 'text-white bg-success' ]"
draggable="true" @dragstart="pickPeople(peopleName)" @mouseenter="hoveredPeople = peopleName">
<div class="card-header">{{ peopleName }}</div>
<div class="card-body">
<p class="card-text">{{ getPeopleTotalEffort(peopleName) }}</p>
</div>
</div>
</div>
<div class="clearfix">
<div class="card" v-for="(event, eventName) in events" @dragover.prevent="noop" @drop.prevent="addEffortsToEvent(eventName)">
<div class="card-header">
<div>{{ eventName }} : {{ getEventTotalEfort(eventName) }}人力（正式）</div>
</div>
<div class="card-body">
<div v-for="usage in event" class="btn-toolbar" style="float: left;" @mouseenter="hoveredPeople = usage.name">
<div class="input-group">
<div class="input-group-text" :class="[hoverPeople(usage.name) && 'text-white bg-primary']">
{{usage.name}} : {{usage.efforts.toFixed(1)}}人力
</div>
</div>
<div class="btn-group">
<div class="btn btn-light" @click="increaseUsage(usage)">+</div>
<div class="btn btn-light" @click="decreaseUsage(usage)">-</div>
<div class="btn btn-light" @click="removeUsage(usage)">x</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="./testCaculate.js"></script>
</body>
</html>
Raw
testCaculate.js
// import * as Vue from 'vue';
var usages = [];
var people = {
'测试人力1': 0,
'测试人力3': 0,
'测试人力4': 0,
'测试人力5': 0
};
var events = {
'测试项目1': [],
'测试项目2': [],
'测试项目3': [],
'测试项目4': []
};
var efforUnit = 0.1;
var EffortStat;
(function (EffortStat) {
EffortStat[EffortStat["ok"] = 0] = "ok";
EffortStat[EffortStat["overwork"] = 1] = "overwork";
EffortStat[EffortStat["notEnough"] = 2] = "notEnough";
})(EffortStat || (EffortStat = {}));
function getPeopleTotalEffort(name) {
var ret = 0;
for (var i = 0; i < usages.length; i++) {
var element = usages[i];
if (element.name == name) {
ret += element.efforts;
}
}
return ret.toFixed(1);
}
function checkPeopleEfforts(name) {
var ret = parseFloat(getPeopleTotalEffort(name));
if (ret > 1) {
return EffortStat.overwork;
}
else if (ret == 1) {
return EffortStat.ok;
}
else {
return EffortStat.notEnough;
}
}
function addEffortsToEvent(name, eventName) {
var oldEffort = events[eventName].filter(function (usage) { return usage.name == name; });
if (oldEffort.length) {
oldEffort[0].efforts += efforUnit;
}
else {
var usage = {
name: name,
event: eventName,
efforts: efforUnit
};
usages.push(usage);
events[eventName].push(usage);
}
}
function removeUsage(usage) {
usages.splice(usages.indexOf(usage), 1);
events[usage.event].splice(events[usage.event].indexOf(usage), 1);
}
function getEventTotalEfort(name) {
var ret = 0;
for (var i = 0; i < events[name].length; i++) {
var element = events[name][i];
ret += element.efforts;
}
return ret.toFixed(1);
}
new Vue({
el: '#main',
data: {
people: people,
events: events,
currentPeople: '',
hoveredPeople: ''
},
methods: {
pickPeople: function (name) {
this.currentPeople = name;
},
addEffortsToEvent: function (name) {
if (this.currentPeople in people) {
addEffortsToEvent(this.currentPeople, name);
}
this.currentPeople = '';
},
removeUsage: removeUsage,
checkPeopleEfforts: checkPeopleEfforts,
getEventTotalEfort: getEventTotalEfort,
getPeopleTotalEffort: getPeopleTotalEffort,
noop: function () { },
increaseUsage: function (usage) {
usage.efforts += efforUnit;
},
decreaseUsage: function (usage) {
usage.efforts = Math.max(0, usage.efforts - efforUnit);
},
hoverPeople: function (name) {
return name == this.hoveredPeople;
}
}
});
Raw
testCaculate.ts
// import * as Vue from 'vue';
interface usage {
name: string;
event: string;
efforts: number;
}
const usages: usage[] = [];
const people = {
'测试人力1': 0,
'测试人力3': 0,
'测试人力4': 0,
'测试人力5': 0,
};
const events = {
'测试项目1': [] as usage[],
'测试项目2': [] as usage[],
'测试项目3': [] as usage[],
'测试项目4': [] as usage[],
};
const efforUnit = 0.1;
enum EffortStat {
ok = 0,
overwork = 1,
notEnough = 2,
}
function getPeopleTotalEffort(name: string) {
let ret = 0;
for (let i = 0; i < usages.length; i++) {
const element = usages[i];
if(element.name == name) {
ret += element.efforts;
}
}
return ret.toFixed(1);
}
function checkPeopleEfforts(name: string) {
const ret = parseFloat(getPeopleTotalEffort(name));
if (ret > 1) {
return EffortStat.overwork;
} else if (ret == 1) {
return EffortStat.ok;
} else {
return EffortStat.notEnough
}
}
function addEffortsToEvent(name: string, eventName: string) {
const oldEffort = events[eventName].filter(usage => usage.name == name) as usage[];
if (oldEffort.length){
oldEffort[0].efforts += efforUnit;
} else {
const usage: usage = {
name,
event: eventName,
efforts: efforUnit
};
usages.push(usage);
events[eventName].push(usage);
}
}
function removeUsage(usage: usage) {
usages.splice(usages.indexOf(usage), 1);
events[usage.event].splice(events[usage.event].indexOf(usage), 1);
}
function getEventTotalEfort(name: string) {
let ret = 0;
for (let i = 0; i < events[name].length; i++) {
const element = events[name][i];
ret += element.efforts;
}
return ret.toFixed(1);
}
new Vue({
el: '#main',
data: {
people,
events,
currentPeople: '',
hoveredPeople: '',
},
methods: {
pickPeople(name) {
this.currentPeople = name;
},
addEffortsToEvent(name: string) {
if (this.currentPeople in people) {
addEffortsToEvent(this.currentPeople, name);
}
this.currentPeople = '';
},
removeUsage,
checkPeopleEfforts,
getEventTotalEfort,
getPeopleTotalEffort,
noop() { },
increaseUsage(usage: usage) {
usage.efforts += efforUnit;
},
decreaseUsage(usage: usage) {
usage.efforts = Math.max(0, usage.efforts - efforUnit);
},
hoverPeople(name: string) {
return name == this.hoveredPeople;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment