123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383 |
- <template>
- <div ref="dashboardEditor" class="dashboard-editor-container">
- <div class="dashboard" style="margin-bottom: 10px;">
- <div class="dashboard-l">
- <div class="row1">
- <div class="row1-t">
- <div class="row1-t-l">
- <div class="img-l">统计范围:</div>
- <el-date-picker v-model="inputDatetime" :clearable="false" class="inputDatetime filter-item content" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeDate" />
- </div>
- </div>
- <div class="row1-c">
- <div class="row1-c-l">
- <div class="title1">
- <div class="img-title">
- <img src="../../../assets/images/index/l1.png">
- </div>
- <span class="content">混料准确率</span>
- </div>
- <div class="row1-c-l-c">
- <span>
- <b>{{ row1.list[0].rateAvg }}</b>
- <br>昨日
- </span>
- </div>
- <div class="row1-c-l-b">
- <div><span>混料最高准确率:</span><b>{{ row1.list[0].rateMAX }}</b></div>
- <div><span>混料最低准确率:</span><b>{{ row1.list[0].rateMIN }}</b></div>
- </div>
- </div>
- <div class="row1-c-r">
- <div class="title1">
- <div class="img-title">
- <img src="../../../assets/images/index/l4.png">
- </div>
- <span class="content">撒料准确率</span>
- </div>
- <div class="row1-c-l-c">
- <span>
- <b>{{ row1.list[1].rateAvg }}</b>
- <br>昨日
- </span>
- </div>
- <div class="row1-c-l-b">
- <div><span>撒料最高准确率:</span><b>{{ row1.list[1].rateMAX }}</b></div>
- <div><span>撒料最低准确率:</span><b>{{ row1.list[1].rateMIN }}</b></div>
- </div>
- </div>
- </div>
- <div class="row1-b">
- <div class="row1-b-l">
- <div class="title1">
- <div class="img-title">
- <img src="../../../assets/images/index/l3.png">
- </div>
- <span class="content">撒料正确率</span>
- </div>
- <div class="row1-c-l-c">
- <span>
- <b>{{ row1.list[2].rateAvg }}</b>
- <br>昨日
- </span>
- </div>
- <div class="row1-c-l-b">
- <div><span>撒料最高正确率:</span><b>{{ row1.list[2].rateMAX }}</b></div>
- <div><span>撒料最低正确率:</span><b>{{ row1.list[2].rateMIN }}</b></div>
- </div>
- </div>
- <div class="row1-b-r">
- <div class="title1">
- <div class="img-title">
- <img src="../../../assets/images/index/l2.png">
- </div>
- <span class="content">撒料偏差</span>
- </div>
- <div class="row1-c-l-c">
- <span>
- <b>{{ row1.list[3].rateAvg }}</b>
- <br>昨日
- </span>
- </div>
- <div class="row1-c-l-b">
- <div><span>撒料最高偏差:</span><b>{{ row1.list[3].rateMAX }}</b></div>
- <div><span>撒料最低偏差:</span><b>{{ row1.list[3].rateMIN }}</b>分钟</div>
- </div>
- </div>
- </div>
- </div>
- <div class="row2">
- <div class="title">
- <div class="img-title" />
- <span class="content">今日计划统计</span>
- </div>
- <div class="todayPlan">
- <div>
- <div id="row2chartLine1" style="height: 185px;" />
- <div class="bottom">
- <div class="bottom-l">
- <div class="bottom-l-t">
- <b>{{ row2.chart1.chartLine_data.data1 }}</b>次
- </div>
- <div class="bottom-l-b">
- 完成车次
- </div>
- </div>
- <div class="bottom-r">
- <div class="bottom-r-t">
- <b>{{ row2.chart1.chartLine_data.data2 }}</b>次
- </div>
- <div class="bottom-r-b">
- 计划车次
- </div>
- </div>
- </div>
- </div>
- <div>
- <div id="row2chartLine2" style="height: 185px;" />
- <div class="bottom">
- <div class="bottom-l">
- <div class="bottom-l-t">
- <b>{{ row2.chart2.chartLine_data.data1 }}</b>kg
- </div>
- <div class="bottom-l-b">
- 完成重量
- </div>
- </div>
- <div class="bottom-r">
- <div class="bottom-r-t">
- <b>{{ row2.chart2.chartLine_data.data2 }}</b>kg
- </div>
- <div class="bottom-r-b">
- 计划重量
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row3" style="position: relative;">
- <div class="title">
- <div class="img-title" />
- <span class="content">成本统计</span>
- </div>
- <div v-if="row4.chart1.isChart" class="button">
- <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
- <div class="exportTable" @click="handleTable('row4chartLine1')">切换表格</div>
- </div>
- <div v-if="row4.chart1.isChart" id="row4chartLine1" v-loading="row4.chart1.listLoading" style="background: #fff;height:310px;" />
- <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width: 100%;">
- <div class="button">
- <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
- <div class="exportTable" @click="handleChart('row4chartLine1')">切换图表</div>
- </div>
- <el-table
- :key="row4.chart1.table.tableKey"
- v-loading="row4.chart1.table.listLoading"
- element-loading-text="给我一点时间"
- :data="row4.chart1.table.list"
- border
- fit
- highlight-current-row
- style="width: 100%;margin-top: 10px;"
- height="300"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
- <el-table-column label="牧场" sortable min-width="110px" align="center" prop="名称" />
- <el-table-column label="公斤奶饲料成本(元)" sortable min-width="120px" align="center" prop="准确率" />
- </el-table>
- </div>
- </div>
- </div>
- <div class="dashboard-r">
- <div class="row1">
- <div class="row1Title">当前车辆数:{{ row2.carLength }}</div>
- <div id="car" ref="car" v-loading="row2.listLoading" class="car">
- <div id="carList" ref="carList" class="carList">
- <div v-for="(item,index) in row2.list" ref="listW" :key="index" class="listW">
- <div ref="list" class="list" :style="{'background': item.background,'color':item.color,'borderColor':item.borderColor}" @click="handleList(index,item)">
- <div class="list-t">
- <div class="list-t-t">
- <el-tooltip :content="item.tname" placement="top">
- <span>车辆:{{ item.tname }}</span>
- </el-tooltip>
- </div>
- <div class="list-t-t">
- <el-tooltip :content="item.fname" placement="top">
- <span v-if="item.inorout == 0">饲料:{{ item.fname }}</span>
- <span v-if="item.inorout == 1">栏舍:{{ item.fname }}</span>
- </el-tooltip>
- </div>
- <div class="list-t-t">
- <el-tooltip :content="item.remark" placement="top">
- <span>描述:{{ item.remark }}</span>
- </el-tooltip>
- </div>
- </div>
- <div class="list-b">
- <div class="list-b-l">
- <div class="left">
- <div class="num"><b>{{ item.doneweight }}</b>Kg</div>
- <div class="weight">完成重量</div>
- </div>
- <div class="right" />
- </div>
- <div class="list-b-l">
- <div class="left">
- <div class="num"><b>{{ item.leftweight }}</b>Kg</div>
- <div class="weight">剩余重量</div>
- </div>
- <div class="right" />
- </div>
- <div class="list-b-l">
- <div class="left">
- <div class="num"><b>{{ item.nowweight }}</b>Kg</div>
- <div class="weight">车辆当前载重</div>
- </div>
- <div class="right" />
- </div>
- <div class="list-b-l">
- <div class="left">
- <div class="num"><b>{{ item.lweight }}</b>Kg</div>
- <div class="weight">计划重量</div>
- </div>
- <div class="right" />
- </div>
- <div class="list-b-l">
- <div class="left">
- <div class="num"><b>{{ item.donerate }}</b></div>
- <div class="weight">完成度</div>
- </div>
- </div>
- </div>
- </div>
- <!-- <div v-if="item.isChecked" ref="checked" class="img-checked" /> -->
- </div>
- </div>
- </div>
- </div>
- <div class="row2">
- <div class="row2-l" style="position: relative;">
- <div class="title">
- <div class="img-title" />
- <span class="content">计划统计</span>
- </div>
- <div v-if="row3.chart1.isChart" class="button">
- <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
- <div class="exportTable" @click="handleTable('row3chartLine1')">切换表格</div>
- </div>
- <div v-if="row3.chart1.isChart" id="row3chartLine1" v-loading="row3.chart1.listLoading" style="background: #fff;height:310px;" />
- <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width: 100%;">
- <div class="button">
- <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
- <div class="exportTable" @click="handleChart('row3chartLine1')">切换图表</div>
- </div>
- <el-table
- :key="row3.chart1.table.tableKey"
- v-loading="row3.chart1.table.listLoading"
- element-loading-text="给我一点时间"
- :data="row3.chart1.table.list"
- border
- fit
- highlight-current-row
- style="width: 100%;margin-top: 10px;"
- height="300"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="牧场" sortable min-width="85px" align="center" prop="牧场" />
- <el-table-column label="计划执行重量(kg)" sortable min-width="90px" align="center" prop="实际量" />
- <el-table-column label="配方理论重量(kg)" sortable min-width="90px" align="center" prop="理论量" />
- <el-table-column label="计划准确率" sortable min-width="85px" align="center" prop="field1" />
- <el-table-column label="计划取消重量(kg)" sortable min-width="90px" align="center" prop="计划取消重量" />
- <el-table-column label="计划准确率(去除取消重量)" sortable min-width="100px" align="center" prop="field3" />
- <el-table-column label="计划正确数" sortable min-width="85px" align="center" prop="正确数" />
- <el-table-column label="计划数" sortable min-width="85px" align="center" prop="计划数" />
- <el-table-column label="计划正确率" sortable min-width="75px" align="center" prop="field2" />
- </el-table>
- </div>
- </div>
- <div class="row2-r" style="position: relative;">
- <div class="title">
- <div class="img-title" />
- <span class="content">泌乳牛干物质采食量</span>
- </div>
- <div v-if="row3.chart2.isChart" class="button">
- <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
- <div class="exportTable" @click="handleTable('row3chartLine2')">切换表格</div>
- </div>
- <div v-if="row3.chart2.isChart" id="row3chartLine2" v-loading="row3.chart2.listLoading" style="background: #fff;height:310px;" />
- <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width: 100%;">
- <div class="button">
- <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
- <div class="exportTable" @click="handleChart('row3chartLine2')">切换图表</div>
- </div>
- <el-table
- :key="row3.chart2.table.tableKey"
- v-loading="row3.chart2.table.listLoading"
- element-loading-text="给我一点时间"
- :data="row3.chart2.table.list"
- border
- fit
- highlight-current-row
- style="width: 100%;margin-top: 10px;"
- height="300"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="牧场" sortable min-width="110px" align="center" prop="名称" />
- <el-table-column label="泌乳牛干物质采食量(kg)" sortable min-width="110px" align="center" prop="准确率" />
- </el-table>
- </div>
- </div>
- </div>
- <div class="row3">
- <div class="row3-l" style="position: relative;">
- <div class="title">
- <div class="img-title" />
- <span class="content">混料实际重量统计</span>
- </div>
- <div v-if="row4.chart2.isChart" class="button">
- <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
- <div class="exportTable" @click="handleTable('row4chartLine2')">切换表格</div>
- </div>
- <div v-if="row4.chart2.isChart" id="row4chartLine2" v-loading="row4.chart2.listLoading" style="background: #fff;height:310px;" />
- <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:100%;">
- <div class="button">
- <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
- <div class="exportTable" @click="handleChart('row4chartLine2')">切换图表</div>
- </div>
- <el-table
- :key="row4.chart2.table.tableKey"
- v-loading="row4.chart2.table.listLoading"
- element-loading-text="给我一点时间"
- :data="row4.chart2.table.list"
- border
- fit
- highlight-current-row
- style="width: 100%;margin-top: 10px;"
- height="300"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
- <el-table-column label="牧场" sortable min-width="110px" align="center" prop="名称" />
- <el-table-column label="混料重量" sortable min-width="110px" align="center" prop="准确率" />
- </el-table>
- </div>
- </div>
- <div class="row3-r">
- <div class="title">
- <div class="img-title" />
- <span class="content">库存预警</span>
- <!-- <a style="float: right;color: #009C69;font-size: 12px;margin-right: 10px;" @click="handleMore">查看更多 >></a> -->
- </div>
- <div id="table" style="height: 330px;background: #fff;">
- <el-table
- :key="row4.table.tableKey"
- v-loading="row4.table.listLoading"
- element-loading-text="给我一点时间"
- :data="row4.table.list"
- border
- fit
- highlight-current-row
- style="width: 98%;background: #fff;margin-top: 10px;"
- height="320"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="序号" type="index" min-width="80px" align="center" />
- <el-table-column label="饲料名称" min-width="80px" align="center" prop="feedname" />
- <el-table-column label="库存量(kg)" min-width="70px" align="center" prop="stockweight" />
- <el-table-column label="剩余使用天数" min-width="80px" align="center" prop="ldays" />
- </el-table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { GetDataByName, GetReportform } from '@/api/common'
- import Cookies from 'js-cookie'
- import { parseTime } from '@/utils/index.js'
- import { json2excel } from '@/utils/index.js'
- import echarts from 'echarts'
- require('echarts/theme/macarons')
- export default {
- name: 'GroupDashboard',
- data() {
- return {
- ranchSelectionList: [{ id: 0, name: '集团' }, { id: 1, name: '牧场01' }, { id: 2, name: '牧场02' }],
- ranchSelection: 0,
- // inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
- inputDatetime: ['2021-07-01', '2021-07-07'],
- myDate: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}') + '-' + parseTime(new Date(), '{y}-{m}-{d}'),
- pickerOptions: {
- shortcuts: [{
- text: '最近一周',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
- picker.$emit('pick', [start, end])
- }
- }, {
- text: '最近一个月',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
- picker.$emit('pick', [start, end])
- }
- }, {
- text: '最近一年',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
- picker.$emit('pick', [start, end])
- }
- }]
- },
- date: parseTime(new Date(), '{y}-{m}-{d}'),
- row1: {
- getdataListParm: {
- name: 'getHomepageStrJT',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid')
- }
- },
- listLoading: false,
- list: [
- { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
- { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
- { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' },
- { 'rateAvg': '', 'rateMAX': '', 'rateMIN': '' }
- ],
- getdataListParm2: {
- name: 'getHomepageStrJTPlan',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid')
- }
- },
- list2: ''
- },
- row2: {
- chart1: {
- chartLine: null,
- chartLine_data: {}
- },
- chart2: {
- chartLine: null,
- chartLine_data: {}
- },
- list: [],
- total: 0,
- listLoading: false,
- getdataListParmList: {
- name: 'getHomepageLBListJT',
- page: 1,
- offset: 1,
- pagecount: '',
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid')
- }
- }
- },
- row3: {
- chartDate: [],
- chart1: {
- chartLine: null,
- chartLine_data: {},
- getdataListParm: {
- name: 'getJT1AccuracyAllJH',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid'),
- // startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
- // stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
- // inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
- startTime: '2021-07-01',
- stopTime: '2021-07-07',
- inputDatetime: ['2021-07-01', '2021-07-07']
- }
- },
- list: [],
- total: 0,
- listLoading: false,
- isChart: true,
- isTable: false,
- table: {
- tableKey: 1,
- list: [],
- total: 0,
- listLoading: false
- }
- },
- chart2: {
- chartLine: null,
- chartLine_data: {},
- getdataListParm: {
- name: 'getFeedEffMRJT',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid'),
- // startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
- // stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
- // inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
- startTime: '2021-07-01',
- stopTime: '2021-07-07',
- inputDatetime: ['2021-07-01', '2021-07-07']
- }
- },
- list: [],
- total: 0,
- listLoading: false,
- isChart: true,
- isTable: false,
- table: {
- tableKey: 1,
- list: [],
- total: 0,
- listLoading: false
- }
- }
- },
- row4: {
- chartDate: [],
- chart1: {
- chartLine: null,
- chartLine_data: {},
- getdataListParm: {
- name: 'getFeedEffCBAllJT',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid'),
- // startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
- // stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
- // inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
- startTime: '2021-07-01',
- stopTime: '2021-07-07',
- inputDatetime: ['2021-07-01', '2021-07-07']
- }
- },
- list: [],
- total: 0,
- listLoading: false,
- isChart: true,
- isTable: false,
- table: {
- tableKey: 1,
- list: [],
- total: 0,
- listLoading: false
- }
- },
- chart2: {
- chartLine: null,
- chartLine_data: {},
- getdataListParm: {
- name: 'getAccuracActHLJT',
- page: 1,
- offset: 1,
- pagecount: 10,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid'),
- // startTime: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}'),
- // stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
- // inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()]
- startTime: '2021-07-01',
- stopTime: '2021-07-07',
- inputDatetime: ['2021-07-01', '2021-07-07']
- }
- },
- list: [],
- total: 0,
- listLoading: false,
- isChart: true,
- isTable: false,
- table: {
- tableKey: 1,
- list: [],
- total: 0,
- listLoading: false
- }
- },
- table: {
- getdataListParm: {
- name: 'getFsWarnListJT',
- page: 1,
- offset: 1,
- pagecount: 5,
- returntype: 'Map',
- parammaps: {
- pastureid: Cookies.get('pastureid')
- }
- },
- tableKey: 1,
- list: [],
- total: 0,
- listLoading: false,
- temp: {}
- }
- },
- rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
- cellStyle: { padding: 0 + 'px' }
- }
- },
- created() {
- this.getRow1List()
- this.getRow2List()
- this.getRow2List1()
- this.getRow3List1()
- this.getRow3List2()
- this.getRow4List1()
- this.getRow4List2()
- this.getRow4List3()
- },
- methods: {
- changeDate(item) {
- this.myDate = parseTime(this.inputDatetime[0], '{y}-{m}-{d}') + '-' + parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
- this.getRow1List()
- },
- getRow1List() {
- this.row1.listLoading = true
- this.row1.getdataListParm.parammaps.startTime = parseTime(this.inputDatetime[0], '{y}-{m}-{d}')
- this.row1.getdataListParm.parammaps.stopTime = parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
- GetDataByName(this.row1.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- console.log('row1数据', response.data.list)
- for (let i = 0; i < response.data.list.length; i++) {
- if (response.data.list[i].rateAvg == undefined) {
- this.$set(response.data.list[i], 'rateAvg', '')
- }
- if (response.data.list[i].rateMAX == undefined) {
- this.$set(response.data.list[i], 'rateMAX', '')
- }
- if (response.data.list[i].rateMIN == undefined) {
- this.$set(response.data.list[i], 'rateMIN', '')
- }
- }
- this.row1.list = response.data.list
- console.log(this.row1.list, 'this.row1.list')
- } else {
- this.row1.list.data1.monRateHL = ''
- this.row1.list.data1.monRateSL = ''
- this.row1.list.data1.monRateSLR = ''
- this.row1.list.data1.yesRateHL = ''
- this.row1.list.data1.yesRateSL = ''
- this.row1.list.data1.yesRateSLR = ''
- this.row1.list.data1.temtime = ''
- this.row1.list.data1.montime = ''
- }
- setTimeout(() => {
- this.row1.listLoading = false
- }, 100)
- })
- },
- getRow2List() {
- this.row1.listLoading = true
- this.row1.getdataListParm.parammaps.startTime = parseTime(this.inputDatetime[0], '{y}-{m}-{d}')
- this.row1.getdataListParm.parammaps.stopTime = parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
- GetDataByName(this.row1.getdataListParm2).then(response => {
- if (response.data !== null && response.data.list !== null) {
- this.row2.chart1.chartLine_data.data1 = parseFloat(response.data.list[0].doneTimes)
- this.row2.chart1.chartLine_data.data2 = parseFloat(response.data.list[0].planTimes)
- this.row2.chart2.chartLine_data.data1 = parseFloat(response.data.list[0].doneWeight)
- this.row2.chart2.chartLine_data.data2 = parseFloat(response.data.list[0].planWeight)
- this.roadRow1ChartLine1(this.row2.chart1.chartLine_data)
- this.roadRow1ChartLine2(this.row2.chart2.chartLine_data)
- } else {
- this.row2.chart1.chartLine_data.data1 = ''
- this.row2.chart1.chartLine_data.data2 = ''
- this.row2.chart2.chartLine_data.data1 = ''
- this.row2.chart2.chartLine_data.data2 = ''
- }
- setTimeout(() => {
- this.row1.listLoading = false
- }, 100)
- })
- },
- // 今日计划统计-完成车次
- roadRow1ChartLine1(chartLine_data) {
- console.log(chartLine_data, '======')
- if (this.row2.chart1.chartLine != null) {
- this.row2.chart1.chartLine.dispose()
- }
- this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
- if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
- chartLine_data.data1 = 0
- chartLine_data.data2 = 100
- }
- var option = {
- // 标题组件,包含主标题和副标题
- title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
- // 提示框组件
- tooltip: {
- show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- // 系列列表。每个系列通过 type 决定自己的图表类型
- series: [{
- name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, labelLine: { normal: { show: false }},
- data: [
- { value: chartLine_data.data1, name: '完成率', selected: false, label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}},
- { value: chartLine_data.data2 - chartLine_data.data1, label: { normal: { show: false }}}
- ]
- }],
- color: ['#409EFF', '#B7DBFF']
- }
- this.row2.chart1.chartLine.setOption(option)
- window.onresize = function() {
- this.row2.chart1.chartLine.resize()
- }
- },
- // 今日计划统计-完成重量
- roadRow1ChartLine2(chartLine_data) {
- if (this.row2.chart2.chartLine != null) {
- this.row2.chart2.chartLine.dispose()
- }
- this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
- var option = {
- // 标题组件,包含主标题和副标题
- title: {
- show: true,
- x: 'center',
- textStyle: {
- fontSize: '15',
- color: 'green',
- fontWeight: 'bold'
- }
- },
- // 提示框组件
- tooltip: {
- // 是否显示提示框组件,包括提示框浮层和 axisPointe
- show: false,
- // 触发类型: item:数据项触发,axis:坐标轴触发
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- // 系列列表。每个系列通过 type 决定自己的图表类型
- series: [{
- // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
- name: '任务进度',
- type: 'pie',
- // 饼图的半径,数组的第一项是内半径,第二项是外半径
- radius: ['80%', '70%'],
- // 是否启用防止标签重叠策略,默认开启
- avoidLabelOverlap: false,
- hoverAnimation: false,
- // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线
- labelLine: {
- normal: {
- show: false
- }
- },
- data: [{
- value: chartLine_data.data1, // 数据值
- name: '完成率', // 数据项名称
- selected: false, // 该数据项是否被选中
- // 单个扇区的标签配置
- label: {
- normal: {
- show: true, // 是显示标签
- position: 'center',
- fontSize: 20,
- // 标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行
- formatter: '{b}\n{d}%'
- }
- }
- }, {
- value: chartLine_data.data2 - chartLine_data.data1,
- label: {
- normal: {
- show: false
- }
- }
- }]
- }],
- color: ['#409EFF', '#B7DBFF']
- }
- this.row2.chart2.chartLine.setOption(option)
- window.onresize = function() {
- this.row2.chart2.chartLine.resize()
- }
- },
- // 今日执行计划监控
- getRow2List1() {
- this.row2.listLoading2 = true
- GetDataByName(this.row2.getdataListParmList).then(response => {
- if (response.data !== null && response.data.list !== null) {
- for (let i = 0; i < response.data.list.length; i++) {
- this.$set(response.data.list[i], 'background', '#f3f9f7')
- this.$set(response.data.list[i], 'borderColor', '#009d6a')
- }
- this.row2.list = response.data.list
- this.row2.carLength = response.data.total
- } else {
- this.carLength = 0
- }
- setTimeout(() => {
- this.row2.listLoading2 = false
- }, 100)
- })
- },
- handleTable(item) {
- console.log(item)
- if (item == 'row3chartLine1') {
- console.log('计划统计表格')
- this.row3.chart1.isTable = true
- this.row3.chart1.isChart = false
- } else if (item == 'row3chartLine2') {
- console.log('泌乳牛采食量表格')
- this.row3.chart2.isTable = true
- this.row3.chart2.isChart = false
- } else if (item == 'row4chartLine1') {
- console.log('成本统计表格')
- this.row4.chart1.isTable = true
- this.row4.chart1.isChart = false
- } else if (item == 'row4chartLine2') {
- console.log('混料实际重量统计表格')
- this.row4.chart2.isTable = true
- this.row4.chart2.isChart = false
- }
- },
- handleChart(item) {
- console.log(item)
- // 显示切换图表
- if (item == 'row3chartLine1') {
- console.log('计划统计图表')
- this.row3.chart1.isTable = false
- this.row3.chart1.isChart = true
- this.getRow3List1()
- } else if (item == 'row3chartLine2') {
- console.log('泌乳牛采食量图表')
- this.row3.chart2.isTable = false
- this.row3.chart2.isChart = true
- this.getRow3List2()
- } else if (item == 'row4chartLine1') {
- console.log('成本统计图表')
- this.row4.chart1.isTable = false
- this.row4.chart1.isChart = true
- this.getRow4List1()
- } else if (item == 'row4chartLine2') {
- console.log('混料实际重量统计图表')
- this.row4.chart2.isTable = false
- this.row4.chart2.isChart = true
- this.getRow4List2()
- }
- },
- handleExport(item) {
- console.log(item)
- // 显示切换图表
- if (item == 'row3chartLine1') {
- console.log('计划统计')
- var excelDatasTabChart1 = [
- {
- tHeader: ['日期', '计划执行重量(kg)', '配方理论重量(kg)', '计划准确率', '计划取消重量(kg)', '计划准确率(去除取消重量)', '计划正确数', '计划数', '计划正确率'],
- filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
- tableDatas: this.row3.chart1.table.list,
- sheetName: '计划统计'
- }
- ]
- json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
- }
- },
- // 计划统计
- getRow3List1() {
- this.row3.chart1.listLoading = true
- console.log(this.row3.chart1.getdataListParm.name, '计划统计接口')
- GetReportform(this.row3.chart1.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- this.row3.chart1.table.list = response.data.data
- this.row3.chart1.chartLine_data = response.data.list
- this.row3.chart1.total = response.data.total
- console.log('计划统计图数据', this.row3.chart1.chartLine_data)
- console.log('计划统计表数据', this.row3.chart1.table.list)
- } else {
- this.row3.chart1.table.list = []
- this.row3.chart1.chartLine_data = {}
- }
- this.roadRow3ChartLine1(this.row3.chart1.chartLine_data)
- setTimeout(() => {
- this.row3.chart1.listLoading = false
- }, 100)
- })
- },
- roadRow3ChartLine1(chartLine_data) {
- if (this.row3.chart1.chartLine != null) {
- this.row3.chart1.chartLine.dispose()
- }
- this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
- var option = {
- tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
- legend: { data: ['计划准确率', '计划正确率', '计划准确率(去除取消重量)'] },
- xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }}],
- yAxis: [{ type: 'value', name: '百分比', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value}' }}],
- series: [
- { name: '计划准确率', type: 'bar', itemStyle: { normal: { color: '#7ecf51' }}, data: chartLine_data.data2, markLine: { data: [{ type: 'average' }], symbol: ['none', 'none'], position: 'insideTopCenter', itemStyle: { normal: { lineStyle: { type: 'dotted', width: 3 }, label: { show: true, position: 'middle', formatter: '' }}}, large: true, effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }}},
- { name: '计划正确率', type: 'bar', itemStyle: { normal: { color: '#ff6600' }}, data: chartLine_data.data3, markLine: { data: [{ type: 'average' }], symbol: ['none', 'none'], position: 'insideTopCenter', itemStyle: { normal: { lineStyle: { type: 'dotted', width: 3 }, label: { show: true, position: 'middle', formatter: '' }}}, large: true, effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }}},
- { name: '计划准确率(去除取消重量)', type: 'bar', itemStyle: { normal: { color: '#61a5e8' }}, data: chartLine_data.data4, markLine: { data: [{ type: 'average' }], symbol: ['none', 'none'], position: 'insideTopCenter', itemStyle: { normal: { lineStyle: { type: 'dotted', width: 3 }, label: { show: true, position: 'middle', formatter: '' }}}, large: true, effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }}}
- ]
- }
- this.row3.chart1.chartLine.setOption(option)
- window.onresize = function() {
- this.row3.chart1.chartLine.resize()
- }
- },
- // 泌乳牛干物质采食量
- getRow3List2() {
- this.row3.chart2.listLoading = true
- GetReportform(this.row3.chart2.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- console.log('泌乳牛干物质采食量数据', response)
- for (let i = 0; i < response.data.data.length; i++) {
- if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
- response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
- }
- if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
- response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
- }
- }
- this.row3.chart2.table.list = response.data.data
- this.row3.chart2.chartLine_data = response.data.list
- this.row3.chart2.total = response.data.total
- if (this.row3.chart2.chartLine_data.data1.length == 0) {
- this.row3.chart2.chartLine_data.title = '暂无数据'
- } else {
- this.row3.chart2.chartLine_data.title = ''
- }
- this.roadRow3ChartLine2(this.row3.chart2.chartLine_data)
- } else {
- this.row3.chart2.list = []
- }
- setTimeout(() => {
- this.row3.chart2.listLoading = false
- }, 100)
- })
- },
- roadRow3ChartLine2(chartLine_data) {
- if (this.row3.chart2.chartLine != null) {
- this.row3.chart2.chartLine.dispose()
- }
- this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
- var option = {
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: chartLine_data.data1,
- right: 10
- },
- grid: {
- top: '20%',
- left: '3%',
- right: '8%',
- containLabel: true
- },
- toolbox: {
- show: true,
- right: '2%',
- feature: {}
- },
- xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
- yAxis: {
- type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
- },
- series: (function() {
- if (chartLine_data.data3 !== undefined) {
- var serie = []
- for (var i = 0; i < chartLine_data.data3.length; i++) {
- var item = {
- name: chartLine_data.data1[i],
- type: 'line',
- data: chartLine_data.data3[i].data
- }
- serie.push(item)
- }
- return serie
- }
- }())
- }
- this.row3.chart2.chartLine.setOption(option)
- window.onresize = function() {
- this.row3.chart2.chartLine.resize()
- }
- },
- // 成本统计
- getRow4List1() {
- this.row4.chart1.listLoading = true
- console.log(this.row4.chart1.getdataListParm.name)
- GetReportform(this.row4.chart1.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- console.log('成本统计数据', response.data.list)
- this.row4.chart1.table.list = response.data.data
- this.row4.chart1.chartLine_data = response.data.list
- this.row4.chart1.total = response.data.total
- } else {
- this.row4.chart1.list = []
- this.row4.chart1.chartLine_data = {}
- }
- this.roadRow4ChartLine1(this.row4.chart1.chartLine_data)
- setTimeout(() => {
- this.row4.chart1.listLoading = false
- }, 100)
- })
- },
- roadRow4ChartLine1(chartLine_data) {
- console.log(chartLine_data, '成本统计chartLine_data')
- if (this.row4.chart1.chartLine != null) {
- this.row4.chart1.chartLine.dispose()
- }
- this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
- var option = {
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: chartLine_data.data1,
- right: 10
- },
- grid: {
- top: '20%',
- left: '5%',
- right: '8%',
- containLabel: true
- },
- toolbox: {
- show: true,
- right: '2%',
- feature: {}
- },
- xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
- yAxis: {
- type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
- },
- series: (function() {
- if (chartLine_data.data3 !== undefined) {
- var serie = []
- for (var i = 0; i < chartLine_data.data3.length; i++) {
- var item = {
- name: chartLine_data.data1[i],
- type: 'line',
- data: chartLine_data.data3[i].data
- }
- serie.push(item)
- }
- return serie
- }
- }())
- }
- this.row4.chart1.chartLine.setOption(option)
- window.onresize = function() {
- this.row4.chart1.chartLine.resize()
- }
- },
- // 混料实际重量统计
- getRow4List2() {
- this.row4.chart2.listLoading = true
- GetReportform(this.row4.chart2.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- console.log('混料实际重量统计数据', response.data.list)
- this.row4.chart2.table.list = response.data.data
- this.row4.chart2.chartLine_data = response.data.list
- this.row4.chart2.total = response.data.total
- } else {
- this.row4.chart2.list = []
- this.row4.chart2.chartLine_data = {}
- }
- this.roadRow4ChartLine2(this.row4.chart2.chartLine_data)
- setTimeout(() => {
- this.row4.chart2.listLoading = false
- }, 100)
- })
- },
- roadRow4ChartLine2(chartLine_data) {
- if (this.row4.chart2.chartLine != null) {
- this.row4.chart2.chartLine.dispose()
- }
- this.row4.chart2.chartLine = echarts.init(document.getElementById('row4chartLine2'))
- var option = {
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: chartLine_data.data1,
- right: 10
- },
- grid: {
- top: '20%',
- left: '5%',
- right: '8%',
- containLabel: true
- },
- toolbox: {
- show: true,
- right: '2%',
- feature: {}
- },
- xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
- yAxis: {
- type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
- },
- series: (function() {
- if (chartLine_data.data3 !== undefined) {
- var serie = []
- for (var i = 0; i < chartLine_data.data3.length; i++) {
- var item = {
- name: chartLine_data.data1[i],
- type: 'line',
- data: chartLine_data.data3[i].data
- }
- serie.push(item)
- }
- return serie
- }
- }())
- }
- this.row4.chart2.chartLine.setOption(option)
- window.onresize = function() {
- this.row4.chart2.chartLine.resize()
- }
- },
- getRow4List3() {
- this.row4.table.listLoading = true
- GetDataByName(this.row4.table.getdataListParm).then(response => {
- if (response.data.list !== null) {
- console.log('库存预警table数据', response.data.list)
- this.row4.table.list = response.data.list
- this.row4.table.total = response.data.total
- } else {
- this.row4.table.list = []
- }
- setTimeout(() => {
- this.row4.table.listLoading = false
- }, 100)
- })
- }
- }
- }
- </script>
- <style>
- .app-main{background:#f5f5f5;}
- </style>
- <style lang="scss" scoped>
- .dashboard-editor-container{padding-left: 10px;background: #f5f5f5;padding-bottom: 10px;}
- // 公共
- .img-t{position: absolute;left: 0;right: 0;margin: 30px auto;width: 31%;height: 31%;background-size: 100% 100%;}
- .row1-c-l-c{
- margin: 20px auto;border: 1px solid #eee;height: 40%;width: 50%;border-radius: 50%;text-align: center;display:table;
- span{
- height:100%;display:table-cell;vertical-align: middle;font-size:14px;color: #009C69;
- b{padding-bottom: 10px;font-size: 16px;overflow: hidden;width: 100%;}
- }
- }
- .row1-c-l-b{
- width: 100%;text-align: center;display:table;font-size: 12px;
- // div{
- // font-size: 12px;height:100%;display:table-cell;vertical-align: middle;color: #323232;padding: 0 10px;width: 100%;
- // span{text-align: right;width: 75%;display: block;float: left;}
- // b{float: left;display: block;width: 25%;}
- // }
- }
- .title{
- height: 36px;padding-top: 7px;line-height: 36px;position: relative;
- .img-title{
- position: absolute;top: 10px; right:10px;bottom:0;left:20px;width: 30px;height: 30px;background: url(../../../assets/images/index/row-bg3.png) no-repeat;
- }
- .content{font-size: 18px;position: absolute;top: 7px;left: 55px;}
- }
- .title1{
- height: 36px;padding-top: 7px;line-height: 36px;position: relative;
- .img-title{
- position: absolute;top: 10px; right:10px;bottom:0;left:10px;
- width: 25px;height: 25px;
- img{width: 25px;height: 25px;}
- }
- .content{font-size: 16px;position: absolute;top: 7px;left: 40px;}
- }
- .button{
- height: 30px;
- .exportTable{float: right;margin-right: 5px;}
- }
- .dashboard{
- display: flex;margin-top: 10px;
- .dashboard-l{
- // width: 540px;
- width: 30%;
- .row1{
- height: 520px;
- .row1-t{
- background: #fff; height: 50px; color: #f28b46;
- .row1-t-l{
- .img-l{float:left;padding: 16px 0 16px 10px;width: 100px;height: 18px;}
- .content{float:left;width: 68%;font-size: 14px;margin-top: 5px;}
- }
- .row1-t-r{padding-right: 20px;text-align: right;line-height: 50px;}
- }
- .row1-c{
- display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
- .row1-c-l{
- background: #fff;width:49%;height:225px;border-radius:3px;margin-right: 1%;position: relative;
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t1.png) no-repeat; background-size: 100% 100%;}
- }
- .row1-c-r{
- background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t2.png) no-repeat; background-size: 100% 100%;}
- }
- }
- .row1-b{
- display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
- .row1-b-l{
- background: #fff;width:49%;height:225px;border-radius:3px;margin-right:1%;position: relative;
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t4.png) no-repeat; background-size: 100% 100%;}
- }
- .row1-b-r{
- background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t3.png) no-repeat; background-size: 100% 100%;}
- }
- }
- }
- .row2{
- margin-top:10px;height: 375px;background: #fff;
- .img-title{background-position: 0 0;}
- .todayPlan{
- display: flex; flex-direction: row;margin-top: 10px;
- div{
- flex: 1;position: relative;
- .bottom{
- width: 99%;height: 70px;background: #f9f9f9;margin: 30px auto 5px;display: flex; flex-direction: row;
- div{
- flex: 1;height: 42px;color: #333333;
- }
- .bottom-l{
- border-right: 1px solid #e0e0e0;margin-top: 15px;width: 100%;text-align: center;
- .bottom-l-t{
- height: 30px;
- b{font-size: 18px;}
- }
- .bottom-l-b{font-size: 12px;}
- }
- .bottom-r{
- margin-top: 15px;width: 100%;text-align: center;
- .bottom-r-t{height: 30px;padding-left: 10px;}
- .bottom-r-b{padding-left: 10px;font-size: 12px;}
- }
- }
- }
- }
- }
- .row3{
- margin-top:10px;height: 375px;background: #fff;
- .img-title{background-position: 0 -90px;}
- }
- }
- .dashboard-r{
- margin-left: 10px;flex:1;
- .row1{
- height: 520px;background: #fff;
- .row1Title{float: right;height: 50px;line-height: 50px;margin-right: 50px;}
- .img-title{background-position: 0 -240px;}
- #row2chartLine3{height: 270px;margin-top: 10px;}
- .carsLength{
- padding: 13px 0 0 22px;line-height: 38px;font-size: 18px;font-weight: 700;
- }
- .car{
- clear: both;
- .carList{
- padding:0 30px;overflow: auto;width: 100%;height: 470px;
- .listW{
- background: #f3f9f7; float: left;margin: 5px 5px;width: 32%;height: 120px;
- .list{
- width: 100%;height: 100%;border-radius: 5px;border:1px solid #000;
- .list-t{
- display: flex;
- border-bottom: 1px solid #f1f1f1;
- .list-t-t{
- flex: 1 1;
- width: 0;font-size: 12px;line-height: 22px;padding: 25px 5px 15px;text-align: center;
- span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- }
- }
- .list-b{
- display: flex; text-align: center;margin-top: 14px;color: #323232;
- .list-b-l{
- flex: 1;width: 0; height: 40px; position: relative;
- .left{
- .num{
- font-size: 12px;
- b{font-size: 12px;}
- }
- .weight{font-size: 12px;}
- }
- .right{
- height: 30px;width: 1px;background: #e0e0e0;position: absolute;right: 0;top: 0;bottom: 0;margin-top:auto;margin-bottom:auto
- }
- }
- }
- }
- }
- }
- }
- }
- .row2{
- margin-top:10px;height: 375px;
- display: flex; flex-direction: row;
- .row2-l{
- margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
- .img-title{background-position: 0 -30px;}
- }
- .row2-r{
- background: #fff;height:375px;border-radius:3px;flex: 1;
- .img-title{background-position: 0 -60px;}
- }
- }
- .row3{
- margin-top:10px;height: 375px;
- display: flex; flex-direction: row;
- .row3-l{
- margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
- .img-title{background-position: 0 -120px;}
- }
- .row3-r{
- background: #fff;height:375px;border-radius:3px;flex: 1;
- .img-title{background-position: 0 -150px;}
- }
- }
- }
- }
- </style>
|