123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932 |
- <template>
- <view class="content">
- <view class="status_bar"></view>
- <view class="top-nav">
- <uni-icons class="back" type="back" size="25" @click="back"></uni-icons>
- <view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
- 新季
- </view>
- <view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
- 全部
- </view>
- </view>
- <view class="content1 content-item">
- <view class="title">
- 收支核算
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent1">
- <u-line color="#EEEEEE" />
- <view class="row1 mtb40">
- <view class="left">
- <view class="">
- {{ym1Change}}
- </view>
- <view class="" style="font-size: 12px; color:#9E9E9E; margin-top: 10rpx;">
- 单位:万元
- </view>
- </view>
- <view class="right" v-if="index!=2">
- <text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
- 按月
- </text>
- <text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
- </view>
- </view>
- <view class="row2" @click='godetail(2)'>
- <view class="text">
- 收入(万元)
- </view>
- <view class="price">
- {{sr?Number(sr).toFixed(2):0}}
- </view>
- </view>
- <view class="row3" @click='godetail(2)'>
- <view class="left">
- <view class="text">
- 支出(万元)
- </view>
- <view class="number">
- {{zc?Number(zc).toFixed(2):0}}
- </view>
- </view>
- <view class="center">
- </view>
- <view class="right">
- <view class="text">
- 差额(万元)
- </view>
- <view class="number">
- {{Number(sr-zc).toFixed(2)}}
- </view>
- </view>
- </view>
- <view class="row5 flex alc">
- <view class="left">
- <text class="point-left flex alc"></text>收入(万元):<text
- class="text-left">{{Number(sr).toFixed(2)}}</text>
- <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
- </view>
- <view class="right">
- <text class="point-right"></text>支出(万元):<text
- class="text-right">{{Number(zc).toFixed(2)}}</text>
- <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
- </view>
- </view>
- <view class="row4">
- <qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
- @getIndex="getIndex" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',1)">
- {{this.isSHowContent1?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent1" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content2 content-item">
- <view class="title">
- 合同数据
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent2">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb" style="margin-top: 40rpx;">
- <view class="left title-lv2">
- 数量统计
- </view>
- <view @click='godetail(0)' class="right-btn" style="position: relative;z-index: 999;">
- 合同明细
- </view>
- </view>
- <!-- <view class="row2 flex jcse">
- <view class="left flex alc">
- <view class="color1"></view>
- <text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
- </view>
- <view class="right flex alc">
- <view class="color2"></view>
- <text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
- </view>
- </view> -->
- <view class="row3">
- <qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
- </view>
- <view class="row4 flex jcsb mtb40">
- <view class="left title-lv2">
- 利润核算
- </view>
- <view @click='godetail(1)' class="right-btn">
- 利润明细
- </view>
- </view>
- <view class="row5">
- <view class="left flex">
- <view class="" v-if="index==1">
- <u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
- @click="yearClick('1')">
- </u-icon>
- <text @click="showYear=true">{{year}}年</text>
- <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
- :color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
- </u-icon>
- <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
- :color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
- </u-icon>
- </view>
- <view class="" v-else>
- 新季利润
- </view>
- </view>
- <view class="right">
- 单位:元
- </view>
- </view>
- <view class="row6" v-if="isHaveData3">
- <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',2)">
- {{this.isSHowContent2?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent2" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content3 content-item">
- <view class="title flex jcsb">
- <view class="">
- 仓储数据
- </view>
- <view @click='goToPage(5)' class="right-btn">
- 库存明细
- </view>
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent3">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb mtb40">
- <view class="left title-lv2">
- 库存储量
- </view>
- <view class="right">
- 单位:吨
- </view>
- </view>
- <view class="btn">
- <view class="btn-in" :class='btnIndex==1?"btn-active":""' @click="changeWeight(1)">
- 折算纯重
- </view>
- <view class="btn-in" :class='btnIndex==2?"btn-active":""' @click="changeWeight(2)">
- 实际重量
- </view>
- </view>
- <view class="row2">
- <view class="" v-for="(item,index) in clList">
- <view class="name">
- {{item.name}}
- </view>
- <view class="bottom flex alc jcsb">
- <u-line-progress :percent="item.percent" :active-color="color4(index)" :show-percent='false'
- class='left' height='12'>
- </u-line-progress>
- <view class="weight">
- {{item.weight}}
- </view>
- </view>
- </view>
- <!-- <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" :ontouch="true" /> -->
- </view>
- <view class="row3">
- <view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
- <view class="flex alc">
- <image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
- <text style="color:#707575;">{{item.name}}</text>
- </view>
- <view class="number">
- {{item.number}}
- </view>
- </view>
- </view>
- <view class="row5 flex jcsb mtb40">
- <view class="left title-lv2">
- 当期货值
- </view>
- <view class="right">
- 单位:万元
- </view>
- </view>
- <view class="row6">
- <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" :ontouch="true" />
- </view>
- <view class="row7">
- <view class="left title-lv2" style="margin: 30rpx;">
- 平均成本
- </view>
- <view class="list-item" v-for="item in averageCostList">
- <view class="flex jcsb alc">
- <view class="left" style="color: #7A7A7A;">
- {{item.name}}
- </view>
- <view class="">
- {{Number(item.result).toFixed(0)}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',3)">
- {{this.isSHowContent3?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent3" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content4 content-item">
- <view class="title flex jcsb">
- <view class="">
- 今日入库
- </view>
- <view @click='godetail(3)' class="right-btn">
- 入库明细
- </view>
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent4">
- <u-line color="#EEEEEE" />
- <view class="" style="color: #9E9E9E;margin: 30rpx 0 0 30rpx; font-size: 12px;">
- 单位:吨
- </view>
- <view class="flex alc">
- <view class="" style="width:40%;height: 160px;">
- <qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" class='opts6' />
- </view>
- <view class="zt-right">
- <view class="flex jcsb alc" v-for="item in rkList" style="font-weight: 700;">
- <view class="left">
- <text :style="item.style"></text>{{item.name}}
- </view>
- <view class="right">
- {{Number(item.value).toFixed(2)}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',4)">
- {{this.isSHowContent4?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent4" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content5 content-item">
- <view class="title">
- 在途数据
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent5">
- <u-line color="#EEEEEE" />
- <view class="row1 days-nav">
- <view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
- @click="clickNav(index)">
- {{item}}
- </view>
- </view>
- <view class="flex alc">
- <view class="" style="width:40%;height: 160px;">
- <qiun-data-charts type="ring" :opts="opts7" :chartData="chartData7" />
- </view>
- <view class="zt-right">
- <view class="flex jcsb alc" v-for="item in ztList" style="font-weight: 700;">
- <view class="left">
- <text :style="item.style"></text>{{item.name}}
- </view>
- <view class="right">
- {{item.value}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',5)">
- {{this.isSHowContent5?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent5" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content6 content-item">
- <view class="title">
- 用户增长
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent6">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb" style="padding:0 12rpx 0 5rpx;">
- <view class="left">
- app注册
- </view>
- <view class="right">
- <text>合计:</text>
- <text style="color: #EC6666;">{{appTotal}}</text>
- <text>人</text>
- </view>
- </view>
- <view class="row2">
- <qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
- </view>
- <view class="row1 flex jcsb" style="margin-top: 90rpx;padding:0 12rpx 0 5rpx;">
- <view class="left">
- 粮脉入驻
- </view>
- <view class="right">
- <text>合计:</text>
- <text style="color: #22C572;">{{lmTotal}}</text>
- <text>人</text>
- </view>
- </view>
- <view class="row2">
- <qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',6)">
- {{this.isSHowContent6?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent6" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- btnIndex: "2",
- rkList: [],
- ztList: [],
- ztColor: ['#38CA80', '#8D9EE9', '#FFBB6E'],
- color: ['#FFBB6E', '#8D9EE9', '#FF8B95', '#38CA80', '#FFDD85', "#1890FF", "#91CB74", "#FAC858", "#EE6666",
- "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- clList: [],
- isHaveData3: true,
- val: 1000,
- carIndex: 0,
- appTotal: '',
- lmTotal: '',
- ym1: '',
- ym1Change: '',
- sr: '',
- zc: '',
- seachYear: '',
- seachMoth: '2022-10-10',
- dayList: ['1天', '7天', '30天'],
- averageCostList: [{
- name: '玉米',
- number: '2000.00'
- },
- {
- name: '玉米(潮粮)',
- number: '2000.00'
- },
- {
- name: '高粱',
- number: '2000.00'
- },
- {
- name: '高粱(潮粮)',
- number: '2000.00'
- },
- {
- name: '小麦',
- number: '2000.00'
- },
- {
- name: '大豆',
- number: '2000.00'
- },
- ],
- InventoryList: [{
- name: '合计储量',
- number: '1000.00',
- src: '../../static/img/cl.png'
- }, {
- name: '采购待执行',
- number: '1000.00',
- src: '../../static/img/cg.png'
- },
- {
- name: '销待执行售',
- number: '1000.00',
- src: '../../static/img/xs.png'
- },
- {
- name: '头寸',
- number: '1000.00',
- src: '../../static/img/tc.png'
- },
- ],
- year: 2022,
- selector: [2020, 2021, 2022],
- showYear: false,
- iconName1: 'arrow-up',
- iconName2: 'arrow-up',
- iconName3: 'arrow-up',
- iconName4: 'arrow-up',
- iconName5: 'arrow-up',
- iconName6: 'arrow-up',
- styles: {},
- modeClass: 'fade',
- isSHowContent1: true,
- isSHowContent2: true,
- isSHowContent3: true,
- isSHowContent4: true,
- isSHowContent5: true,
- isSHowContent6: true,
- chartData: {},
- chartData1: {},
- chartData3: {},
- chartData4: {},
- chartData5: {},
- chartData6: {},
- chartData7: {},
- chartData8: {},
- chartData9: {},
- opts: {
- enableScroll: true,
- color: ["#E84A55", "#22C572"],
- padding: [15, 15, 0, 15],
- dataPointShapeType: "hollow",
- legend: {
- show: false
- },
- xAxis: {
- gridType: "dash",
- disableGrid: true,
- itemCount: 6,
- },
- yAxis: {
- // gridType: "dash",
- gridType: 'solid',
- gridColor: "#E9E9E9",
- splitNumber: 5,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- textAlign: 'right'
- }],
- },
- extra: {
- area: {
- type: "straight",
- opacity: 0.3,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- },
- },
- opts2: {
- color: ["#D2F3E2", "#22C572"],
- padding: [15, 20, 0, 5],
- legend: {
- fontSize: 12,
- position: 'top',
- itemGap: 20,
- padding: 20
- },
- xAxis: {
- boundaryGap: "justify",
- disableGrid: false,
- axisLine: false,
- gridType: "dash",
- dashLength: 10,
- },
- extra: {
- // tooltip: {
- // showBox: false,
- // },
- bar: {
- type: "group",
- width: 10,
- meterBorde: 1,
- meterFillColor: "#FFFFFF",
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 6
- }
- }
- },
- opts3: {
- color: ["#8D9EE9"],
- padding: [15, 15, 0, 5],
- legend: {
- show: false
- },
- xAxis: {
- disableGrid: true,
- gridType: "dash",
- },
- yAxis: {
- gridType: "dash",
- data: [{
- min: 0,
- fontColor: '#BEBEBE',
- textAlign: 'right'
- }]
- },
- extra: {
- column: {
- type: "group",
- width: 15,
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- linearType: "custom",
- seriesGap: 5,
- linearOpacity: 0.5,
- barBorderCircle: true,
- customColor: [
- "#8D9EE9",
- "#8D9EE9"
- ]
- }
- }
- },
- opts4: {
- enableScroll: true,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- padding: [15, 30, 0, 5],
- legend: {
- show: false,
- },
- xAxis: {
- boundaryGap: "justify",
- disableGrid: false,
- axisLine: false,
- itemCount: 4,
- },
- yAxis: {
- },
- extra: {
- bar: {
- type: "group",
- width: 15,
- meterBorde: 1,
- meterFillColor: "#FFFFFF",
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 6
- }
- }
- },
- opts5: {
- enableScroll: true,
- color: ["#8D9EE9"],
- padding: [15, 15, 0, 5],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true,
- itemCount: 4,
- gridType: "dash",
- },
- yAxis: {
- gridType: "dash",
- data: [{
- min: 0,
- fontColor: "#BEBEBE",
- axisLine: false
- }]
- },
- extra: {
- column: {
- type: "group",
- width: 15,
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- seriesGap: 5,
- // linearOpacity: 0.5,
- barBorderCircle: true,
- customColor: [
- "#8D9EE9",
- "#8D9EE9"
- ]
- }
- }
- },
- opts6: {
- dataLabel: false,
- rotate: false,
- rotateLock: false,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- legend: {
- show: false,
- position: "right",
- lineHeight: 25
- },
- title: {
- name: "",
- fontSize: 15,
- color: "#666666"
- },
- subtitle: {
- name: "",
- fontSize: 25,
- color: "#7cb5ec"
- },
- extra: {
- ring: {
- ringWidth: 10,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 3,
- borderColor: "#FFFFFF"
- }
- }
- },
- opts7: {
- dataLabel: false,
- rotate: false,
- rotateLock: false,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- legend: {
- show: false,
- position: "right",
- lineHeight: 25
- },
- title: {
- name: "",
- fontSize: 15,
- color: "#666666"
- },
- subtitle: {
- name: "",
- fontSize: 25,
- color: "#7cb5ec"
- },
- extra: {
- ring: {
- ringWidth: 10,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 3,
- borderColor: "#FFFFFF"
- }
- }
- },
- opts8: {
- color: ["#EC6666"],
- padding: [15, 15, 0, 15],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true
- },
- yAxis: {
- gridType: "dash",
- dashLength: 2,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- }],
- },
- extra: {
- area: {
- type: "curve",
- opacity: 0.2,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- }
- },
- opts9: {
- color: ["#22C572"],
- padding: [15, 15, 0, 15],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true
- },
- yAxis: {
- gridType: "dash",
- dashLength: 2,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- }],
- },
- extra: {
- area: {
- type: "curve",
- opacity: 0.2,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- }
- },
- textIndex: 1,
- index: 2,
- background: {
- backgroundColor: '#2E303A',
- backgroundColor: 'red',
- },
- nowYear: ''
- }
- },
- onLoad: function(option) {
- this.nowYear = new Date().getFullYear()
- },
- destroyed() {
- },
- onUnload() {
- },
- onReady() {
- this.getServerData();
- },
- methods: {
- changeWeight(index) {
- this.btnIndex = index
- this.makeDate4(this.chartList, index)
- },
- color4(index) {
- console.log(index)
- index = index + 1
- switch (index) {
- case 1:
- return '#FFBB6E'
- case 2:
- return '#8D9EE9'
- case 3:
- return '#FF8B95'
- case 4:
- return '#38CA80'
- case 5:
- return '#FFDD85'
- case 6:
- return '#FFBB6E'
- case 7:
- return '#FFBB6E'
- case 8:
- return '#FFBB6E'
- case 9:
- return '#FFBB6E'
- case 10:
- return '#FFBB6E'
- }
- },
- goToPage(index) {
- uni.navigateTo({
- url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
- })
- },
- clickNav(index) {
- this.carIndex = index
- let _data = ""
- if (index == 0) {
- _data = 1
- } else if (index == 1) {
- _data = 7
- } else {
- _data = 30
- }
- this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
- seachMoth: _data,
- }).then(res => {
- console.log(res.data)
- this.selectMakeDate7(res.data.data[0])
- })
- },
- yearClick(type) {
- if (type == 1) {
- this.year--
- } else {
- this.year++
- }
- this.$api.doRequest('get', '/biInfoController/profitAccount', {
- compId: uni.getStorageSync('pcUserInfo').compId,
- seachYear: this.year,
- // biViewInfoList: {weight:''}
- }).then(res => {
- console.log("利润切换", res.data.data[0])
- // this.makeDate3(res.data[0])
- this.chartData3.series = [];
- let _categorieslr = []
- let _countlr = []
- if (res.data.data[0].biViewInfoList.length > 0) {
- for (let i = 0; i < res.data.data[0].biViewInfoList.length; i++) {
- _categorieslr.push(res.data.data[0].biViewInfoList[i].name)
- _countlr.push(res.data.data[0].biViewInfoList[i].weight ? res.data.data[0]
- .biViewInfoList[
- i].weight :
- 0)
- //利润核算
- }
- }
- let res3 = {
- categories: _categorieslr,
- series: [{
- name: "利润金额",
- data: _countlr
- }]
- };
- this.chartData3 = JSON.parse(JSON.stringify(res3));
- })
- },
- godetail(status) {
- var url = ''
- switch (status) {
- case 0:
- url = '/pages/dataReport/contractdetails/contractdetails'
- break;
- case 1:
- url = '/pages/dataReport/breakdownofprofit'
- break;
- case 2:
- url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
- break;
- case 3:
- url = '/pages/dataReport/Inventoryentrydetails'
- break;
- }
- uni.navigateTo({
- url: url
- })
- },
- foldClcik(type, index) {
- switch (index) {
- case 1:
- this.isSHowContent1 = !this.isSHowContent1
- this.iconName1 = this.isSHowContent1 ? "arrow-up" : 'arrow-down'
- break;
- case 2:
- this.isSHowContent2 = !this.isSHowContent2
- this.iconName2 = this.isSHowContent2 ? "arrow-up" : 'arrow-down'
- break;
- case 3:
- this.isSHowContent3 = !this.isSHowContent3
- this.iconName3 = this.isSHowContent3 ? "arrow-up" : 'arrow-down'
- break;
- case 4:
- this.isSHowContent4 = !this.isSHowContent4
- this.iconName4 = this.isSHowContent4 ? "arrow-up" : 'arrow-down'
- break;
- case 5:
- this.isSHowContent5 = !this.isSHowContent5
- this.iconName5 = this.isSHowContent5 ? "arrow-up" : 'arrow-down'
- break;
- case 6:
- this.isSHowContent6 = !this.isSHowContent6
- this.iconName6 = this.isSHowContent6 ? "arrow-up" : 'arrow-down'
- break;
- }
- this.modeClass = type
- },
- getIndex(e) {
- console.log(e)
- // 点击图表
- if (this.textIndex == 1) {
- this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
- this.ym1Change = this.chartList[0].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
- this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
- this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
- } else {
- this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
- this.ym1Change = this.chartList[1].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
- this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
- this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
- }
- },
- makeYData(max) {
- if (max <= 100) {
- return Math.ceil(max * 1.05 / 20) * 20
- } else if (max <= 1000) {
- return Math.ceil(max * 1.05 / 100) * 100
- } else if (max > 1000) {
- console.log(111)
- return Math.ceil(max * 1.05 / 500) * 500
- }
- // Math.ceil(_max * 1.05 / 500) * 500
- },
- makeDate1(val) {
- console.log("val", val)
- // 按月1
- let _categories = []
- let _price1 = []
- let _price2 = []
- this.chartData.series = [];
- // 设置x轴数据
- let _ySRPriceMax = 0
- let _yZCPriceMax = 0
- let _max = 0
- if (this.textIndex == 1) {
- if (val[0].biViewInfoList && val[0].biViewInfoList.length > 0) {
- for (let i = 0; i < val[0].biViewInfoList.length; i++) {
- val[0].biViewInfoList[i].weight = Number(val[0].biViewInfoList[i].weight).toFixed(2)
- _price1.push(val[0].biViewInfoList[i].weight)
- }
- //月收入最大值
- _ySRPriceMax = Math.max(..._price1)
- for (let i = 0; i < val[2].biViewInfoList.length; i++) {
- val[2].biViewInfoList[i].weight = Number(val[2].biViewInfoList[i].weight).toFixed(2)
- _price2.push(val[2].biViewInfoList[i].weight)
- _categories.push(new Date(val[2].biViewInfoList[i].name).getMonth() + 1)
- }
- //月收入最大值
- _yZCPriceMax = Math.max(..._price2)
- // 判断收入支出最大值构建y坐标轴刻度
- _max = _ySRPriceMax > _yZCPriceMax ? _ySRPriceMax : _yZCPriceMax
- this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
- this.ym1Change = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name.replace(/-/g, ".");
- this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
- this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
- }
- } else {
- if (val[1].biViewInfoList && val[1].biViewInfoList.length > 0) {
- this.ym1Change = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name.replace(/-/g, ".");
- this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
- this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
- this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
- for (let i = 0; i < val[1].biViewInfoList.length; i++) {
- _categories.push(val[1].biViewInfoList[i].name)
- _price1.push(val[1].biViewInfoList[i].weight)
- }
- for (let i = 0; i < val[3].biViewInfoList.length; i++) {
- _price2.push(val[3].biViewInfoList[i].weight)
- }
- }
- _max = _price1 > _price2 ? _price1 : _price2
- }
- let res = {
- categories: _categories,
- series: [{
- name: "收入",
- data: _price1,
- textColor: "transparent"
- }, {
- name: "支出",
- data: _price2,
- textColor: "transparent"
- }
- ]
- };
- // this.opts.yAxis.data[0].max = Math.ceil(_max / 1000) * 1000
- // 处理y轴最大值
- console.log("max1", _max)
- let _newMax = this.makeYData(_max)
- console.log('max1', _newMax)
- // this.opts.yAxis.data[0].max = Math.ceil(_max * 1.05 / 500) * 500
- this.opts.yAxis.data[0].max = _newMax
- this.chartData = JSON.parse(JSON.stringify(res));
- },
- makeDate2(val) {
- let _categories = []
- let _count1 = []
- let _count2 = []
- let _xMax1 = 0
- let _xMax2 = 0
- let _max = 0
- if (val[4].biViewInfoList && val[4].biViewInfoList.length > 0) {
- for (let i = 0; i < val[4].biViewInfoList.length; i++) {
- _categories.push(val[4].biViewInfoList[i].name.substring(0, 2))
- _count1.push(Number(val[4].biViewInfoList[i].weight).toFixed(0))
- _count2.push(val[4].biViewInfoList[i].count ? Number(val[4].biViewInfoList[i].count).toFixed(0) :
- 0)
- }
- }
- _xMax1 = Math.max(..._count1)
- _xMax2 = Math.max(..._count2)
- _max = _xMax1 > _xMax2 ? _xMax1 : _xMax2
- console.log(_xMax1)
- console.log(_xMax2)
- // this.opts2.xAxis.max = Math.ceil(_max / 100) * 100
- let _newMax = this.makeYData(_max)
- console.log('max2', _newMax)
- this.opts2.xAxis.max = _newMax
- let res1 = {
- categories: _categories,
- series: [{
- name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
- data: _count1,
- legendShape: "circle",
- textColor: "transparent"
- },
- {
- name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
- data: _count2,
- legendShape: "circle",
- textColor: "transparent"
- }
- ]
- };
- this.chartData1 = JSON.parse(JSON.stringify(res1));
- },
- makeDate3(val) {
- let _max = 0
- let _categorieslr = []
- let _countlr = []
- if (val[5].biViewInfoList.length > 0) {
- for (let i = 0; i < val[5].biViewInfoList.length; i++) {
- _categorieslr.push(val[5].biViewInfoList[i].name.substring(0, 2))
- _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
- }
- _max = Math.max(..._countlr)
- } else {
- this.isHaveData3 = false
- }
- let _newMax = this.makeYData(_max)
- console.log('max3', _newMax)
- this.opts3.yAxis.data[0].max = _newMax
- //利润核算
- let res3 = {
- categories: _categorieslr,
- series: [{
- name: "利润金额",
- data: _countlr
- }]
- };
- this.chartData3 = JSON.parse(JSON.stringify(res3));
- },
- makeDate4(val, type) {
- let _data = []
- // 合计储量
- let _count = 0
- this.clList = []
- if (type == 1) {
- _data = val[14].biViewInfoList
- } else {
- _data = val[8].biViewInfoList
- }
- let _categorieslr = []
- let _countlr = []
- // this.clList =
- let _weightList = []
- let _maxWeight = ''
- if (_data && _data.length > 0) {
- for (let i = 0; i < _data.length; i++) {
- _weightList.push(Number(_data.weight).toFixed(0) ? Number(_data[i]
- .weight).toFixed(0) : 0)
- }
- _maxWeight = Math.max(..._weightList) + Math.max(..._weightList) * 0.05
- for (let i = 0; i < _data.length; i++) {
- console.log("_data", _data)
- _count += _data[i].weight
- let _obj = {
- percent: Number(_data[i].weight).toFixed(0) / _maxWeight * 100,
- name: _data[i].name,
- weight: Number(_data[i].weight).toFixed(0)
- }
- console.log("库存储量", _obj)
- this.clList.push(_obj)
- }
- }
- let _tc = Number(_count) + Number(val[6].biViewInfoList[1].count) - Number(
- val[6].biViewInfoList[2].count)
- this.InventoryList = [{
- name: '合计储量',
- number: Number(_count).toFixed(3),
- src: '../../static/img/cl.png'
- }, {
- name: '采购待执行',
- number: Number(val[6].biViewInfoList[1].count).toFixed(3),
- src: '../../static/img/cg.png'
- },
- {
- name: '销待执行售',
- number: Number(val[6].biViewInfoList[2].count).toFixed(3),
- src: '../../static/img/xs.png'
- },
- {
- name: '头寸',
- number: Number(_tc).toFixed(3),
- src: '../../static/img/tc.png'
- },
- ]
- },
- makeDate5(val) {
- let _max = 0
- let _categorieslr = []
- let _count = []
- let count = []
- if (val[7].biViewInfoList && val[9].biViewInfoList.length > 0) {
- for (let i = 0; i < val[9].biViewInfoList.length; i++) {
- let _obj = {
- value: Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0)
- .toFixed(
- 0),
- color: this.color[i]
- }
- _categorieslr.push(val[9].biViewInfoList[i].name)
- _count.push(_obj)
- count.push(Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0))
- }
- _max = Math.max(...count)
- }
- let _newMax = this.makeYData(_max)
- console.log('max5', _newMax)
- this.opts5.yAxis.data[0].max = _newMax
- // data: [{
- // value: 10000,
- // color: "#FFBB6E"
- // },
- // {
- // value: 40000,
- // color: "#8D9EE9"
- // }, {
- // value: 70000,
- // color: "#FF8B95"
- // }, {
- // value: 90000,
- // color: "#38CA80"
- // },
- // {
- // value: 100000,
- // color: "#FFDD85"
- // }
- // ]
- let res5 = {
- categories: _categorieslr,
- series: [{
- name: "货值(万元)",
- data: _count
- }]
- };
- this.chartData5 = JSON.parse(JSON.stringify(res5));
- this.averageCostList = val[9].biViewInfoList
- },
- makeDate6(val) {
- let _data = []
- if (val[10].biViewInfoList && val[10].biViewInfoList.length > 0) {
- for (let i = 0; i < val[10].biViewInfoList.length; i++) {
- let _obj = {
- name: val[10].biViewInfoList[i].name,
- value: val[10].biViewInfoList[i].weight,
- color: this.color[i],
- style: {
- 'background': this.color[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.rkList = _data
- }
- }
- let res6 = {
- width: 200,
- series: [{
- data: _data
- }]
- };
- this.chartData6 = JSON.parse(JSON.stringify(res6));
- },
- selectMakeDate7(val) {
- console.log(11)
- console.log(val)
- this.chartData7.series = [];
- let _data = []
- this.ztList = []
- for (let i = 0; i < val.biViewInfoList.length; i++) {
- let _obj = {
- name: val.biViewInfoList[i].name,
- value: Number(val.biViewInfoList[i].count),
- color: this.ztColor[i],
- style: {
- 'background': this.ztColor[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.ztList = _data
- }
- console.log(_data)
- let res7 = {
- series: [{
- data: _data
- }]
- };
- this.chartData7 = JSON.parse(JSON.stringify(res7));
- },
- makeDate7(val) {
- let _data = []
- this.ztList = []
- if (val[11].biViewInfoList && val[11].biViewInfoList.length) {
- for (let i = 0; i < val[11].biViewInfoList.length; i++) {
- let _obj = {
- name: val[11].biViewInfoList[i].name,
- value: Number(val[11].biViewInfoList[i].count),
- color: this.ztColor[i],
- style: {
- 'background': this.ztColor[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.ztList = _data
- }
- }
- console.log(_data)
- let res7 = {
- series: [{
- data: _data
- }]
- };
- this.chartData7 = JSON.parse(JSON.stringify(res7));
- },
- makeDate8(val) {
- let _categories = []
- let _data = []
- let _categories1 = []
- let _data1 = []
- this.appTotal = val[12].count
- this.lmTotal = val[13].count
- let _max1 = 0
- let _max2 = 0
- if (val[12].biViewInfoList && val[12].biViewInfoList.length) {
- for (let i = 0; i < val[12].biViewInfoList.length; i++) {
- _categories.push(new Date(val[12].biViewInfoList[i].name).getMonth() + 1 + '月')
- _data.push(val[12].biViewInfoList[i].weight)
- }
- }
- _max1 = Math.max(..._data)
- if (val[13].biViewInfoList && val[13].biViewInfoList.length > 0) {
- for (let i = 0; i < val[13].biViewInfoList.length; i++) {
- _categories1.push(new Date(val[13].biViewInfoList[i].name).getMonth() + 1 + '月')
- _data1.push(val[13].biViewInfoList[i].weight)
- }
- }
- _max2 = Math.max(..._data1)
- let _newMax1 = this.makeYData(_max1)
- console.log('max8', _newMax1)
- this.opts8.yAxis.data[0].max = _newMax1
- let _newMax2 = this.makeYData(_max2)
- console.log('max9', _newMax2)
- this.opts9.yAxis.data[0].max = _newMax2
- let res8 = {
- categories: _categories,
- series: [{
- name: "成交量A",
- data: _data,
- // textColor: "transparent"
- }]
- }
- let res9 = {
- categories: _categories1,
- series: [{
- name: "成交量A",
- data: _data1,
- // textColor: "transparent"
- }]
- }
- this.chartData8 = JSON.parse(JSON.stringify(res8))
- this.chartData9 = JSON.parse(JSON.stringify(res9))
- },
- isShowChart(val, index) {
- if (val.length == 0) {
- return false
- switch (index) {
- case 3:
- this.isHaveData3 = false
- }
- }
- return true
- },
- getServerData() {
- uni.showLoading({
- title: "加载中",
- mask: true
- })
- this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
- 'pcUserInfo')
- .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
- res => {
- console.log("数据报表", res)
- uni.hideLoading()
- this.chartList = res.data.data
- // 收支核算数据处理
- this.makeDate1(res.data.data)
- //合同数据
- this.makeDate2(res.data.data)
- //利润核算
- this.makeDate3(res.data.data)
- //库存储量
- this.makeDate4(res.data.data)
- //当期货值
- this.makeDate5(res.data.data)
- //今日入库
- this.makeDate6(res.data.data)
- //在途数据
- this.makeDate7(res.data.data)
- //APP注册
- this.makeDate8(res.data.data)
- // uni.hideLoading()
- })
- },
- back() {
- uni.navigateBack()
- },
- navClick(val) {
- this.clList = []
- this.index = val
- if (val == 1) {
- this.seachMoth = ''
- } else {
- this.seachMoth = '2022-10-10'
- }
- this.getServerData();
- },
- accounting(val) {
- this.textIndex = val
- if (val == 1) {
- console.log("按月")
- } else {
- console.log("按年")
- }
- this.makeDate1(this.chartList)
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .flex {
- display: flex;
- }
- .alc {
- align-items: center;
- }
- .jcse {
- justify-content: space-evenly;
- }
- .jcsb {
- justify-content: space-between;
- }
- .mtb40 {
- margin: 40rpx 0;
- }
- .title-lv2 {
- font-weight: bold;
- color: #333333;
- }
- .status_bar {
- height: var(--status-bar-height);
- width: 100%;
- }
- .top-nav {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 1;
- }
- .back {
- position: absolute;
- left: 20rpx;
- top: 25%;
- bottom: 0;
- margin: auto;
- }
- .zd {
- color: #969696;
- margin-top: 20rpx;
- justify-content: center;
- }
- .top-nav {
- font-size: 36rpx;
- background: white;
- padding: 20rpx;
- }
- .nav-active {
- font-weight: 700;
- position: relative;
- }
- .nav-active:after {
- content: "";
- position: absolute;
- bottom: -20rpx;
- left: 0;
- right: 0;
- margin: auto;
- height: 10rpx;
- width: 60%;
- background: #262626;
- border-radius: 40rpx;
- }
- .content-item {
- background: white;
- margin: 20rpx 25rpx 0 25rpx;
- border-radius: 20rpx;
- padding: 20rpx;
- box-sizing: border-box;
- }
- .title {
- margin-bottom: 22rpx;
- font-size: 32rpx;
- font-weight: 700;
- color: #343434;
- }
- .right-btn {
- width: 120rpx;
- height: 42rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #F1F1F1;
- border-radius: 30px;
- font-size: 22rpx;
- color: #707575;
- }
- .content1 {
- margin-top: 100rpx;
- .content1-wrap {}
- .row1 {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left {
- color: #868686;
- }
- .text {
- margin-left: 38rpx;
- color: #2E303A;
- height: 60rpx;
- display: inline-block;
- line-height: 60rpx;
- padding: 0 26rpx;
- }
- .text-active {
- // margin-left: 38rpx;
- color: #FFF;
- background: #2E303A;
- // padding: 1rpx 26rpx;
- height: 60rpx;
- display: inline-block;
- line-height: 60rpx;
- padding: 0 26rpx;
- border-radius: 10rpx;
- }
- }
- .row2 {
- display: flex;
- flex-direction: column;
- align-items: center;
- .text {
- color: #636363;
- margin-bottom: 10rpx
- }
- .price {
- font-size: 56rpx;
- font-weight: 700;
- color: #D79C58;
- }
- }
- .row3 {
- display: flex;
- justify-content: space-between;
- margin-top: 27rpx;
- align-items: center;
- .center {
- width: 2px;
- height: 61rpx;
- border: 2rpx solid #EEEEEE;
- }
- .left,
- .right {
- // background: green;
- width: calc(50% - 1px);
- text-align: center;
- .text {
- color: #636363
- }
- .number {
- margin-top: 12rpx;
- font-size: 34rpx;
- font-weight: 700;
- color: #343434;
- }
- }
- }
- .row4 {
- margin-top: 20rpx;
- }
- .row5 {
- background: #F6F6F6;
- border-radius: 8px;
- padding: 16rpx 0;
- box-sizing: border-box;
- margin: 20rpx 0;
- .left,
- .right {
- width: 50%;
- text-align: center;
- }
- .point-left {
- width: 11rpx;
- height: 11rpx;
- background: #E84A55;
- display: inline-block;
- border-radius: 50%;
- margin: 6rpx;
- }
- .point-right {
- width: 11rpx;
- height: 11rpx;
- background: #22C572;
- display: inline-block;
- border-radius: 50%;
- margin: 6rpx;
- }
- .text-left {
- color: #E84A55;
- font-weight: 700;
- }
- .text-right {
- color: #22C572;
- font-weight: 700;
- }
- }
- }
- .content2 {
- .row1 {}
- .row2 {
- color: #707575;
- font-size: 22rpx;
- .color1 {
- width: 16rpx;
- height: 12rpx;
- background: #D2F3E2;
- border-radius: 7rpx;
- margin-right: 10rpx;
- }
- .color2 {
- width: 16rpx;
- height: 12rpx;
- background: #2CC778;
- border-radius: 7rpx;
- margin-right: 10rpx;
- }
- }
- .row3 {
- position: relative;
- top: -40rpx;
- }
- .row5 {
- display: flex;
- justify-content: space-between;
- color: #9E9E9E;
- margin-bottom: 20rpx;
- .left {}
- }
- }
- .content3 {
- .btn {
- display: flex;
- font-size: 24rpx;
- background: #F5F6FA;
- padding: 8rpx;
- border-radius: 10rpx;
- width: 332rpx;
- .btn-in {
- text-align: center;
- width: 400rpx;
- padding: 10rpx 0;
- }
- .btn-active {
- padding: 10rpx 0;
- text-align: center;
- width: 400rpx;
- background: #fff;
- font-weight: 700;
- border-radius: 12rpx;
- }
- }
- .right {
- color: #9E9E9E;
- }
- .row2 {
- .name {
- color: #7A7A7A;
- margin: 17rpx 0;
- }
- .bottom {
- display: flex;
- }
- .left {
- width: 80%;
- }
- .weight {
- margin-left: 20rpx;
- }
- }
- .row3 {
- padding: 31rpx 25rpx 51rpx 25rpx;
- border-radius: 15rpx;
- margin-top: 31rpx;
- background: #FAFAFA;
- .list-item {
- margin-top: 20rpx;
- .number {
- font-weight: 700;
- }
- }
- }
- .row7 {
- .list-item {
- font-size: 24rpx;
- display: inline-block;
- padding: 20rpx;
- box-sizing: border-box;
- background: #FAFAFA;
- width: calc(50% - 40rpx);
- margin: 20rpx;
- border-radius: 8rpx;
- }
- }
- }
- .content4 {
- .row1 {
- display: flex;
- .opts6 uni-canvas {
- width: 200px;
- }
- }
- }
- .content5 {
- .days-nav {
- display: flex;
- justify-content: space-evenly;
- }
- }
- .zt-right {
- flex-direction: column;
- justify-content: space-evenly;
- height: 100px;
- display: flex;
- width: 100%;
- }
- .content6 {
- .row1 {
- margin: 20rpx 0;
- }
- .left {
- // font-weight: 700;
- // margin
- }
- }
- .days-nav {
- margin: 20rpx;
- background: #F5F6FA;
- border-radius: 8rpx;
- padding: 4rpx 0;
- .item {
- width: 33%;
- display: flex;
- justify-content: center;
- padding: 6px 0;
- }
- .item-active {
- background: #fff;
- }
- }
- </style>
|