|
|
@@ -1,7 +1,7 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="statistics1">
|
|
|
- <TabList :ind='1'/>
|
|
|
+ <TabList :ind="1" />
|
|
|
<div class="right">
|
|
|
<div class="top">
|
|
|
<el-breadcrumb separator="/">
|
|
|
@@ -10,13 +10,81 @@
|
|
|
<el-breadcrumb-item id="mytitle">统计报表</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
- <div class="conten"></div>
|
|
|
+ <div class="conten">
|
|
|
+ <div class="oneRow">
|
|
|
+ <div class="type">
|
|
|
+ <span>统计类型：</span>
|
|
|
+ <div
|
|
|
+ class="type_Son"
|
|
|
+ :class="{ active: item.sec }"
|
|
|
+ v-for="(item, index) in butList"
|
|
|
+ :key="index"
|
|
|
+ @click="item.sec = !item.sec"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mytime" v-if="0">
|
|
|
+ <span>选择日期：</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="mybtn" v-if="0">
|
|
|
+ <el-button>查 询</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 图表 -->
|
|
|
+ <div class="towRow">
|
|
|
+ <div class="single" v-for="(item,index) in butList" :key="index" v-show="item.sec">
|
|
|
+ <!-- 图表盒子 -->
|
|
|
+ <div class="echarts" :class="item.calss"></div>
|
|
|
+
|
|
|
+ <div class="single_title">
|
|
|
+ <!-- 导出按钮 -->
|
|
|
+ <div class="export">
|
|
|
+ <el-button>导 出</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="title_left">
|
|
|
+ <p>{{item.name}}分布</p>
|
|
|
+ <span>每日0：00刷新</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div class="table">
|
|
|
+ <div class="title">藏品报表</div>
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ background: '#fafafa', color: '#000' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="文物类别">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="num" label="数量">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TabList from '@/components/tabLeft3.vue'
|
|
|
+// ---------------------echarts
|
|
|
+import * as echarts from 'echarts/core'
|
|
|
+import { TooltipComponent } from 'echarts/components'
|
|
|
+import { PieChart } from 'echarts/charts'
|
|
|
+import { LabelLayout } from 'echarts/features'
|
|
|
+import { CanvasRenderer } from 'echarts/renderers'; import TabList from '@/components/tabLeft3.vue'
|
|
|
+echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout])
|
|
|
export default {
|
|
|
name: 'statistics1',
|
|
|
// import引入的组件需要注入到对象中才能使用
|
|
|
@@ -24,7 +92,51 @@ export default {
|
|
|
data () {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
-
|
|
|
+ // 表格数据
|
|
|
+ tableData: [{ name: '陶瓷', num: '100' }, { name: '青铜', num: '90' }, { name: '铁', num: '80' }],
|
|
|
+ // 图表数据
|
|
|
+ butList: [
|
|
|
+ {
|
|
|
+ name: '文物类别',
|
|
|
+ sec: true,
|
|
|
+ calss: 'wenwu',
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '陶瓷 10.00%' },
|
|
|
+ { value: 735, name: '青铜 10.00%' },
|
|
|
+ { value: 580, name: '铁 10.00%' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '藏品级别',
|
|
|
+ sec: true,
|
|
|
+ calss: 'jibie',
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '仿制 10.00%' },
|
|
|
+ { value: 735, name: '修复 10.00%' },
|
|
|
+ { value: 580, name: '损坏 10.00%' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '藏品来源',
|
|
|
+ sec: true,
|
|
|
+ calss: 'laiyuan',
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '陶瓷2 10.00%' },
|
|
|
+ { value: 735, name: '青铜2 10.00%' },
|
|
|
+ { value: 580, name: '铁2 10.00%' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '入馆类型',
|
|
|
+ sec: true,
|
|
|
+ calss: 'leixing',
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '仿制2 10.00%' },
|
|
|
+ { value: 735, name: '修复2 10.00%' },
|
|
|
+ { value: 580, name: '损坏2 10.00%' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
|
@@ -33,12 +145,46 @@ export default {
|
|
|
watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 封装echarts方法
|
|
|
+ echartsFu (dom, data) {
|
|
|
+ const chartDom = document.querySelector(dom)
|
|
|
+ const myChart = echarts.init(chartDom)
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ data,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ option && myChart.setOption(option)
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created () {},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted () {},
|
|
|
+ mounted () {
|
|
|
+ // ---------------------echarts
|
|
|
+ this.echartsFu('.wenwu', this.butList[0].data)
|
|
|
+ this.echartsFu('.jibie', this.butList[1].data)
|
|
|
+ this.echartsFu('.laiyuan', this.butList[2].data)
|
|
|
+ this.echartsFu('.leixing', this.butList[3].data)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.butList[2].sec = this.butList[3].sec = false
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
@@ -51,7 +197,7 @@ export default {
|
|
|
<style lang='less' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
.statistics1 {
|
|
|
- /deep/#mytitle>span{
|
|
|
+ /deep/#mytitle > span {
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
display: flex;
|
|
|
@@ -71,8 +217,94 @@ export default {
|
|
|
}
|
|
|
.conten {
|
|
|
flex: 1;
|
|
|
- background-color: #fff;
|
|
|
+ // background-color: #fff;
|
|
|
margin: 20px 20px 40px;
|
|
|
+ color: black;
|
|
|
+ .oneRow {
|
|
|
+ display: flex;
|
|
|
+ padding: 24px;
|
|
|
+ height: 80px;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ .type {
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ .type_Son {
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 77px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ &:hover {
|
|
|
+ background-color: #1890ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #1890ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mytime {
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ .mybtn {
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .towRow {
|
|
|
+ margin-top: 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .single {
|
|
|
+ position: relative;
|
|
|
+ padding: 24px 24px 0;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 49%;
|
|
|
+ height: 300px;
|
|
|
+ .single_title {
|
|
|
+ position: relative;
|
|
|
+ .export {
|
|
|
+ // top: 24px;
|
|
|
+ right: 20px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .title_left {
|
|
|
+ & > span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echarts{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ width: 65%;
|
|
|
+ height: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table{
|
|
|
+ background-color: #fff;
|
|
|
+ .title{
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
