NurseStationOperateUI/src/views/index.vue

<template>
  <div class="app-container home">
    <div class="homes">
      <div class="count" @click="goodsCount">
        <div class="el-icon-picture-outline icons"></div>
        <div class="counts">{{List.goodsCount}}</div>
        <div class="total">商品总数量</div>
      </div>
      <div class="count member" @click="patientCount">
        <div class="el-icon-user-solid icons"></div>
        <div class="counts">{{List.patientCount}}</div>
        <div class="total">会员总数量</div>
      </div>
      <div class="count order" @click="appointmentOrderCount">
        <div class="el-icon-shopping-cart-2 icons"></div>
        <div class="counts">{{List.appointmentOrderCount}}</div>
        <div class="total">预约订单总数量</div>
      </div>
      <div class="count shop"  @click="goodsOrderCount">
        <div class="el-icon-s-data icons"></div>
        <div class="counts">{{List.goodsOrderCount}}</div>
        <div class="total">商品订单总数量</div>
      </div>
    </div>
    <div class="today">
      <!-- 今日概括 -->
        <div class="todayitem">
        今日上架商品数量
        <span>{{summaryTodayList.goodsCount}}</span>
      </div>
       <div class="todayitem">
        今日新增会员数
        <span>{{summaryTodayList.patientCount}}</span>
      </div>
      <div class="todayitem">
        今日订单数
        <span>{{summaryTodayList.orderCount}}</span>
      </div>
      <div class="todayitem">
        今日交易额
        <span>{{summaryTodayList.totalPrice}}</span>
      </div>
     
    
    </div>

    <!-- <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>新医路后台管理框架</h2>
        <p>
          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了新医路管理系统。，它可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="8">
            <h2>技术选型</h2>
          </el-col>
          <el-col :span="4">
            <h2>联系方式</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>SpringCloud</li>
              <li>Nacos</li>
              <li>Sentinel</li>
              <li>MyBatis-plus</li>
              <li>Fastjson</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="4">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="4">
            <h4></h4>
            <ul>
              <li><i class="el-icon-chat-dot-round"></i> 山东新医路信息科技有限公司：<a
                href="javascript:;"
                >0531-69900398</a></li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider /> -->
  </div>
</template>

<script>
import {
  informationStatistics,
  summaryToday
} from "@/api/system/index";
export default {
  name: "index",
  data() {
    return {
      queryParams: {
        goodsCount: null,
        patientCount: null,
        orderCount: null,
        storeCount: null,
      },
      // 基本信息查询
      List:[],
      // 概述查询
      summaryTodayList:[],
      // 版本号
      version: "0.0.1",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goodsCount() {
      this.$router.push('/Shopping/operateGoodsInfo');
    },
    patientCount(){
       this.$router.push('/patient/patientArchives');
    },
    appointmentOrderCount(){
      this.$router.push('/order/order');
    },
    goodsOrderCount(){
       this.$router.push('/order/goodsOrder');
    },

    getList() {
      informationStatistics(this.queryParams).then((response) => {
        console.log(response)
        this.List = response.data;

      });
      summaryToday(this.queryParams).then((response) => {
        console.log(response)
        this.summaryTodayList = response.data;

      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },

  },
};
</script>

<style scoped lang="scss">
.count {
  color: white;
  width: 30%;
  background-image: linear-gradient(
    109.6deg,
    rgba(255, 113, 113, 0.6) 11.2%,
    #ff7171 100.2%
  );
  transition: 0.35s;
  -webkit-box-shadow: 1px 3px 12px rgb(255 113 113 / 30%);
  height: 84px;
  border-radius: 0.4em;
  font-weight: 700;
  margin-right: 20px;
}
.count:hover {
  cursor: pointer;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  z-index: 99;
}
.member {
  background-image: linear-gradient(
    109.6deg,
    rgba(255, 170, 113, 0.6) 11.2%,
    #ffaa71 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
  box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
}
.order {
  background-image: linear-gradient(
    109.6deg,
    rgba(147, 181, 225, 0.6) 11.2%,
    #93b5e1 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
  box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
}
.shop {
  background-image: linear-gradient(
    109.6deg,
    rgba(132, 140, 207, 0.6) 11.2%,
    #848ccf 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
  box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
}
.counts {
  margin-top: 20px;
  margin-left: 35%;
  line-height: 1;
  font-size: 21px;
}
.total {
  margin-top: 5px;
  margin-left: 35%;
  font-size: 13px;
}
.icons {
  // display:inline-block;
  margin-top: 30px;
  margin-left: 35px;
  position: absolute;
  font-size: 31px;
  // font-family: Ionicons;
  // speak: none;
  // font-style: normal;
  // font-weight: 400;
  // font-variant: normal;
  // text-transform: none;
  // text-rendering: optimizeLegibility;
  // line-height: 1;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // vertical-align: -0.125em;
  // text-align: center;
}
.today {
  // background: #ff7171;
  // padding: 0 30px;
  width: 100%;
  height: 300px;
  display: flex;

  margin-top: 10px;
  margin-left: -10px;
}
.todayitem {
  transition: 0.35s;
  margin: 10px;
  width: 30%;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 0.4em;
  font-weight: 700;
  background: hsla(0, 0%, 92.2%, 0.5333333333333333);
  padding: 20px;
  span {
    display: block;
    color: #ff5c58;
    font-size: 21px;
  }
}
.todayitem:hover {
  cursor: pointer;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  z-index: 99;
}
.home {
  height: 100%;
  width: 100%;
  background-size: cover;
}
.homes {
  display: flex;
}
</style>