11

psdc-ui/src/views/analyse/nhfx/index.vue

@@ -1,11 +1,50 @@
 <template>
   <div class="app-container home">
-    <div class="btnBox">
-
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="同比分析" name="first">
+        <el-form :inline="true" class="demo-form-inline">
+          <el-form-item label="日期："><el-date-picker v-model="dateValue" type="date" placeholder="请选择日期" size="default"/></el-form-item>
+            <el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item>
+            <el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item>
+            <el-form-item><el-button type="primary" icon="Search" @click="handleQuery">查询</el-button></el-form-item>
+        </el-form>
+        <div class="chartBox">
+          <div id="chart"></div>
+        </div>
+        <div class="tableBox">
+          <el-table :data="tbfxDataTable" height="400px">
+            <el-table-column label="月份" align="center" prop="month" width="100"/>
+            <el-table-column label="本期" align="center" prop="currentPeriod"/>
+            <el-table-column label="同期" align="center" prop="theSameTerm"/>
+            <el-table-column label="同比(%)" align="center" prop="yearOnYear"/>
+            <el-table-column label="累计同比(%)" align="center" prop="totalYearOnYear"/>
+          </el-table>
+          <el-pagination
+              v-model:current-page="tbfxCurrentPage"
+              v-model:page-size="tbfxPageSize"
+              :page-sizes="[5, 10, 20, 50]"
+              :small="small"
+              :disabled="disabled"
+              :background="background"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tbfxDataTable.length"
+              @size-change="tbfxHandleSizeChange"
+              @current-change="tbfxHandleCurrentChange"/>
         </div>
+      </el-tab-pane>
+
 
 
 
+      <el-tab-pane label="环比分析" name="second">
+        <el-form :inline="true" class="demo-form-inline">
+          <el-form-item label="日期："><el-date-picker v-model="dateValue" type="date" placeholder="请选择日期" size="default"/></el-form-item>
+          <el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item>
+          <el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item>
+          <el-form-item><el-button type="primary" icon="Search" @click="handleQuery">查询</el-button></el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -13,12 +52,108 @@
 import {ref,reactive} from "vue";
 
 
+/** 切换按钮操作*/
+const activeName = ref('first')
+
+/** -----同比分析-----*/
+/** 过滤查询*/
+const dateValue = ref()
+function lastDay(){}
+function nextDay(){}
+function handleQuery(){}
+
+/** 数据表格处理*/
+//内容
+const tbfxDataTable = reactive([
+  {
+    month:'01月',
+    currentPeriod: '1265',
+    theSameTerm:'3254',
+    yearOnYear:'30',
+    totalYearOnYear:'32',
+  }
+])
+const tbfxCurrentPage = ref(1)
+const tbfxPageSize = ref(5)
+const small = ref(false)
+const background = ref(false)
+const disabled = ref(false)
+const tbfxHandleSizeChange = (val) => {
+  console.log(`${val}`)
+}
+const tbfxHandleCurrentChange = (val) => {
+  console.log(`${val}`)
+}
+
+
 
 
 
 </script>
 
 <style scoped lang="scss">
+.home{
+  width: 100%;
+  height: calc(100vh - 84px);
+  border: 1px solid red;
+}
+.chartBox{
+  width: 100%;
+  height: 300px;
+  border: 1px solid #fff;
+  margin-bottom: 18px;
+  overflow: hidden;
+  #chart{
+    width: 100%;
+    height: 100%;
+  }
+}
+.tableBox{
+  width: 100%;
+  height: 400px;
+  border: 1px solid #fff;
+  overflow: hidden;
+}
+
+
+
+::v-deep .el-tabs__item{
+  color: #fff;
+}
+::v-deep .el-tabs__item.is-active{
+  color: #409EFF;
+}
+::v-deep .el-tabs__nav-wrap::after{
+  background-color: #313d70;
+}
+
 
+::v-deep .el-button{
+  border-radius: 2px;
+}
+::v-deep .el-pagination{
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+::v-deep .el-pagination__total{
+  color: #f3ffff;
+}
+::v-deep .el-pagination__jump{
+  color: #f3ffff;
+}
+::v-deep .el-pager{
+  margin: 0 5px;
+}
+::v-deep .el-table .el-table__body-wrapper{
+  background-color: #2F3D8A;
+}
+::v-deep .el-form--inline .el-form-item{
+  margin-right: 12px;
+}
+::v-deep .el-input__inner{
+  color: #f3ffff;
+}
 </style>
 

psdc-ui/src/views/analyse/nhtj/index.vue

@@ -310,5 +310,12 @@ const { filterForm } = toRefs(data);
 ::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right{
   background-color: #2F3D8A;
 }
+
+::v-deep .el-input__inner{
+  color: #f3ffff;
+}
+::v-deep .el-date-editor .el-range-input{
+  color: #f3ffff;
+}
 </style>