|
|
@@ -0,0 +1,148 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>实验完成率</title>
|
|
|
+ <link href="#(path)/static/js/element-ui.css" rel="stylesheet"/>
|
|
|
+ <style>
|
|
|
+ body {background-color: #f1f1f4;}
|
|
|
+ .bar{height:600px;margin-top: 50px;}
|
|
|
+ [v-cloak] {display: none;}
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="app" v-cloak>
|
|
|
+ <el-form :inline="true" label-width="auto">
|
|
|
+ <el-form-item label="实验部门" prop="state">
|
|
|
+ <el-cascader
|
|
|
+ v-model="value"
|
|
|
+ :options="options"
|
|
|
+ :props="props"
|
|
|
+ @change="handleChange"
|
|
|
+ :show-all-levels="false"
|
|
|
+ clearable>
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="created"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div id="echart" class="bar"></div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+<script src="#(path)/static/js/jquery.min.js"></script>
|
|
|
+<script src="#(path)/static/js/layer/layer.js"></script>
|
|
|
+<script src="#(path)/static/js/vue.min.js"></script>
|
|
|
+<script src="#(path)/static/js/common.js"></script>
|
|
|
+<script src="#(path)/static/js/echarts.min.js"></script>
|
|
|
+<script src="#(path)/static/js/element-ui.js"></script>
|
|
|
+<script>
|
|
|
+ let vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ created: ['#(begin)', '#(end)'],
|
|
|
+ value: '',
|
|
|
+ param: {
|
|
|
+ DOMAINID: '#(DOMAINID)',
|
|
|
+ ID: '#(ID)'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: 'ID',
|
|
|
+ label: 'NAME',
|
|
|
+ checkStrictly: true
|
|
|
+ },
|
|
|
+ options: #(department)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(value) {
|
|
|
+ this.param.ID=value[value.length-1]
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.param.begin = this.created[0];
|
|
|
+ this.param.end = this.created[1];
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ sendAjax("#(path)/report/getData", this.param, res => {
|
|
|
+ cancelLoding();
|
|
|
+ this.initEcharts(res.data);
|
|
|
+ console.log("asd:" + JSON.stringify(res));
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initEcharts(data) {
|
|
|
+ let myChart = echarts.init(document.getElementById('echart'));
|
|
|
+ let legend = [];
|
|
|
+ let series = [];
|
|
|
+ data.forEach(item => {
|
|
|
+ legend.push(item.TAG);
|
|
|
+ series.push({name: item.TAG, value: item.COUNT, id: 'asd'});
|
|
|
+ })
|
|
|
+ let option = {
|
|
|
+ title: [{
|
|
|
+ text: '实验完成率',
|
|
|
+ left: 'center',
|
|
|
+ top: 0,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '18',
|
|
|
+ }
|
|
|
+
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
|
+ position: function (p) { //其中p为当前鼠标的位置
|
|
|
+ return [p[0] + 10, p[1] - 10];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '90%',
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10,
|
|
|
+ data: legend,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '15',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '实验完成率',
|
|
|
+ type: 'pie',
|
|
|
+ center: ['50%', '42%'],
|
|
|
+ radius: ['40%', '60%'],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '15',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: series
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ myChart.on('click', function (params) {
|
|
|
+ console.log(params)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+</html>
|
xiaoshushu