170 行
8.5 KiB
HTML
170 行
8.5 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/element-ui-2.15.14/css/index.css">
|
|
<link rel="stylesheet" href="__CDN__/assets/css/data.css?time={:time()}">
|
|
<link rel="stylesheet" href="__CDN__/assets/css/vvv.css">
|
|
|
|
<div id="data" v-cloak>
|
|
<!-- 数据统计 -->
|
|
<el-row class="row main">
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="main-1">
|
|
<div class="data-main">
|
|
<div class="header">
|
|
<div class="h-title">圆形仓库统计</div>
|
|
<div class="h-btn">数据总计</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="c-total">{$data.roundGranary.total}</div>
|
|
<div class="c-current">今日新增 <span>{$data.roundGranary.current}</span></div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="bottom">
|
|
<div class="month-text">本月新增</div>
|
|
<div class="month-total">{$data.roundGranary.month}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="main-1">
|
|
<div class="data-main">
|
|
<div class="header">
|
|
<div class="h-title">方形仓库统计</div>
|
|
<div class="h-btn">数据总计</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="c-total">{$data.squareGranary.total}</div>
|
|
<div class="c-current">今日新增 <span>{$data.squareGranary.current}</span></div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="bottom">
|
|
<div class="month-text">本月新增</div>
|
|
<div class="month-total">{$data.squareGranary.month}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="main-1">
|
|
<div class="data-main">
|
|
<div class="header">
|
|
<div class="h-title">检测参数统计</div>
|
|
<div class="h-btn">数据总计</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="c-total">{$data.params.total}</div>
|
|
<div class="c-current">今日新增 <span>{$data.params.current}</span></div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="bottom">
|
|
<div class="month-text">本月新增</div>
|
|
<div class="month-total">{$data.params.month}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="main-1">
|
|
<div class="data-main">
|
|
<div class="header">
|
|
<div class="h-title">质检报告统计</div>
|
|
<div class="h-btn">数据总计</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="c-total">{$data.content.total}</div>
|
|
<div class="c-current">今日新增 <span>{$data.content.current}</span></div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="bottom">
|
|
<div class="month-text">本月新增</div>
|
|
<div class="month-total">{$data.content.month}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 仓库农作检测参数数据折线图 -->
|
|
<el-row class="row main">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="main-1" style="background: #ffffff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); overflow: hidden;">
|
|
<style>
|
|
.custom-dashboard-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
.category-filter-bar {
|
|
padding: 10px 20px;
|
|
background: #fafbfc;
|
|
border-bottom: 1px solid #ebeef5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
<!-- 顶部筛选栏 -->
|
|
<div class="custom-dashboard-bar">
|
|
<div class="main-refresh" style="display: flex; align-items: center;">
|
|
<div class="refresh-btn" @click="getParamsLineCharts" style="cursor: pointer; display: flex; align-items: center; gap: 4px; color: #409eff; font-size: 14px;">
|
|
<i class="el-icon-refresh-right"></i>
|
|
<span class="main-refresh-tip" style="font-weight: 500;">刷新图表</span>
|
|
</div>
|
|
</div>
|
|
<div class="main-position-right" style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
|
|
<div class="search-date">
|
|
<el-date-picker
|
|
size="small"
|
|
value-format="yyyy"
|
|
style="width: 140px;"
|
|
v-model="search.year"
|
|
type="year"
|
|
placeholder="检测年份">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="granary">
|
|
<el-select filterable size="small" style="width: 200px;" v-model="search.gid" placeholder="所属仓库" @change="granaryChange">
|
|
<el-option
|
|
v-for="item in granaryList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="type-list">
|
|
<el-radio-group size="small" v-model="search.type" @change="typeChange">
|
|
<el-radio-button v-for="(item, index) of typeList" :label="index">{{item.name}}
|
|
</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="search-btn">
|
|
<el-button @click="getParamsLineCharts" size="small" type="primary" plain icon="el-icon-search">查询
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 指标分类维度专属切换条 -->
|
|
<div class="category-filter-bar">
|
|
<div style="display: flex; align-items: center;">
|
|
<span style="font-size: 13px; color: #4b5563; margin-right: 12px; font-weight: 600;">
|
|
<i class="el-icon-s-operation" style="color: #409eff;"></i> 指标维度：
|
|
</span>
|
|
<el-radio-group size="mini" v-model="selectedCategory" @change="categoryChange">
|
|
<el-radio-button label="core">⭐ 核心品质</el-radio-button>
|
|
<el-radio-button label="impurity">🌾 物理与杂质</el-radio-button>
|
|
<el-radio-button label="storage">🧪 储存品质</el-radio-button>
|
|
<el-radio-button label="safety">🛡️ 卫生安全</el-radio-button>
|
|
<el-radio-button label="all">📊 全部指标</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div style="font-size: 12px; color: #909399;">
|
|
<i class="el-icon-info"></i> 已按国标体系分类，Y轴动态自适应放大微量指标
|
|
</div>
|
|
</div>
|
|
<div class="chart-data" style="padding: 10px 10px 0 10px;">
|
|
<div style="height: 520px;" id="main-chart"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<script src="__CDN__/assets/element-ui-2.15.14/js/vue.js"></script>
|
|
<script src="__CDN__/assets/element-ui-2.15.14/js/index.js"></script>
|
|
<script src="__CDN__/assets/tool/libs/moment.js"></script>
|
|
<script src="/assets/js/jquery-2.1.1.min.js"></script> |