From c21fc9808dc298d6b670082e47d59daabe10ea05 Mon Sep 17 00:00:00 2001
From: guoxing <1369478551@qq.com>
Date: Sat, 28 Jan 2023 08:50:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 base-ui/src/views/reportCenter/test.vue | 321 ++++++++++++++++++++++++
 1 file changed, 321 insertions(+)
 create mode 100644 base-ui/src/views/reportCenter/test.vue

diff --git a/base-ui/src/views/reportCenter/test.vue b/base-ui/src/views/reportCenter/test.vue
new file mode 100644
index 00000000..0e6e0d44
--- /dev/null
+++ b/base-ui/src/views/reportCenter/test.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="app-container">
+    <div style="margin-left:16px;">
+      <div v-show="viewState == 1">
+        <button-bar ref="btnbar" view-title="测试数据" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+        <div class="main-content">
+          <div class="searchcon">
+            <el-button size="small" class="searchbtn" @click="clicksearchShow">
+              {{ searchxianshitit }}
+            </el-button>
+            <div v-show="isSearchShow" class="search">
+              <el-form ref="queryParams" :model="queryParams" :inline="true" class="tab-header">
+                <el-form-item label="日期">
+                  <el-date-picker v-model="queryParams.date" type="date" clearable value-format="yyyy-MM-dd"
+                    placeholder="选择日期" />
+                </el-form-item>
+                <el-form-item label="类别">
+                  <el-select v-model="queryParams.type" filterable placeholder="全部" clearable>
+                    <el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue"
+                      :value="item.dictKey">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div class="btn" style="text-align: center;">
+                <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
+                <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+              </div>
+            </div>
+          </div>
+
+          <div id="main" style="width: 100%;height:100%;min-height: 480px;margin-top: 30px;"></div>
+
+          <!--  <div style="margin-top: 30px;">
+            <el-table v-loading="tableLoading" :data="thresholdAnalysisTable" border style="width: 100%">
+              <el-table-column width="60" prop="num" label="序号" type="index" :index="indexMethod" align="center" />
+              <el-table-column prop="date" label="数据日期" align="center" />
+              <el-table-column prop="stockValue" label="仓库货值(元)" align="center" />
+              <el-table-column prop="onWayGoodsValue" label="在途货值(元)" align="center" />
+              <el-table-column prop="storeValue" label="门店货值(元)" align="center" />
+              <el-table-column prop="accountBalance" label="账户余额(元)" align="center" />
+              <el-table-column prop="accountsReceivable" label="应收账款(元)" align="center" />
+              <el-table-column prop="paymentAmount" label="借款金额(元)" align="center" />
+              <el-table-column prop="threshold" label="阀值" align="center" />
+            </el-table>
+          </div>
+
+          <!-- End 项目列表 -->
+          <!--   <div class="pages">
+            <div class="tit" />
+            <!--  翻页  -->
+          <!--     <pagination v-show="thresholdAnalysisTable.length > 0" :total="queryParams.total"
+              :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="loadList" />
+          </div>
+        </div> -->
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/supervise/thresholdanalysis'
+  import ButtonBar from '@/components/ButtonBar'
+  import Pagination from '@/components/pagination'
+  import pageye from '@/components/pagination/pageye'
+  import * as echarts from 'echarts';
+
+  export default {
+    components: {
+      ButtonBar,
+      Pagination,
+      pageye
+    },
+    // components: {  },
+    data() {
+      return {
+        btndisabled: false,
+        viewState: 1, // 1、列表 2、添加 3、修改 4、查看
+        isSearchShow: false,
+        searchxianshitit: '显示查询条件',
+        tableLoading: false,
+        tableKey: 0,
+        // 类型1.全部,2.常规商品3.烟草
+        state_list: [{
+            dictKey: 1,
+            dictValue: '全部'
+          },
+          {
+            dictKey: 2,
+            dictValue: '常规商品'
+          }, {
+            dictKey: 3,
+            dictValue: '烟草'
+          }
+        ],
+        btnList: [ // 右上角按钮
+          {
+            type: 'success',
+            size: 'small',
+            icon: 'export',
+            btnKey: 'build',
+            btnLabel: '导出'
+          },
+          {
+            type: 'info',
+            size: 'small',
+            icon: 'cross',
+            btnKey: 'doClose',
+            btnLabel: '关闭'
+          }
+        ],
+        queryParams: {
+          // current: 1,
+          // size: 5,
+          // total: 0,
+          // params: {
+          customerSid: '',
+          date: "",
+          type: '',
+          // } // 类别key
+        },
+        nowDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
+      }
+    },
+    mounted() {
+      this.$refs['btnbar'].setButtonList(this.btnList)
+    },
+    created() {
+      this.loadList()
+    },
+    methods: {
+      initChart(obj) {
+        var myChart = echarts.init(document.getElementById('main'), 'dark');
+        // 绘制图表
+       const countries = [
+          'Finland',
+          'France',
+          'Germany',
+          'Iceland',
+          'Norway',
+          'Poland',
+          'Russia',
+          'United Kingdom'
+        ];
+        const datasetWithFilters = [];
+        const seriesList = [];
+        echarts.util.each(countries, function (country) {
+          var datasetId = 'dataset_' + country;
+          datasetWithFilters.push({
+            id: datasetId,
+            fromDatasetId: 'dataset_raw',
+            transform: {
+              type: 'filter',
+              config: {
+                and: [
+                  { dimension: 'Year', gte: 1950 },
+                  { dimension: 'Country', '=': country }
+                ]
+              }
+            }
+          });
+          seriesList.push({
+            type: 'line',
+            datasetId: datasetId,
+            showSymbol: false,
+            name: country,
+            endLabel: {
+              show: true,
+              formatter: function (params) {
+                return params.value[3] + ': ' + params.value[0];
+              }
+            },
+            labelLayout: {
+              moveOverlap: 'shiftY'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            encode: {
+              x: 'Year',
+              y: 'Income',
+              label: ['Country', 'Income'],
+              itemName: 'Year',
+              tooltip: ['Income']
+            }
+          });
+        });
+       var  option = {
+          animationDuration: 10000,
+          dataset: [
+            {
+              id: 'dataset_raw',
+              source: obj
+            },
+            ...datasetWithFilters
+          ],
+          title: {
+            text: '测试数据标题'
+          },
+          tooltip: {
+            order: 'valueDesc',
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            nameLocation: 'middle'
+          },
+          yAxis: {
+            name: 'Income'
+          },
+          grid: {
+            right: 140
+          },
+          series: seriesList
+        };
+        myChart.setOption(option);
+
+      },
+      // 搜索条件效果
+      clicksearchShow() {
+        this.isSearchShow = !this.isSearchShow
+        if (this.isSearchShow) {
+          this.searchxianshitit = '隐藏查询条件'
+        } else {
+          this.searchxianshitit = '显示查询条件'
+        }
+      },
+      btnHandle(btnKey) {
+        switch (btnKey) {
+          case 'build': // 导出
+            this.doBuild()
+            break
+          case 'doClose': // 关闭
+            this.doClose()
+            break
+          default:
+            break
+        }
+      },
+      loadList() {
+        this.tableLoading = true
+        let _this = this
+        req.initData2(_this.queryParams).then((resp) => {
+          _this.tableLoading = false
+          if (resp.success) {
+            console.log('11111', resp.data)
+            const data = resp.data
+            _this.tableLoading = false
+            this.initChart(resp.data)
+          } else {
+            // 根据resp.code进行异常情况处理
+            _this.analysisChartData = {}
+          }
+        }).catch(() => {
+          _this.tableLoading = false
+        })
+      },
+      // 序号
+      indexMethod(index) {
+        var pagestart = (this.queryParams.current - 1) * this.queryParams.size
+        var pageindex = index + 1 + pagestart
+        return pageindex
+      },
+      dosearch() {
+
+        this.nowDate = this.queryParams.date;
+        this.loadList();
+
+      },
+      resetQuery() {
+        this.queryParams = {
+          // current: 1,
+          // size: 5,
+          // total: 0,
+          // params: {
+          customerSid: '',
+          date: '',
+          type: '',
+          // }
+        }
+        this.loadList()
+      },
+      // 导出
+      doBuild() {
+        this.$message({
+          showClose: true,
+          type: 'success',
+          message: '功能暂未完善...'
+        })
+      },
+      // 返回
+      doClose() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }
+    }
+  }
+</script>
+
+<style>
+  .current-data {
+    width: 100%;
+    height: 500px;
+  }
+
+  .current-data .upper {
+    width: 100%;
+    height: 100px;
+  }
+
+  .current-data .lower {
+    width: 100%;
+    height: 600px;
+    float: left;
+    margin-left: 10px;
+
+  }
+</style>