123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722 |
- <template>
- <div class="container">
- <el-row :gutter="20">
- <el-col :span="12">
- <div class="accuracy">
- <div class="accuracy_t">
- <div class="accuracy_t_l">
- <h4><span class="title"></span>准确性分析</h4>
- <el-select v-model="accuracy.value1" style="width:100px;margin-right: 5px;" class="filter-item">
- <el-option v-for="item in accuracy.cattleTpyeList" :key="item.value" :label="item.label"
- :value="item.value"> </el-option>
- </el-select>
- <el-select v-model="accuracy.value2" style="width:100px;margin-right: 5px;" class="filter-item">
- <el-option v-for="item in accuracy.formulaList" :key="item.value" :label="item.label"
- :value="item.value"> </el-option>
- </el-select>
- <el-date-picker v-model="accuracy.inputDatetime" :clearable="false" class="inputDatetime filter-item"
- type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
- style="width: 250px;" />
- </div>
- <div class="accuracy_t_r">
- <div class="exportTable button" @click="handleChart('accuracy')">切换图表</div>
- <div class="exportTable button" @click="handleExport('accuracy')">导出</div>
- </div>
- </div>
- <div class="accuracy_b">
- <el-tabs v-model="accuracy.activeName" @tab-click="handleTabClick">
- <el-tab-pane label="混料准确率" name="first" />
- <el-tab-pane label="混料正确率" name="second" />
- <el-tab-pane label="撒料准确率" name="third" />
- <el-tab-pane label="撒料正确率" name="fourth" />
- </el-tabs>
- <el-row :gutter="20">
- <el-col :span="6">
- <div class="maxdiv">
- <div class="title-t">最高</div>
- <div class="title-c">99%</div>
- <div class="title-b">NO.1 蒙牛3号牧场</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="mediandiv">
- <div class="title-t">中位值</div>
- <div class="title-c">99%</div>
- <a class="title-b" @click="handleSeeRanking">查看排名</a>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="mindiv">
- <div class="title-t">最低</div>
- <div class="title-c">99%</div>
- </div>
- </el-col>
- </el-row>
- <div v-if="accuracy.chart1.isChart">
- <div id="chartLine1" v-loading="accuracy.chart1.listLoading" style="height:310px;" />
- <a class="more" @click="handleMore">更多></a>
- </div>
- <div v-else>
- <el-table style="width: 100%" :max-height="320" :row-style="rowStyle" :cell-style="cellStyle" border :data="accuracy.chart1.tableDataList1">
- <template v-for="item in accuracy.chart1.tableTitleList1">
- <template>
- <el-table-column
- min-width="30"
- :key="item.value"
- :label="item.value"
- align="center"
- >
- <template slot-scope="scope">
- <span>{{ scope.row[item.name] }}</span>
- </template>
- </el-table-column>
- </template>
- </template>
- </el-table>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="12">
- <div class="time">
- <div class="time_t">
- <div class="time_t_l">
- <h4><span class="title"></span>执行时间</h4>
- <el-select v-model="time.value1" style="width:100px;margin-right: 5px;" class="filter-item">
- <el-option v-for="item in time.cattleTpyeList" :key="item.value" :label="item.label"
- :value="item.value"> </el-option>
- </el-select>
- <el-select v-model="time.value2" style="width:100px;margin-right: 5px;" class="filter-item">
- <el-option v-for="item in time.formulaList" :key="item.value" :label="item.label"
- :value="item.value"> </el-option>
- </el-select>
- <el-date-picker v-model="time.inputDatetime" :clearable="false" class="inputDatetime filter-item"
- type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
- style="width: 250px;" />
- </div>
- <div class="time_t_r">
- <div class="exportTable button" @click="handleChart('time')">切换图表</div>
- <div class="exportTable button" @click="handleExport('time')">导出</div>
- </div>
- </div>
- <div v-if="time.chart1.isChart">
- <div id="chartLine2" v-loading="time.chart1.listLoading" style="height:420px;" />
- </div>
- <div v-else style="margin: 10px 10px;">
- <el-table :data="time.chart1.tableDataList1" border style="width: 100%;" :max-height="410" :row-style="rowStyle" :cell-style="cellStyle" class="elTable">
- <el-table-column label="牧场" min-width="80px" align="center" prop="title" />
- <el-table-column label="加料时间" min-width="80px" align="center" prop="title" />
- <el-table-column label="搅拌延时" min-width="80px" align="center" prop="title" />
- <el-table-column label="搅拌时间" min-width="80px" align="center" prop="title" />
- <el-table-column label="撒料时间" min-width="80px" align="center" prop="title" />
- </el-table>
- </div>
- </div>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="24">
- <div class="abnormal">
- <div class="abnormal_t">
- <div class="abnormal_t_l">
- <h4>
- <span class="title"></span>
- 异常撒料时间统计
- <el-tooltip class="item" effect="dark" placement="top-start">
- <div slot="content">
- 按时间段统计各牧场配方的每个班次之间<br/>
- 的撒料间隔时间波动,切换图表可查看各<br/>
- 班次撒料时间,在波动时间外的异常撒料<br/>
- 时间数据标红显示
- </div>
- <span class="el-icon-question"></span>
- </el-tooltip>
- </h4>
- <el-select v-model="abnormal.value2" style="width:100px;margin-right: 5px;" class="filter-item">
- <el-option v-for="item in abnormal.formulaList" :key="item.value" :label="item.label"
- :value="item.value"> </el-option>
- </el-select>
- <el-date-picker v-model="abnormal.inputDatetime" :clearable="false" class="inputDatetime filter-item"
- type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
- style="width: 250px;" />
- </div>
- <div class="abnormal_t_r">
- <div class="exportTable button" @click="handleChart('abnormal')">切换图表</div>
- <div class="exportTable button" @click="handleExport('abnormal')">导出</div>
- </div>
- </div>
- <div v-if="abnormal.chart1.isChart">
- <div id="chartLine3" v-loading="abnormal.chart1.listLoading" style="height:420px;" />
- </div>
- <div v-else style="margin: 10px 10px;">
- <el-table :data="abnormal.chart1.tableDataList1" border style="width: 100%;" :max-height="410" :row-style="rowStyle" :cell-style="cellStyle" class="elTable">
- <el-table-column label="牧场" min-width="130px" align="center" prop="title" />
- <el-table-column label="栏舍" min-width="130px" align="center" prop="title" />
- <el-table-column label="班次" min-width="130px" align="center" prop="title" />
- <el-table-column label="实际撒料时间" min-width="130px" align="center" prop="title" />
- </el-table>
- </div>
- </div>
- </el-col>
- </el-row>
- <el-dialog :title="textMap[accuracy.dialogStatus]" :visible.sync="accuracy.dialogFormVisible" :close-on-click-modal="false" width="50%">
- <div class="accuracy-content">
- <div v-if="accuracy.dialogStatus == 'more'" class="dialogmore" style="min-height: 100px;">
- <el-checkbox-group v-model="accuracy.more.checkedPasture">
- <el-checkbox border v-for="(item,index) in accuracy.more.pastureList" :label="item.id" :key="index">{{item.name}}</el-checkbox>
- </el-checkbox-group>
- </div>
- <div v-else class="seeRanking" style="min-height: 300px;">
- <el-tabs v-model="accuracy.seeRanking.activeName" @tab-click="handleSeeTabClick">
- <el-tab-pane label="混料准确率" name="first" />
- <el-tab-pane label="混料正确率" name="second" />
- <el-tab-pane label="撒料准确率" name="third" />
- <el-tab-pane label="撒料正确率" name="fourth" />
- </el-tabs>
- <div class="search">
- <el-input v-model="accuracy.seeRanking.name" placeholder="准确率" style="width: 180px;" class="filter-item" type="number" clearable />
- <span style="margin-right: 5px;">-</span>
- <el-input v-model="accuracy.seeRanking.name" placeholder="准确率" style="width: 180px;" class="filter-item" type="number" clearable />
- <el-button class="successBorder" @click="handleSearch">查询</el-button>
- </div>
- <el-table :key="accuracy.seeRanking.tableKey" v-loading="accuracy.seeRanking.listLoading" element-loading-text="给我一点时间" :data="accuracy.seeRanking.list"
- border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle"
- class="elTable">
- <el-table-column type="selection" align="center" width="50" />
- <el-table-column label="排名" min-width="130px" align="center" prop="id" />
- <el-table-column label="牧场名称" min-width="130px" align="center" prop="id" />
- <el-table-column label="准确率" min-width="130px" align="center" prop="id" />
- </el-table>
- </div>
- <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom: 40px;">
- <el-button v-if="accuracy.dialogStatus == 'more'" class="cancelClose cancelClose" @click="accuracy.dialogFormVisible = false; ">关闭</el-button>
- <el-button v-else class="cancelClose1" @click="accuracy.dialogFormVisible = false;getList(); ">关闭</el-button>
- <el-button class="save" :disabled="isokDisable" v-if="accuracy.dialogStatus == 'more'" @click="createData()">确认</el-button>
- </div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { postJson } from '@/api/common'
- import { mapGetters } from 'vuex'
-
- import * as echarts from 'echarts';
- require('echarts/theme/macarons')
- import Cookies from 'js-cookie'
- export default {
- name: 'Dashboard',
- data() {
- return {
- accuracy: {
- value1: '',
- value2: '',
- inputDatetime: [],
- cattleTpyeList: [{
- value: 1,
- label: '泌乳牛'
- }],
- formulaList: [{
- value: 1,
- label: '配方1'
- }],
- activeName: 'first',
- chart1: {
- isChart: true,
- listLoading: false,
- chartLine: null,
- lineData1: {
- month: ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07'],
- title: ['牧场1', '牧场2', '牧场3', '牧场4', '牧场5','牧场6', '牧场7'],
- dataArr: [
- [111, 132, 101, 134, 90, 230, 111],
- [222, 132, 101, 134, 90, 230, 222],
- [333, 132, 101, 134, 90, 230, 333],
- [444, 222, 101, 134, 90, 230, 444],
- [555, 132, 101, 134, 90, 230, 555],
- [111, 132, 101, 134, 90, 230, 111],
- [222, 132, 101, 134, 90, 230, 222],
- ]
- },
- tableTitleList1: [
- {name:"title",value:"牧场"},
- {name:"date1",value:"12/01"},
- {name:"date2",value:"12/02"},
- {name:"date3",value:"12/03"},
- {name:"date4",value:"12/04"},
- {name:"date5",value:"12/05"},
- {name:"date6",value:"12/06"},
- ],
- tableDataList1: [
- {"title":"牧场1","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"1"},
- {"title":"牧场2","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- ],
- },
- dialogStatus: '',
- dialogFormVisible: false,
- more:{
- checkedPasture:[],
- pastureList:[{id:1,name:'牧场1'},{id:2,name:'牧场2'}],
- },
- seeRanking:{
- activeName:'first',
- tableKey:0,
- listLoading:false,
- list:[]
- },
- },
- time: {
- value1: '',
- value2: '',
- inputDatetime: [],
- cattleTpyeList: [{
- value: 1,
- label: '泌乳牛'
- }],
- formulaList: [{
- value: 1,
- label: '配方1'
- }],
- chart1: {
- isChart: true,
- listLoading: false,
- chartLine: null,
- lineData1: {
- title:['牧场1', '牧场2', '牧场3', '牧场4', '牧场5'],
- arr1: [[98,156,3,123.6,146.03],[36,34,1,11,109],[160,109.3,6.6,184.1,79],[139,179.3,125.7,153.27,44],[19,82.4,55.5,132,35],[123.0,164,163,97,92],[37,37,1,110,58]],
- arr2: [[28,156,3,123.6,146.03],[36,34,1,11,109],[160,109.3,6.6,184.1,79],[139,179.3,125.7,153.27,44],[19,82.4,55.5,132,35],[123.0,164,163,97,92],[37,37,1,110,58]],
- arr3: [[28,156,3,123.6,146.03],[36,34,1,11,109],[160,109.3,6.6,184.1,79],[139,179.3,125.7,153.27,44],[19,82.4,55.5,132,35],[123.0,164,163,97,92],[37,37,1,110,58]],
- },
- tableDataList1: [
- {"title":"牧场1","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"1"},
- {"title":"牧场2","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- ],
- },
- },
- abnormal: {
- value1: '',
- value2: '',
- inputDatetime: [],
- cattleTpyeList: [{
- value: 1,
- label: '泌乳牛'
- }],
- formulaList: [{
- value: 1,
- label: '配方1'
- }],
- chart1: {
- isChart: true,
- listLoading: false,
- chartLine: null,
- lineData1: {
- title:['牧场1', '牧场2', '牧场3', '牧场4', '牧场5'],
- arr1: [120, 132, 101, 134, 90, 230, 210],
- arr2: [220, 132, 101, 134, 90, 230, 210],
- arr3: [220, 132, 101, 134, 90, 230, 210]
- },
- tableDataList1: [
- {"title":"牧场1","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"1"},
- {"title":"牧场2","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- {"title":"牧场3","date1":201,"date2":0,"date3":"12","date4":"12","date5":"12","date6":"12"},
- ],
- },
- },
- textMap: {
- seeRanking: '查看排名',
- more:'更多'
- },
- isokDisable:false,
- rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
- cellStyle: { padding: 0 + 'px' },
- }
- },
- created() {
- },
- mounted() {
- if(this.accuracy.chart1.isChart){
- this.roadChartLine1(this.accuracy.chart1.lineData1)
- }
- if(this.time.chart1.isChart){
- this.roadChartLine2(this.time.chart1.lineData1)
- }
- if(this.abnormal.chart1.isChart){
- this.roadChartLine3(this.abnormal.chart1.lineData1)
- }
- },
- methods: {
- handleTabClick(tab, event) {
- console.log(tab, event);
- this.accuracy.chart1.isChart = true
- this.roadChartLine1(this.accuracy.chart1.lineData1)
- },
- handleChart(item){
- if(item == 'accuracy'){
- this.accuracy.chart1.isChart = !this.accuracy.chart1.isChart
- this.$nextTick(() => {
- if(this.accuracy.chart1.isChart){
- this.roadChartLine1(this.accuracy.chart1.lineData1)
- }
- });
- }else if(item == 'time'){
- this.time.chart1.isChart = !this.time.chart1.isChart
- this.$nextTick(() => {
- if(this.time.chart1.isChart){
- this.roadChartLine2(this.time.chart1.lineData1)
- }
- });
- }else{
- this.abnormal.chart1.isChart = !this.abnormal.chart1.isChart
- this.$nextTick(() => {
- if(this.abnormal.chart1.isChart){
- this.roadChartLine3(this.abnormal.chart1.lineData1)
- }
- });
- }
- },
- handleExport(){},
- handleSeeRanking(){
- this.accuracy.dialogStatus = 'seeRanking'
- this.accuracy.dialogFormVisible = true
- this.getSeeRankingList()
- },
- getSeeRankingList(){
- let page = 1
- let page_size = 100
- let url = 'api/v1/ops/pasture/list' + '?page=' + page + '&page_size=' + page_size
- let data = {}
- postJson(url, data).then(response => {
- if (response.code == 200) {
-
- } else {
-
- }
- })
- },
- handleSeeTabClick(tab, event){
- console.log(tab, event);
- },
- handleSearch(){},
- handleMore(){
- this.accuracy.dialogStatus = 'more'
- this.getPastureList()
- },
- getPastureList(){
- let page = 1
- let page_size = 100
- let url = 'api/v1/ops/pasture/list' + '?page=' + page + '&page_size=' + page_size
- let data = {}
- postJson(url, data).then(response => {
- if (response.code == 200) {
-
- } else {
-
- }
- this.accuracy.dialogFormVisible = true
- })
- },
- roadChartLine1(chartLine_data) {
- if (this.accuracy.chart1.chartLine != null) {
- this.accuracy.chart1.chartLine.dispose()
- }
- this.accuracy.chart1.chartLine = echarts.init(document.getElementById('chartLine1'))
- var option = {
- animation: false,
- tooltip: { trigger: 'axis' },
- legend: { data: chartLine_data.title, left: 14, bottom: 0, },
- grid: { left: '3%',right: '14%',top: '3%',containLabel: true},
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: chartLine_data.month,
- axisLabel: { showMinLabel:true, showMaxLabel:true, },
- axisLine: { lineStyle: { color: '#666' } },
- }
- ],
- yAxis: [ { type: 'value', axisLine: {lineStyle: {color: '#666'}}, } ],
- color:['#4b07fa', '#0f96fc', '#ff42a9', '#ff724c', '#05fbf0', '#ffae00', '#b705fa', '#9a60b4', '#3cff00'],
- series: function (e) {
- var serie = [];
- for (var i = 0; i < chartLine_data.title.length; i++) {
- var item = {
- name: chartLine_data.title[i],
- data: chartLine_data.dataArr[i],
- type: 'line',
- smooth:true,
- itemStyle: { borderColor: '#fff', borderWidth: 2 },
- label: {
-
- },
- }
- serie.push(item);
- }
- console.log(serie)
- return serie;
- }()
- };
- this.accuracy.chart1.chartLine.setOption(option)
- if (this.accuracy.chart1.chartLine !== null) {
- window.onresize = function() {
- this.accuracy.chart1.chartLine.resize()
- }
- }
- },
- roadChartLine2(chartLine_data) {
- if (this.time.chart1.chartLine != null) {
- this.time.chart1.chartLine.dispose()
- }
- this.time.chart1.chartLine = echarts.init(document.getElementById('chartLine2'))
- var option = {
- dataset: [
- { source: chartLine_data.arr1 },
- { source: chartLine_data.arr2},
- { source: chartLine_data.arr3 },
- {
- fromDatasetIndex: 0,
- transform: { type: 'boxplot' }
- },
- {
- fromDatasetIndex: 1,
- transform: { type: 'boxplot' }
- },
- {
- fromDatasetIndex: 2,
- transform: { type: 'boxplot' }
- }
- ],
- legend: { top: '10%' },
- tooltip: {
- trigger: 'item',
- axisPointer: { type: 'shadow' }
- },
- grid: {left: '10%', top: '20%', right: '10%', bottom: '15%' },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- nameGap: 30,
- splitArea: { show: false },
- splitLine: { show: false }
- },
- yAxis: { type: 'value', name: '分钟', min: 0, max: 600, splitArea: { show: false } },
- series: [
- { name: '加料时间', type: 'boxplot', datasetIndex: 3 },
- { name: '搅拌延时', type: 'boxplot', datasetIndex: 4 },
- { name: '撒料时间', type: 'boxplot', datasetIndex: 5 }
- ]
- };
- this.time.chart1.chartLine.setOption(option)
- if (this.time.chart1.chartLine !== null) {
- window.onresize = function() {
- this.time.chart1.chartLine.resize()
- }
- }
- },
- roadChartLine3(chartLine_data) {
- if (this.abnormal.chart1.chartLine != null) {
- this.abnormal.chart1.chartLine.dispose()
- }
- this.abnormal.chart1.chartLine = echarts.init(document.getElementById('chartLine3'))
- var option = {
- animation: false,
- tooltip: { trigger: 'axis' },
- legend: { data: ['第一班','第二班','第三班'], right: 14, top: 0, },
- grid: {top: '20%',left: '3%',right: '14%',bottom: '13%',containLabel: true},
- xAxis: [
- { type: 'category', data: chartLine_data.title, }
- ],
- yAxis: [
- {
- type: 'value',
- axisLine: {lineStyle: {color: '#666'}},
- }
- ],
- series: [
- { name: '第一班', type: 'bar', data:chartLine_data.arr1 },
- { name: '第二班', type: 'bar', data:chartLine_data.arr2 },
- { name: '第三班', type: 'bar', data:chartLine_data.arr3 },
- ]
- };
- this.abnormal.chart1.chartLine.setOption(option)
- if (this.abnormal.chart1.chartLine !== null) {
- window.onresize = function() {
- this.abnormal.chart1.chartLine.resize()
- }
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .container {
- margin: 10px 10px;
- }
- .accuracy,
- .time, .abnormal {
- background: #fff;
- height: 550px;
- border-radius: 5px;
- border: 2px solid #ededed;
- }
- .accuracy_t {
- margin-left: 10px;
- position: relative;
- .accuracy_t_l {
- h3 {
- line-height: 15px;
- }
- .title {
- width: 3px;
- height: 15px;
- background: red;
- display: inline-block;
- margin-right: 10px;
- }
- }
- .accuracy_t_r {
- position: absolute;
- top: 0;
- right: 0;
- .button {
- display: inline-block;
- margin-right: 10px;
- }
- }
- }
- .accuracy_b {
- margin: 0 10px;
- /deep/ .el-tabs__item {
- font-size: 12px
- }
- position: relative;
- }
- .more{
- position: absolute;
- bottom: -14px;right: -8px;color: blue;font-size: 12px;
- }
- .maxdiv,
- .mediandiv,
- .mindiv {
- text-align: center;
- .title-t {
- font-size: 12px;
- }
- .title-c {
- font-size: 14px;
- font-weight: bold;
- }
- .title-b {
- font-size: 14px;
- color: red;
- font-weight: bold;
- }
- }
- .maxdiv, .mediandiv {
- border-right: 2px solid #eee;
- }
- .mediandiv {
- .title-b {
- color: blue;
- }
- }
- .accuracy-content{
- /deep/ .el-checkbox{margin: 5px 5px;}
- /deep/ .is-bordered{margin-left: 5px;}
- }
- .time{
- .time_t {
- margin-left: 10px;
- position: relative;
- .time_t_l {
- h3 {
- line-height: 15px;
- }
- .title {
- width: 3px;
- height: 15px;
- background: red;
- display: inline-block;
- margin-right: 10px;
- }
- }
- .time_t_r {
- position: absolute;
- top: 0;
- right: 0;
- .button {
- display: inline-block;
- margin-right: 10px;
- }
- }
- }
- }
- .abnormal {
- background: #fff;
- margin-top: 10px;
- .abnormal_t {
- margin-left: 10px;
- position: relative;
- .abnormal_t_l {
- h3 {
- line-height: 15px;
- }
- .title {
- width: 3px;
- height: 15px;
- background: red;
- display: inline-block;
- margin-right: 10px;
- }
- }
- .abnormal_t_r {
- position: absolute;
- top: 0;
- right: 0;
- .button {
- display: inline-block;
- margin-right: 10px;
- }
- }
- }
- }
- .container{background: #fff;}
- </style>
|