20231114

.env

@@ -1,5 +1,5 @@
 NODE_ENV = 'production'
-VUE_APP_BASE_URL = 'https://erp.baozhida.cn'
+VUE_APP_BASE_URL = 'https://cold.coldbaozhida.com/api/'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_TITLE = 'ERP宝智达'
 VUE_APP_BASE_ERPOSS_API = 'https://erposs.baozhida.cn'

env.development

@@ -1,5 +1,5 @@
 NODE_ENV = 'development'
-VUE_APP_BASE_URL = 'https://erptest.baozhida.cn'
+VUE_APP_BASE_URL = 'https://cold.coldbaozhida.com/api/'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_TITLE = 'ERP宝智达'
 VUE_APP_BASE_ERPOSS_API = 'https://erposs.baozhida.cn'

env.production

@@ -1,5 +1,5 @@
 NODE_ENV = 'production'
-VUE_APP_BASE_URL = 'https://erp.baozhida.cn'
+VUE_APP_BASE_URL = 'https://cold.coldbaozhida.com/api/'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_TITLE = 'ERP宝智达'
 VUE_APP_BASE_ERPOSS_API = 'https://erposs.baozhida.cn'

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-plus": "^2.4.2",
+    "js-md5": "^0.8.3",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",

src/App.vue

@@ -31,16 +31,4 @@ body,html{
   margin: 0;
   padding: 0;
 }
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

src/api/module/login.ts

@@ -2,7 +2,7 @@ import {axios} from '@/utils/index'
 
 export const login = (data:any)=>{
     return axios({
-        url:'/IllnessNotice/List',
+        url:'/v3/Login_verification',
         method: 'post',
 		data
     })

src/components/echart/echart-bar-LR.vue

@@ -0,0 +1,178 @@
+<!-- 柱图 -->
+<template>
+    <div style="height:100%;" :id="props.id" class="myChart"></div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, reactive } from "vue";
+const props = defineProps({
+    id: {
+        type: String,
+        default: () => '',
+    },
+    lineData: {
+        type: Object,
+        default: () => { },
+    },
+})
+
+let echartData: any = reactive({
+    titles: '',//标题
+    xAxisArr: [],//x轴
+    seriesDiscount: [], //合同总金额
+    seriesRecoveries: [] //合同已回款金额
+})
+
+let echart: any = null
+let myChart: any = null
+
+onMounted(() => {
+    echart = inject('echart')
+    myChart = echart.init(document.getElementById(props.id));
+    setEchartFun();
+})
+//函数
+const setEchartFun = async () => {
+    myChart.setOption(initEcharts());
+    window.onresize = function () {
+        myChart.resize();
+    };
+}
+
+const initEcharts = () => {
+    // 绘制图表
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        title: {
+            // text: 'Rainfall vs Evaporation',
+            // subtext: echartData.titles
+        },
+        grid: {
+            left: '0%',
+            right: '1%',
+            bottom: '0%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'value'
+            }
+        ],
+        yAxis: [{
+            type: 'category',
+            axisTick: {
+                show: false
+            },
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        }],
+        series: [
+            {
+                name: 'Profit',
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'inside'
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                itemStyle: { //面积图颜色设置
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
+                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
+                            }
+                        ],
+                        globalCoord: false // 缺省为 false
+                    }
+                },
+                data: [200, 170, 240, 244, 200, 220, 210]
+            },
+            {
+                name: 'Income',
+                type: 'bar',
+                stack: 'Total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                itemStyle: { //面积图颜色设置
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
+                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
+                            }
+                        ],
+                        globalCoord: false // 缺省为 false
+                    }
+                },
+                data: [320, 302, 341, 374, 390, 450, 420]
+            },
+            {
+                name: 'Expenses',
+                type: 'bar',
+                stack: 'Total',
+                label: {
+                    show: true,
+                    position: 'left'
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                itemStyle: { //面积图颜色设置
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
+                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
+                            }
+                        ],
+                        barBorderRadius: [30, 30, 0, 0], //圓角
+                        globalCoord: false // 缺省为 false
+                    }
+                },
+                data: [-120, -132, -101, -134, -190, -230, -210]
+            }
+        ]
+    }
+}
+</script>

src/components/echart/echart-bar.vue

@@ -1,55 +1,72 @@
 <!-- 柱图 -->
 <template>
-    <div style="height:300px;" :id="props.id" class="myChart"></div>
+    <div style="height:100%;" :id="props.id" class="myChart"></div>
 </template>
-
 <script setup lang="ts">
-import { inject,onMounted,reactive } from "vue";
+import { onMounted, inject, watch, reactive } from "vue";
+import findDataFun from '@/plugins/findData'
+// 接受父组件参数，配置默认值
 const props = defineProps({
     id: {
         type: String,
         default: () => '',
     },
-    lineData:{
-        type:Object,
-        default: () => {},
+    lineData: {
+        type: Object,
+        default: () => { },
     },
-})
+    switchData: {
+        type: Boolean,
+        default: () => true,
+    }
+});
 
-let echartData:any = reactive({
-    titles:'',//标题
-    xAxisArr:[],//x轴
-    seriesDiscount:[], //合同总金额
-    seriesRecoveries:[] //合同已回款金额
-})
+let echart: any = null
+let myChart: any = null
 
-let echart:any = null
-let myChart:any = null
+let echartData: any = reactive({
+    titles: '',//标题
+    xAxisArr: [],//x轴
+    seriesDiscount: [], //合同总金额
+    seriesRecoveries: [] //合同已回款金额
+})
+watch(() => props.switchData, () => {
+    // echartData = findDataFun('line', props.lineData, props.switchData)
+    myChart.clear();
+    myChart.setOption(initEcharts());
+})
 
+watch(() => props.lineData, async () => {
+    // echartData = findDataFun('line', props.lineData, props.switchData)
+    myChart.clear();
+    myChart.setOption(initEcharts());
+})
 onMounted(() => {
     echart = inject('echart')
     myChart = echart.init(document.getElementById(props.id));
     setEchartFun();
 })
+
 //函数
-const setEchartFun = async ()=>{
+const setEchartFun = async () => {
     myChart.setOption(initEcharts());
     window.onresize = function () {
         myChart.resize();
     };
 }
 
+
 const initEcharts = () => {
     // 绘制图表
     return {
         tooltip: {
             trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+            // axisPointer: {
+            //     type: 'cross',
+            //     label: {
+            //         backgroundColor: '#6a7985'
+            //     }
+            // }
         },
         title: {
             // text: 'Rainfall vs Evaporation',
@@ -61,26 +78,39 @@ const initEcharts = () => {
             bottom: '0%',
             containLabel: true
         },
-        xAxis: [
-            {
-                boundaryGap: false,
-                type: 'category',
-                // data: echartData.xAxisArr
-            }
-        ],
+        xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu']
+        },
         yAxis: {
             type: 'value'
         },
         series: [
             {
-                // name: echartData.tooltip,
-                type: 'line',
-                smooth: true,
-                stack: 'Total',
-                areaStyle: {},
-                emphasis: {
-                    focus: 'series'
+                data: [Math.random(), Math.random(), Math.random(), Math.random()],
+                type: 'bar',
+                barMaxWidth:'10%',//宽度
+                itemStyle: { //面积图颜色设置
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: '#5389fd' },
+                            { offset: 0.5, color: '#3a6cf9' },
+                            { offset: 1, color: '#2251f7' }
+                        ],
+                        globalCoord: false // 缺省为 false
+                    },
+                    barBorderRadius: [30, 30, 0, 0] //圓角
                 },
+            },
+            {
+                data: [Math.random(), Math.random(), Math.random(), Math.random()],
+                type: 'bar',
+                barMaxWidth:'10%',//宽度
                 itemStyle: { //面积图颜色设置
                     color: {
                         type: 'linear',
@@ -89,21 +119,17 @@ const initEcharts = () => {
                         x2: 0,
                         y2: 1,
                         colorStops: [
-                            {
-                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
-                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
-                            }
+                            { offset: 0, color: '#feae4d' },
+                            { offset: 0.5, color: '#f99b45' },
+                            { offset: 1, color: '#fd8c38' }
                         ],
                         globalCoord: false // 缺省为 false
-                    }
+                    },
+                    barBorderRadius: [30, 30, 0, 0] //圓角
                 },
-                data:[120, 200, 150, 80, 70, 110, 130],
             }
         ]
     }
 }
+
 </script>

src/components/echart/echart-line.vue

@@ -0,0 +1,109 @@
+<!-- 柱图 -->
+<template>
+    <div style="height:200px;" :id="props.id" class="myChart"></div>
+</template>
+
+<script setup lang="ts">
+import { inject,onMounted,reactive } from "vue";
+const props = defineProps({
+    id: {
+        type: String,
+        default: () => '',
+    },
+    lineData:{
+        type:Object,
+        default: () => {},
+    },
+})
+
+let echartData:any = reactive({
+    titles:'',//标题
+    xAxisArr:[],//x轴
+    seriesDiscount:[], //合同总金额
+    seriesRecoveries:[] //合同已回款金额
+})
+
+let echart:any = null
+let myChart:any = null
+
+onMounted(() => {
+    echart = inject('echart')
+    myChart = echart.init(document.getElementById(props.id));
+    setEchartFun();
+})
+//函数
+const setEchartFun = async ()=>{
+    myChart.setOption(initEcharts());
+    window.onresize = function () {
+        myChart.resize();
+    };
+}
+
+const initEcharts = () => {
+    // 绘制图表
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        title: {
+            // text: 'Rainfall vs Evaporation',
+            // subtext: echartData.titles
+        },
+        grid: {
+            left: '0%',
+            right: '1%',
+            bottom: '0%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                boundaryGap: false,
+                type: 'category',
+                // data: echartData.xAxisArr
+            }
+        ],
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                // name: echartData.tooltip,
+                type: 'line',
+                smooth: true,
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                itemStyle: { //面积图颜色设置
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
+                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
+                            }
+                        ],
+                        globalCoord: false // 缺省为 false
+                    }
+                },
+                data:[120, 200, 150, 80, 70, 110, 130],
+            }
+        ]
+    }
+}
+</script>

src/components/interface/index.ts

@@ -0,0 +1,48 @@
+import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
+
+export interface EnumProps {
+  label: string // 选项框显示的文字
+  value: any // 选项框值
+  disabled?: boolean // 是否禁用此选项
+  tagType?: string // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[] // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any
+}
+
+export type SearchType =
+  | 'input'
+  | 'input-number'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'switch'
+  | 'slider'
+
+export type SearchProps = {
+  el: SearchType // 当前项搜索框的类型
+  props?: any // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  order?: number // 搜索项排序（从大到小）
+  span?: number // 搜索项所占用的列数，默认为1列
+  offset?: number // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] // 搜索项默认值
+}
+
+export interface ColumnProps<T = any>
+  extends Partial<Omit<TableColumnCtx<T>, 'children' | 'renderHeader' | 'renderCell'>> {
+  tag?: boolean // 是否是标签展示
+  isShow?: boolean // 是否显示在表格当中
+  search?: SearchProps | undefined // 搜索项配置
+  // enum?: EnumProps[] | ((params?: any) => Promise<any>) // 枚举类型（渲染值的字典）
+  isFilterEnum?: boolean // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: { label: string; value: string } // 指定 label && value 的 key 值
+  headerRender?: (row: ColumnProps) => any // 自定义表头内容渲染（tsx语法）
+  render?: (scope: { row: T }) => any // 自定义单元格内容渲染（tsx语法）
+  name?: string
+  ellipsis?: boolean
+  _children?: ColumnProps<T>[] // 多级表头
+}

src/components/logo.vue

@@ -1,8 +1,13 @@
 <!-- logo -->
 <template>
     <div class="logos">
-        <!-- <img style="height: 50px;width: 50px;" src="@/assets/img/logo3.png" alt="Element logo" /> -->
-        <p class="logos-text">深圳宝智达科技</p>
+        <img
+        style="width: 100px"
+        src="@/assets/img/element-plus-logo.svg"
+        alt="Element logo"
+      />
+        <!-- <img style="height: 50px;width: 50px;" src="@/assets/img/logo3.png" alt="Element logo" />
+        <p class="logos-text">深圳宝智达科技</p> -->
     </div>
 </template>
 

src/components/routerMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-menu :default-active="router.options.history.location" mode="horizontal" :ellipsis="false" v-if="screenWidth>=1000" router>
+    <el-menu background-color="none" :default-active="router.options.history.location" mode="horizontal" :ellipsis="false" v-if="screenWidth>=1000" router>
       <el-menu-item :index="item.path" v-for="item, index in routerData" :key="index">
         <span>{{ item.meta.title }}</span>
       </el-menu-item>
@@ -46,5 +46,6 @@ window.onresize = () => (() => {
 }
 .el-menu {
   border: none !important;
+  --el-menu-hover-bg-color: none !important;//解决去掉导航背景色后鼠标放上去颜色为黑色
 }
 </style>

src/components/table.vue

@@ -1,45 +1,67 @@
 <!--  -->
 <template>
     <div class="y-tabs">
+        123456
         <el-table :data="tableData">
             <template>
-                <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item" v-slot="scope">
+                <el-table-column v-for="(item, index) in tableColumns" :key="index" v-bind="item" v-slot="scope">
                     <slot :name="item.prop" :row="scope.row">{{ scope.row.prop }}</slot>
                 </el-table-column>
             </template>
         </el-table>
-
-        <Pagination layout="total, sizes, prev, pager, next, jumper" :pageable="pageable" :handleSizeChange="handleSizeChange"
-            :handleCurrentChange="handleCurrentChange" />
+        <Pagination layout="total, sizes, prev, pager, next, jumper" :pageable="pageable"
+            :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { ref, CSSProperties } from "vue";
 import { useTable } from '@/hooks/useTable'
-import { login } from '@/api/index'
+
+import { TableProps } from 'element-plus'
+import { ColumnProps } from './interface/index'
+interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
+    columns: ColumnProps[] // 列配置项
+    requestApi: (params: any) => Promise<any> // 请求表格数据的api ==> 必传
+    dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+    title?: string // 表格标题，目前只在打印的时候用到 ==> 非必传
+    pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
+    layout?: string
+    initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
+    border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
+    toolButton?: boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
+    selectId?: string // 当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+    displayHeader?: boolean // 是否隐藏头部
+    rowClick?: (row: any, column: any, event: any) => void // 点击行
+    selectionChange?: (row: any) => void // 选择函数
+    getRowKey?: ((row: any) => string) | string // 用于优化select勾选框
+    tableRowClassName?: (data: any) => CSSProperties
+}
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+    columns: () => [],//渲染表格
+    pagination: true,//是否显示分页
+    layout: 'total, sizes, prev, pager, next, jumper',
+    initParam: {},//请求参数
+    border: false,
+    toolButton: true,
+    selectId: 'id',
+    searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
+})
+
 
 
 // 表格操作 Hooks
-const { tableData, getTableList,pageable } = useTable(login, { page: 1, page_z: 10 }, true)
+const { tableData, getTableList, pageable, handleSizeChange, handleCurrentChange } = useTable(
+    props.requestApi, 
+    props.initParam, 
+    props.pagination, 
+    props.dataCallback
+)
 
-const columns: any = [
-    { prop: 'T_name', label: '姓名' },
-    { prop: 'T_id', label: 'id' },
-    { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
-]
 getTableList()
-const data = reactive({
-    currentPage: 1,
-    pageSize: 10,
-})
-
-const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
-}
-const handleCurrentChange = (val: number) => {
-    console.log(`current page: ${val}`)
-}
+// 接收 columns 并设置为响应式
+const tableColumns = ref<ColumnProps[]>(props.columns)
 
 
 </script>

src/components/titles.vue

@@ -0,0 +1,38 @@
+<!--  -->
+<template>
+    <div class="tit">
+        <div class="tit-biao"></div>
+        <p class="tit-name">{{ props.name }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    name:{
+        type:String,
+        default: () => '',
+    }
+})
+</script>
+<style lang="scss">
+.tit{
+    height: 20px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    &-biao{
+        width: 10px;
+        height: 10px;
+        border: 2px solid #8fb0c7;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+        margin-right: 10px;
+    }
+    &-name{
+        font-size: 13px;
+        font-weight: bold;
+        letter-spacing:2px;
+    }
+}
+
+</style>

src/hooks/useTable.ts

@@ -1,5 +1,4 @@
 import { reactive, toRefs } from 'vue'
-// 分页数据
 interface Pageable {
   pageNum: number
   pageSize: number
@@ -8,7 +7,6 @@ interface Pageable {
   small: boolean
   disabled: boolean
 }
-// 表格数据
 interface Table {
   loading: boolean
   tableData: any[]
@@ -26,8 +24,6 @@ interface Table {
  * @param dataCallback 对后台返回参数进行处理
  * @returns
  */
-
-
 export const useTable = (
   requestApi: (params: any) => Promise<any>,
   initParam: object = {},

src/plugins/findData.ts

@@ -0,0 +1,100 @@
+
+/**
+ * 
+ * @param type bar柱状图 line曲线图
+ * @param data 处理数据
+ * @param swiData 当前的swi为按月true，按年false
+ */
+
+export default function findDataFun(type:any,data:any,swiData:any){
+    if(type=='bar'){
+        return barFun(data,swiData)
+    }else{
+        return lineFun(data,swiData)
+    }
+}
+
+//筛选bar
+function barFun(data:any,swiData:any) {
+    const paramData:any = {
+        titles:'',//标题
+        xAxisArr:[],//x轴
+        seriesDiscount:[], //合同总金额
+        seriesRecoveries:[] //合同已回款金额
+    }
+    if(swiData){//按月
+        if(data.ContractMoneyByMonth){
+            data.ContractMoneyByMonth.forEach((item:any) => {
+                paramData.titles = '月度合同金额统计(元)'
+                paramData.xAxisArr.push(item.T_date + '月')
+                paramData.seriesDiscount.push(item.T_discount)
+                paramData.seriesRecoveries.push(item.T_recoveries_money)
+            });
+        }else{
+            paramData.titles = '月度合同金额统计(元)'
+            paramData.xAxisArr = []
+            paramData.seriesDiscount = []
+            paramData.seriesRecoveries = []
+
+        }
+       
+    }else{//按年
+        if(data.ContractMoneyByYear){
+            data.ContractMoneyByYear.forEach((item:any) => {
+                paramData.titles = '年度合同金额统计(元)'
+                paramData.xAxisArr.push(item.T_date + '年')
+                paramData.seriesDiscount.push(item.T_discount)
+                paramData.seriesRecoveries.push(item.T_recoveries_money)
+            });
+        }else{
+            paramData.titles = '年度合同金额统计(元)'
+                paramData.xAxisArr = []
+                paramData.seriesDiscount = []
+                paramData.seriesRecoveries = []
+        }
+        
+    }
+    return paramData
+}
+
+//筛选line
+function lineFun(data:any,swiData:any) {
+    const paramData:any = {
+        tooltip:'',
+        titles:'',//标题
+        xAxisArr:[],//x轴
+        seriesArr:[], //合同数量
+    }
+    if(swiData){//按月
+        if(data.ContractNumByMonth){
+            data.ContractNumByMonth.forEach((item:any) => {
+                paramData.tooltip = '月度(份)'
+                paramData.titles = '月度合同数量(份)'
+                paramData.xAxisArr.push(item.T_date + '月')
+                paramData.seriesArr.push(item.T_num)
+            });
+        }else{
+            paramData.tooltip = '月度(份)'
+            paramData.titles = '月度合同数量(份)'
+            paramData.xAxisArr = []
+            paramData.seriesArr = []
+        }
+        
+    }else{//按年
+        if(data.ContractNumByYear){
+            data.ContractNumByYear.forEach((item:any) => {
+                paramData.tooltip = '年度(份)'
+                paramData.titles = '年度合同数量(份)'
+                paramData.xAxisArr.push(item.T_date + '年')
+                paramData.seriesArr.push(item.T_num)
+            });
+        }else{
+            paramData.tooltip = '年度(份)'
+            paramData.titles = '年度合同数量(份)'
+            paramData.xAxisArr = []
+            paramData.seriesArr = []
+        }
+        
+    }
+    return paramData
+}

src/plugins/setFun.ts

@@ -14,6 +14,7 @@ export function exitFun (key:any) {
         case 3:
             break;
         default:
+            sessionStorage.setItem('User_tokey','')
             router.replace('/')
             break;
     } 

src/router/index.ts

@@ -23,9 +23,9 @@ router.afterEach((to, from) => {
 
 
 router.beforeEach((to, from, next) => {
-	const store = useStore()
-	const token = 1
-	if (token) {
+	const token = sessionStorage.getItem('User_tokey')
+	console.log('拦截',token)
+	if (token) {//直接放行
 		next()
 	} else {
 		//如果是登录页面路径，就直接next()
@@ -35,12 +35,9 @@ router.beforeEach((to, from, next) => {
 			next('/');
 		}
 	}
-	// if(to.name=='login'){//直接进入了登录,清除token
-	// 	let obj = store.state.userinfo
-	// 	obj.token = ''
-	// 	obj.UserId = ''
-	// 	store.commit('setInfo',obj) 
-	// }
+	if(to.name=='login'){//直接进入了登录,清除token
+		sessionStorage.setItem('User_tokey','')
+	}
 })
 
 export default router

src/utils/index.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { ElMessage, ElNotification } from 'element-plus'
 const service = axios.create({
     baseURL:process.env.VUE_APP_BASE_URL,
     timeout:3000,
@@ -19,11 +20,45 @@ service.interceptors.request.use(config =>{
 
 
 service.interceptors.response.use(response=>{
+    showStatus(response.data)
     return response
 },error=>{
     console.log('错误码',error)
 })
 
+const showStatus = (status:any) => {
+	switch (status.Code) {
+		case 200:
+			break
+		case 201:
+            ElMessage.error('登录过期，请重新登陆')
+			// store.commit('setuserInfo', {
+			// 	username: store.state.userInfo.bzd_username,
+			// 	password: store.state.userInfo.bzd_password,
+			// 	token: ''
+			// })
+			// setTimeout(function() {
+			// 	router.replace({
+			// 		name: 'login',
+			// 	})
+			// }, 1000)
+			break	
+		case 202:
+            ElMessage.error(status.Msg)
+			break
+		case 500:
+            ElMessage.error('服务器错误')
+			break
+		case 501:
+            ElMessage.error('服务未实现')
+			break
+		case 502:
+            ElMessage.error('网络错误')
+			break
+		default:
+            ElMessage.error(status.Msg)
+	}
+}
 
 export {
 	service as axios

src/views/home/index.vue

@@ -1,26 +1,42 @@
 <!--  -->
 <template>
   <div class="home">
-    <cards>
-      <template #card-tit>疫苗名称</template>
-      <template #card-content>
-        <echartbar id="bar1" :lineData="data.tableData" />
-      </template>
-    </cards>
-    <tabs :tabData="data.tabData">
-      <template #tabs-content>
-        <tables></tables>
-      </template>
-    </tabs>
+    <div class="home-main">
+      <div class="home-main-left">
+        <div class="home-main-left-item">
+          <titles name="电池租用量/库存量统计"></titles>
+          <!-- <echartline id="bar1"></echartline> -->
+        </div>
+      </div>
+      <div class="home-main-conter">
+        <!-- <echartbarlR id="bar2"></echartbarlR> -->
+      </div>
+      <div class="home-main-right">
+        <div style="flex: 1;">
+          <titles name="电池租用量/库存量统计"></titles>
+          <echartbar id="bar3"></echartbar>
+        </div>
+        <div style="flex: 1;">
+          <titles name="电池租用量/库存量统计"></titles>
+          <echartbar id="bar4"></echartbar>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, provide,ref } from "vue";
+import { reactive, provide, ref } from "vue";
 import echartbar from '@/components/echart/echart-bar.vue'
+import echartbarlR from '@/components/echart/echart-bar-LR.vue'
+
+import echartline from '@/components/echart/echart-line.vue'
+
 import cards from '@/components/card.vue'
 import tabs from '@/components/tabs.vue'
 import tables from '@/components/table.vue'
+import titles from '@/components/titles.vue'
+
 
 
 
@@ -29,15 +45,54 @@ import * as echarts from 'echarts'
 provide('echart', echarts)
 const data = reactive({
   tableData: [],
-  tabData:[
-    {label:"疫苗名称",name:"first"},
-    {label:"生产企业",name:"second"},
-    {label:"规格",name:"third"},
-    {label:"剂型",name:"fourth"},
-    {label:"单位",name:"fourth1"},
+  tabData: [
+    { label: "疫苗名称", name: "first" },
+    { label: "生产企业", name: "second" },
+    { label: "规格", name: "third" },
+    { label: "剂型", name: "fourth" },
+    { label: "单位", name: "fourth1" },
   ]
 
 })
 </script>
 <style lang="scss">
+.home {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  &-main {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+    grid-gap: 10px;
+
+    &-left {
+      // border: 5px solid red;
+      // box-sizing: border-box;
+      padding: 40px;
+    }
+
+    &-conter {
+      // border: 5px solid #000;
+      // box-sizing: border-box;
+      padding: 40px;
+
+    }
+
+    &-right {
+      // border: 5px solid red;
+      // box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      grid-gap: 80px 0;
+      padding: 40px;
+
+    }
+  }
+
+
+
+}
 </style>

src/views/layout/index.vue

@@ -18,9 +18,15 @@ import backTop from "@/components/backTop.vue";
 <style lang="scss">
 .layout {
     height: 100vh;
-    &-route{
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: url(@/assets/img/home-bg1.png) no-repeat center center;
+    background-size: cover;
+
+    &-route {
         flex: 1;
-        margin:var(--y-margin);
+        overflow: hidden;
     }
 }
 </style>

src/views/layout/menu.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="menus">
-        <logo></logo>
-        <div class=" el-menu-main">
+        <div><logo></logo></div>
+        <div class="menus-main">
             <routerMenu></routerMenu>
         </div>
         <div>
-            <popover/>
+            <popover />
         </div>
     </div>
 </template>
@@ -18,18 +18,16 @@ import logo from "@/components/logo.vue";
 
 </script>
   
-<style>
-.menus{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+<style lang="scss">
+.menus {
     height: 60px;
     padding: 0 20px;
-    background: #fff;
+    background:rgba(#fff,.2);
     user-select: none;
-    .el-menu-main{
-        flex: 1;
-    }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 5px 0 #ccc;
 }
 </style>
   

src/views/login/index.vue

@@ -7,15 +7,15 @@
                     <el-text tag="b" style="font-size: 20px;">宝智达药品出入库管理平台</el-text>
                     <el-text tag="p">Warehouse management platform</el-text>
                 </div>
-                <el-form :model="formLabelAlign">
+                <el-form :model="data.form">
                     <el-form-item>
-                        <el-input v-model="formLabelAlign.name" prefix-icon="Key" />
+                        <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
                     </el-form-item>
                     <el-form-item>
-                        <el-input v-model="formLabelAlign.region" prefix-icon="Unlock" type="password" show-password />
+                        <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
                     </el-form-item>
                     <el-form-item>
-                        <el-checkbox-group v-model="formLabelAlign.type">
+                        <el-checkbox-group v-model="data.type">
                             <el-checkbox label="记住密码" name="type" />
                         </el-checkbox-group>
                     </el-form-item>
@@ -33,13 +33,24 @@
 <script setup lang="ts">
 import router from "@/router";
 import { reactive } from "vue";
-const formLabelAlign = reactive({
-    name: '',
-    region: '',
+import {login} from "@/api/index";
+import md5 from 'js-md5'
+const data = reactive({
+    form:{
+        bzd_username: '',
+        bzd_password: '',
+    },
     type: []
 })
 const submitForm = async () => {
-    router.push('/home')
+    const froms = {...data.form}
+    froms.bzd_password = md5(froms.bzd_password)
+    const {data:resIt} = await login(froms)
+    console.log(resIt)
+    if(resIt.Code==200){
+        sessionStorage.setItem('User_tokey', resIt.Data)
+        router.push('/home')
+    }
 }
 </script>
 <style lang="scss">

src/views/sellManage/index.vue

@@ -1,13 +1,34 @@
 <!--  -->
 <template>
-    <div class="">
-        销售管理
+    <div class="sellManage">
+        <tables :requestApi="login" :columns="columns" :initParam="initParam" :dataCallback="dataCallback"></tables>
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+
+import tables from "@/components/table.vue";
+import {login} from "@/api/index";
+
+
+// 渲染表格
+const columns: any = [
+    { prop: 'T_name', label: '姓名' },
+    { prop: 'T_id', label: 'id' },
+    // { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
+]
+//请求参数
+const initParam = {T_name: '' }
+
+//函数
+const dataCallback = async ()=>{
+
+}
 </script>
 <style lang="scss">
 /* @import url(); 引入css类 */
 
+.sellManage{
+    padding: 40px;
+}
 </style>