large-vue/src/views/pad/service/canteenDialog.vue

<template>
  <div class="main-data dialog-canteen-area" @click.stop="preventDefault" @mouseleave="leaveFun">
    <div class="dialog-title">
      <img
        src="@/assets/images/main/cont_title_bg.png"
      />
      <div class="title">绿智食堂</div>
    </div>
    <div class="dialog-cont">
      <div class="dialog-left">
        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">食堂概览</span>
            </div>
            <!-- <div class="choose-area">
                <el-select v-model="canteen" @visible-change="selectOP" @change="getCanteenScoreData" placeholder="请选择">
                  <el-option
                    v-for="item in canteens"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div> -->
            <div class="data-list">
              <div v-for="(item, index) in dataList" :key="index" :class="'data-item ' + (index===0 || index===4 ? 'wid80' : 'wid130')">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_1.png" class="icon" />
                  <div class="name">{{item.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{item.data}}</div>
                  <div class="unit">{{item.unit}}</div>
                </div>
              </div>
            </div>
            <div class="data-chart">
              <bar-chart
                :chart-data="peopleBarData"
                :x-axis="peopleBarAxis"
                :yAxis="peopleBarYAxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="180px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">食堂服务满意度
              </span>
            </div>
            <div class="content">
              <div class="choose-area">
                <el-select v-model="canteen" @visible-change="selectOP" @change="getCanteenScoreData" placeholder="请选择">
                  <el-option
                    v-for="item in canteens"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
              <div style="height:20px;"></div>
              <bar-chart
                :chart-data="canteenScoreBarData"
                :x-axis="canteenScoreBarAxis"
                :y-axis="canteenScoreBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="180px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">各食堂满意度排名
                <el-tooltip class="item" effect="dark" content="分数相同按照食堂名称首字母排序" placement="top-start">
                  <img src="@/assets/images/main/tips.png" class="tips" />
                </el-tooltip>
              </span>
            </div>
            <div class="content">
              <bar-chart
                :chart-data="canteenDegreeBarData"
                :x-axis="canteenDegreeBarAxis"
                :y-axis="canteenDegreeBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="220px"
                height="240px"
              />
            </div>
          </div>
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">食堂服务人员情况
                <el-tooltip class="item" effect="dark" content="人数相同按照食堂名称首字母排序" placement="top-start">
                  <img src="@/assets/images/main/tips.png" class="tips" />
                </el-tooltip>
              </span>
            </div>
            <div class="content">
              <bar-chart
                :chart-data="canteenTotalRankBarData"
                :x-axis="canteenTotalRankBarAxis"
                :y-axis="canteenTotalRankBarYaxis"
                :grid="barGrid" :legend="barLegend"
                y-color="#FFF"
                l-color="#FFF"
                width="220px"
                height="240px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">资质证件</span>
            </div>
            <div class="content">
              <div class="choose-area">
                <el-select v-model="canteen" @visible-change="selectOP" @change="getQualificationData" placeholder="请选择">
                  <el-option
                    v-for="item in canteens"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>

              <div class="card-cont">
                <div class="card-list">
                  <img src="@/assets/images/service_new/img_7.png" />
                  <div class="card-info">
                    <div class="name">{{healthNum.name}}</div>
                    <div class="value">
                      <div>{{healthNum.value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                </div>

                <div class="card-list">
                  <img src="@/assets/images/service_new/img_8.png" />
                  <div class="card-info">
                    <div class="name">{{licenceNum.name}}</div>
                    <div class="value">
                      <div>{{licenceNum.value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">菜品信息</span>
            </div>
            <div class="content">
              <div class="food-cont">
                <!-- <div class="food-list" @click="foodsClick(1)">
                  <div class="value">
                    <div>{{dailyMenu.value}}</div>
                    <div class="unit">道</div>
                  </div>
                  <div class="name">{{dailyMenu.name}}</div>
                </div> -->

                <div class="food-list" @click="foodsClick(0)">
                  <div class="value">
                    <div>{{weeklyCuisine.value}}</div>
                    <div class="unit">道</div>
                  </div>
                  <div class="name">{{weeklyCuisine.name}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">其他数据信息</span>
            </div>
            <div class="content">
              <div class="other-cont">
                <div class="other-list">
                  <div class="value">
                    <div>{{foodVoting.value}}</div>
                    <div class="unit">人</div>
                  </div>
                  <div class="name">{{foodVoting.name}}</div>
                </div>

                <div class="other-list">
                  <div class="value">
                    <div>{{clearPlate.value}}</div>
                    <div class="unit">人</div>
                  </div>
                  <div class="name">{{clearPlate.name}}</div>
                </div>

                <div class="other-list">
                  <div class="value">
                    <div>{{culinaryExchange.value}}</div>
                    <div class="unit">条</div>
                  </div>
                  <div class="name">{{culinaryExchange.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-right">
        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">食堂安全管理</span>
            </div>
            <div class="data-list">
              <div class="data-item">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_1.png" class="icon" />
                  <div class="name">{{sample.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{sample.value}}</div>
                  <div class="unit">个</div>
                </div>
              </div>

              <div class="data-item">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_1.png" class="icon" />
                  <div class="name">{{positive.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{positive.value}}</div>
                  <div class="unit">个</div>
                </div>
              </div>

              <div class="data-item">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_1.png" class="icon" />
                  <div class="name">{{negative.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{negative.value}}</div>
                  <div class="unit">个</div>
                </div>
              </div>
            </div>
            <div class="rate-area">
              <div class="rate-item">
                <img
                  src="@/assets/images/main/rate_bg.png"
                  class="icon"
                  alt=""
                />
                <div class="rate">
                  <div class="rate-data">
                    <div class="data" v-if="ingredients.value < 100">{{ingredients.value}}</div>
                    <div class="data" v-else style="color:#00FFFF;">{{ingredients.value}}</div>
                    <div class="unit">%</div>
                  </div>
                  <div class="desc">{{ingredients.name}}</div>
                </div>
              </div>
              <div class="rate-item">
                <img
                  src="@/assets/images/main/rate_bg.png"
                  class="icon"
                  alt=""
                />
                <div class="rate">
                  <div class="rate-data">
                    <div class="data" v-if="leaveSample.value < 100">{{leaveSample.value}}</div>
                    <div class="data" v-else style="color:#00FFFF;">{{leaveSample.value}}</div>
                    <div class="unit">%</div>
                  </div>
                  <div class="desc">{{leaveSample.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <!-- <div class="dialog-item">
            <div class="content-title">
              <div class="title">能耗信息（本月）</div>
            </div>
            <div class="content">
              <div
                class="energy-list"
                v-for="(item, index) in energyData"
                :key="index"
              >
                <img src="@/assets/images/main/data_bg3.png" class="icon" />
                <div class="energy-info">
                  <div class="desc">{{ item.name }}</div>
                  <div class="num-info">
                    <div class="num">{{ item.data }}</div>
                    <div v-if="Number(index) === 1" class="unit">KJ</div>
                    <div v-else class="unit">m³</div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">热销菜品排行</span>
            </div>
            <div class="content">
              <bar-chart
                :chart-data="foodsRankBarData"
                :x-axis="foodsRankBarAxis"

                position="left"
                :yAxis="{
                  name: '受欢迎度(百分制)',
                  nameTextStyle: {
                    color: '#fff',
                    padding: [0,0,0,20]
                  },
                  axisLabel: {
                    color: 'white',
                  },
                  splitLine: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitArea: false,
                }"
                :grid="foodsRankBarGrid"
                :legend="foodsRankBarLegend"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="200px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item">
            <div class="content-title">
              <div class="title">绿智食堂参评情况</div>
            </div>
            <div class="content">
              <div class="data-content">
                <div class="data-left">
                  <div class="data-item">
                    <div class="data-fir">
                      <img src="@/assets/images/service_new/img_1.png" class="icon" />
                      <div class="name">参评绿智食堂</div>
                    </div>
                    <div class="data-snd">
                      <div class="num">{{participate.value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                  <div class="data-item">
                    <div class="data-fir">
                      <img src="@/assets/images/service_new/img_1.png" class="icon" />
                      <div class="name">已完成单位</div>
                    </div>
                    <div class="data-snd">
                      <div class="num">{{completed.value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                </div>
                <div class="data-right">
                  <el-progress
                    type="circle"
                    :width="112"
                    :stroke-width="8"
                    :percentage="rate.value"
                    color="#00FFFF"
                    style="color:rgba(0, 247, 255, 0.18);"
                  ></el-progress>
                  <div class="name">{{ rate.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">就餐人数</span>
            </div>
            <div class="content">
              <pie-chart
                position="left"
                :chart-data="diningPieData"
                :legend="diningPieLegend"
                :center="['35%','40%']"
                width="220px"
                height="180px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item">
            <div class="content-title">
              <div class="title">智慧食堂订单数量</div>
            </div>
            <div class="content">
              <pie-chart
                :center="['35%','40%']"
                :chart-data="canteenPieData"
                :legend="canteenPieLegend"
                width="220px"
                height="180px"
              />
            </div>
          </div>
          <div class="dialog-item">
            <div class="content-title">
              <span class="title">员工服务订单数量</span>
            </div>
            <div class="content">
              <pie-chart
                position="left"
                :chart-data="employeePieData"
                :legend="employeePieLegend"
                :center="['35%','40%']"
                width="220px"
                height="180px"
              />
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">电子餐券</span>
            </div>
            <!-- <div class="choose-area">
                <el-select v-model="canteen" @visible-change="selectOP" @change="getCanteenScoreData" placeholder="请选择">
                  <el-option
                    v-for="item in canteens"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div> -->
            <div class="content">
<!--              <div class="choose-area">-->
<!--                <el-select v-model="canteen" @visible-change="selectOP" placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in canteens"-->
<!--                    :key="item"-->
<!--                    :label="item"-->
<!--                    :value="item"-->
<!--                  >-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->

              <bar-chart
                :chart-data="electronicVouchersBarData"
                :x-axis="electronicVouchersBarAxis"
                :yAxis="{
                  name: '',
                  nameTextStyle: {
                    color: '#fff',
                    padding: [0,20,0,0],
                    fontSize:14
                  },
                  axisLabel: {
                    color: 'white',
                  },
                  splitLine: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitArea: false,
                }"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="180px"
              />
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import LineChart from "@/components/Echarts/LineChart";
import PieChart from "@/components/Echarts/PieChart";
import BarChart from "@/components/Echarts/BarChart.vue";
import echarts from "echarts";

import {
  getCanteenData,
  getCanteenScoreData,
  getCanteenStaff,
  getCanteenDegreeData,
  getQualificationData,
  getFoodData,
  getOtherData,
  getSafetyData,
  getFoodRankData,
  geParticipateData,
  getDiningPieData,
  getSmartCanteenPieData,
  getSmartEmployeePieData,
  getElectronicVouchersData,
  getCanteenNameList
} from "@/api/screen/service";


export default {
  name: "CanteenDialog",
  components: {
    BarChart,
    PieChart,
    LineChart,
  },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  data() {
    return {
      select: 0,
      barYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine:{
          show:false
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },
      //食堂概况
      dataList: [],
      peopleBarData: [],
      peopleBarAxis: {},
      peopleBarYAxis: {},

      //食堂满意服务
      canteen: "",
      canteens: [],
      canteenScoreBarData: [],
      canteenScoreBarAxis: {},
      canteenScoreBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name:"",
        nameTextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        axisLabel: {
          color: "white", // 设置纵坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#0A7C80",
          },
        },
        splitArea: false,
      },

      //各食堂满意度排名
      canteenDegreeBarData: [],
      canteenDegreeBarAxis: {},
      canteenDegreeBarGrid: {
        top: 30,
            bottom: 0,
            left: "8%",
            right: "0%",
            containLabel: true,
      },
      canteenDegreeBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name:"",
        nameTextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#0A7C80",
          },
        },
        splitArea: false,
      },

      //各单位统计排行
      canteenTotalRankBarData: [],
      canteenTotalRankBarAxis: {},
     
      barGrid: {},
      barLegend: {},
      canteenTotalRankBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name:"",
        nameTextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#0A7C80",
          },
        },
        splitArea: false,
      },

      //资质证件
      healthNum: {},
      licenceNum: {},

      //菜品信息
      dailyMenu: {},
      weeklyCuisine: {},

      //其他数据信息
      clearPlate: {},
      culinaryExchange: {},
      foodVoting: {},

      //食堂安全管理
      negative: {},
      positive: {},
      sample: {},
      ingredients: {},
      leaveSample: {},

      //能耗信息
      energyData: [],

      //热销菜品
      foodsRankBarData: [],
      foodsRankBarAxis: {},
      foodsRankBarGrid: {},
      foodsRankBarLegend: {},

      //绿智食堂参评情况
      participate: {},
      completed: {},
      rate: {},

      //就餐情况
      diningPieData: [],
      diningPieLegend: {
        bottom: 70,
        orient: "vertical",
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },

      //智慧食堂
      canteenPieData: [],
      canteenPieLegend: {
        top: 40,
        orient: "vertical",
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      canteenPieCenter: ["50%", "50%"],

      //员工服务
      employeePieData: [],
      employeePieLegend: {
        top: 40,
        orient: "vertical",
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },

      //电子餐券
      electronicVouchersBarData: [],
      electronicVouchersBarAxis: {},
    };
  },
  created() {
    //食堂列表
    this.getCanteenNameList();

    //食堂概况
    this.getCanteenData();


    //各食堂满意度排名
    this.getCanteenDegreeData();

      //食堂服务人员情况
      this.getCanteenStaff();

    //菜品信息
    this.getFoodData();

    //其他数据信息
    this.getOtherData();

    //食堂安全管理
    this.getSafetyData();

    //热销菜品排行
    this.getFoodRankData();

    //绿智食堂参评情况
    this.geParticipateData();

    //就餐情况
    this.getDiningPieData();

    //智慧食堂
    this.getSmartCanteenPieData();

    //员工服务
    this.getEmployeePieData();

    //电子餐券
    this.getElectronicVouchersData();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {

  },
  methods: {

    // 下拉触发时间
    selectOP(value){
      if(value){
       this.select = 1;
      }else{
        this.select = 0;
      }
      console.log(value,"==================")
    },

    //获取食堂列表
    getCanteenNameList() {
      getCanteenNameList(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          let canteens = [];
          res.data.forEach((item)=>{
            canteens.push(item.canteenNum)
          })
          this.canteens = canteens;
          this.canteen = canteens[0];

          //食堂服务满意度
          this.getCanteenScoreData();

          //资质证件
          this.getQualificationData();
        }
      });
    },

    //获取数据概况
    getCanteenData() {
      getCanteenData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.dataList = [{
            name: "食堂数量",
            data: res.data.canteenTotalNumber.value > 10000 ? parseFloat(res.data.canteenTotalNumber.value/10000).toFixed(2) : res.data.canteenTotalNumber.value,
            unit: res.data.canteenTotalNumber.value > 10000 ? "万个":'个'
          },{
            name:"自建食堂数量",
            data: res.data.selfCanteenNumber.value > 10000 ? parseFloat(res.data.selfCanteenNumber.value/10000).toFixed(2) : res.data.selfCanteenNumber.value,
            unit: res.data.selfCanteenNumber.value > 10000 ? "万个":'个'
          },{
            name:"外包食堂数量",
            data: res.data.outsourceCanteenNumber.value > 10000 ? parseFloat(res.data.outsourceCanteenNumber.value/10000).toFixed(2) : res.data.outsourceCanteenNumber.value,
            unit: res.data.outsourceCanteenNumber.value > 10000 ? "万个":'个'
          },{
            name:"座位数量",
            data: res.data.seatsNum.value > 10000 ? parseFloat(res.data.seatsNum.value/10000).toFixed(2) : res.data.seatsNum.value,
            unit: res.data.seatsNum.value > 10000 ? "万个":'个'
          },{
            name:"食堂面积",
            data: res.data.areaNum.value > 10000 ? parseFloat(res.data.areaNum.value/10000).toFixed(2) : res.data.areaNum.value,
            unit: res.data.areaNum.value > 10000 ? "万㎡":'㎡'
          },{
            name:"食堂证件上传数",
            data: res.data.licenceNum.value > 10000 ? parseFloat(res.data.licenceNum.value/10000).toFixed(2) : res.data.licenceNum.value,
            unit: res.data.licenceNum.value > 10000 ? "万个":'个'
          },
            {
            name:"健康证上传数",
            data: res.data.healthNum.value > 10000 ? parseFloat(res.data.healthNum.value/10000).toFixed(2) : res.data.healthNum.value,
            unit: res.data.healthNum.value > 10000 ? "万个":'个'
          },
            {
            name:"服务就餐人数",
            data: res.data.serviceDinersNum.value > 10000 ? parseFloat(res.data.serviceDinersNum.value/10000).toFixed(2) : res.data.serviceDinersNum.value,
            unit: res.data.serviceDinersNum.value > 10000 ? "万人":'人'
          }]

          this.peopleBarData = [
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#1890FF",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [res.data.personnelNum.value, 0, 0 ,0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#00FF9D",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0, res.data.serviceNum.value, 0, 0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#7565EF",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0, 0, res.data.chefsNum.value, 0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#43DCDB",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0, 0, 0, res.data.managementNum.value],
            },
          ];
          this.peopleBarAxis = {
            type: "value",
            boundaryGap: [0, 0.01],
            nameTextStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#0A7C80",
              },
            },
            splitArea: false,
          };
          this.peopleBarYAxis = {
            type: "category",
            data: ["其他人员", "服务人员", "厨师人数", "管理人员"],
            axisLabel: {
              color: "white", // 设置纵坐标轴字体颜色为红色
            },
            axisTick: {
              show: false,
            },
            splitArea: false,
            axisLine: {
              show: false,
            },
          };
        }
      });
    },

    //获取食堂服务满意度
    getCanteenScoreData() {
      getCanteenScoreData(this.$props.appOrg, this.canteen).then((res) => {
        if (Number(res.code) === 200) {
          let firData = [];
          let sndData = [];
          let thdData = [];
          let fouData = [];
          //菜品卫生
          if(res.data.dishScore.value >= 90){
            firData.push(res.data.dishScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.dishScore.value >= 70){
            sndData.push(res.data.dishScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.dishScore.value >= 50){
            thdData.push(res.data.dishScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.dishScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }
          //菜品口味
          if(res.data.tasteScore.value >= 90){
            firData.push(res.data.tasteScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.tasteScore.value >= 70){
            sndData.push(res.data.tasteScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.tasteScore.value >= 50){
            thdData.push(res.data.tasteScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.tasteScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }
          //服务态度
          if(res.data.attitudeScore.value >= 90){
            firData.push(res.data.attitudeScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.attitudeScore.value >= 70){
            sndData.push(res.data.attitudeScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.attitudeScore.value >= 50){
            thdData.push(res.data.attitudeScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.attitudeScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }
          //餐具卫生
          if(res.data.tablewareScore.value >= 90){
            firData.push(res.data.tablewareScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.tablewareScore.value >= 70){
            sndData.push(res.data.tablewareScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.tablewareScore.value >= 50){
            thdData.push(res.data.tablewareScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.tablewareScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }
          //菜品种类
          if(res.data.typesScore.value >= 90){
            firData.push(res.data.typesScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.typesScore.value >= 70){
            sndData.push(res.data.typesScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.typesScore.value >= 50){
            thdData.push(res.data.typesScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.typesScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }
          //就餐体验
          if(res.data.diningScore.value >= 90){
            firData.push(res.data.diningScore.value);
            sndData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if(res.data.diningScore.value >= 70){
            sndData.push(res.data.diningScore.value);
            firData.push(0);
            thdData.push(0);
            fouData.push(0);
          }
          else if (res.data.diningScore.value >= 50){
            thdData.push(res.data.diningScore.value);
            firData.push(0);
            sndData.push(0);
            fouData.push(0);
          }
          else{
            fouData.push(res.data.diningScore.value);
            firData.push(0);
            sndData.push(0);
            thdData.push(0);
          }

          this.canteenScoreBarData = [
            {
              name: "非常满意",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#00FF9D",
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 30,
              data: firData,
            },
            {
              name: "满意",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#43DCDB",
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 30,
              data: sndData,
            },
            {
              name: "一般",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#2F82FE",
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 30,
              data: thdData,
            },
            {
              name: "不满意",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#7565EF",
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 30,
              data: fouData,
            },
          ];
          this.canteenScoreBarAxis = {
            type: "category",
            data: [res.data.dishScore.name, res.data.tasteScore.name, res.data.attitudeScore.name, res.data.tablewareScore.name, res.data.typesScore.name, res.data.diningScore.name],
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: 0,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#465A64",
              },
            },
          };
        }
      });
    },

    //各食堂满意度排名
    getCanteenDegreeData() {
      getCanteenDegreeData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.canteenDegreeBarData = [
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: res.data.yData.color,
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 20,
              data: res.data.yData.yList,
            },
          ];
          this.canteenDegreeBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              interval: 0,
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: -20,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#465A64",
              },
            },
          };
        }
      });
    },

     //食堂服务人员情况
     getCanteenStaff() {
      getCanteenStaff(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          
          this.canteenTotalRankBarData = [
          {
          name: "厨师",
          type: "bar",
          itemStyle: {
            color: "#43DCDB",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 20,
          data: [res.data[0].chefs],
        },
        {
          name: "服务员",
          type: "bar",
          itemStyle: {
            color: "#efb164",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 20,
          data: [res.data[0].service],
        },
          ];
          
      this.barGrid = {
        top: 30,
        bottom: 0,
        left: "2%",
        right: "2%",
        containLabel: true,
      };

      this.barLegend = {
        right: 0,
        top: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      };
          this.canteenTotalRankBarAxis = {
            type: "category",
            data: [res.data[0].canteenName,],
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: -20,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#465A64",
              },
            },
          };
          
        }
      });
    },




    //获取资质证件
    getQualificationData() {
      getQualificationData(this.$props.appOrg, this.canteen).then((res) => {
        if (Number(res.code) === 200) {
          this.healthNum = res.data.healthNum;
          this.licenceNum = res.data.licenceNum;
        }
      });
    },

    //获取菜品信息
    getFoodData() {
      getFoodData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.dailyMenu = res.data.dailyMenu;
          this.weeklyCuisine = res.data.weeklyCuisine;
        }
      });
    },

    //其他数据信息
    getOtherData() {
      getOtherData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.clearPlate = res.data.clearPlate;
          this.culinaryExchange = res.data.culinaryExchange;
          this.foodVoting = res.data.foodVoting;
        }
      });
    },

    //食堂安全管理
    getSafetyData() {
      getSafetyData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.negative = res.data.negative;
          this.positive = res.data.positive;
          this.sample = res.data.sample;
          this.ingredients = res.data.ingredients;
          this.leaveSample = res.data.leaveSample;
        }
      });
    },

       //热销菜品排行
       getFoodRankData() {
        getFoodRankData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.foodsRankBarData = [
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: res.data.yData.color,
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 20,
              data: res.data.yData.yList,
            },
          ];
          this.foodsRankBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              interval: 0,
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: -20,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#465A64",
              },
            },
          };
        }
      });
    },


    //绿智食堂参评情况
    geParticipateData() {
      geParticipateData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.participate = res.data.participate;
          this.completed = res.data.completed;
          this.rate = res.data.rate;
        }
      });
    },

    //就餐情况
    getDiningPieData() {
      getDiningPieData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.diningPieData = res.data;
        }
      });
    },

    //智慧食堂
    getSmartCanteenPieData() {
      getSmartCanteenPieData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.canteenPieData = res.data;
        }
      });
    },

    //员工服务
    getEmployeePieData() {
      getSmartEmployeePieData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.employeePieData = res.data;
        }
      });
    },

    //电子餐券
    getElectronicVouchersData() {
      getElectronicVouchersData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.electronicVouchersBarData = [
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: res.data.yData.color,
                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 30,
              data: res.data.yData.yList,
            },
          ];
          this.electronicVouchersBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate:0,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#465A64",
              },
            },
          };
        }
      });
    },

    //点击菜谱
    foodsClick(e){
      this.$emit("foodsClick",e);
    },

     //鼠标移出
     leaveFun(){
      if(this.select === 1){
        return
      }
      setTimeout(()=>{
        this.$emit("closeDialog")
      },200)
    },

    preventDefault() {

    },

    showContent(percent){
      return percent;
    }
  },
};
</script>

<style lang="scss">
.dialog-canteen-area {
  overflow: hidden;
  width: 1125px;
  height:1000px;
  background: url("../../../assets/images/main/components_max_bg.png") no-repeat;
  background-size: cover;
  padding: 19px 15px 11px 15px;

  .dialog-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 284px;
      height: 32px;
    }
    .title {
      font-size: 20px;
      font-weight: 900;
      font-family: "PingFangSC";
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -5px;
      color: #fff;
    }
  }

  .dialog-cont {
    width:100%;
    height: 920px;
    padding: 15px;
    overflow-y: scroll;
    background: url("../../../assets/images/main/components_max_cont.png") no-repeat;
    background-size: 100% 100%;

    .dialog-left{
      width: 520px;
      float: left;
    }
    .dialog-right{
      width: 520px;
      float: right;
    }
  }

  .dialog-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .dialog-item{
      width: calc(50% - 20px);
    }

    .dialog-item-cont{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top:40px;
    }

    .wid100 {
      width: 100%;

      .content-title {
        width: 100%;
        background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
      }
    }
  }

  .content-title {
    width: 100%;
    height: 26px;
    background: url("../../../assets/images/main/title_pro.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 16px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 25px;
    .title {
      display: block;
      position: relative;
      top:-5px;
    }
  }

  .data-chart {
    margin-top: 15px !important;
    margin-bottom: 5px !important;
  }

  .data-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start !important;
    flex-wrap: wrap;
    width: 100%;

    .data-item.wid80 {
      width:90px;
    }
    .data-item.wid130 {
      width:130px;
    }
    .data-item{
      width:150px;
      border-right: 0 !important;
      margin-top:25px;

      .data-fir{
        width:100%;
        display: flex;
        align-items: center;

        .icon{
          width: 15px;
          height: 15px;
          margin-right: 6px;
        }
        .name{
          font-size: 14px;
          color:#FFFFFF;
        }
      }
      .data-snd{
        width:100%;
        display: flex;
        align-items: baseline;

        .num{
          font-size: 36px;
          color:#00FFFF;
          font-family: 'electronicFont';
        }
        .unit{
          font-size:12px;
          color:#00FFFF;
          font-weight: 500;
        }
      }
    }
  }

  .choose-area {
    width: 148px;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    font-size: 14px;
    color: #00ffff;
    background: url("../../../assets/images/main/choose_bg4.png") no-repeat;
    cursor: pointer;
    .el-input {
      input {
        background: rgba(255, 255, 255, 0);
        color: #00ffff;
        border: none;
        padding: 0;
      }
    }
  }

  .card-cont{
    width:100%;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;

    .card-list{
      width:50%;
      display: flex;
      align-items: center;

      img{
        width:70px;
        height:70px;
      }
      .card-info{
        padding-left:20px;

        .name{
          font-size:22px;
          color:#FFFFFF;
          font-weight: 500;
        }
        .value{
          display: flex;
          align-items: center;
          color:#00FFFF;
          font-size: 32px;
          // font-weight: bold;
          padding-top:5px;
          // font-family: 'electronicFont';

          .unit{
            font-size:22px;
            color:#FFFFFF;
            font-weight: 500;
            position: relative;
            top:3px;
            left:2px;
          }
        }
      }
    }
  }

  .food-cont{
    width:100%;
    padding:0 15px;
    display: flex;
    justify-content: center;
    align-items: center;

    .food-list{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .value{
        width:88.8px;
        height:81.6px;
        background: url("../../../assets/images/service_new/img_9.png") no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:25px;
        color:#00FFFF;
        font-family: 'electronicFont';
        padding-bottom: 18px;

        .unit{
          font-size:10px;
          font-weight: 500;
          position: relative;
          top:3px;
          left:2px;
        }
      }
      .name{
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        font-weight: 500;
        padding-top:4px;
      }
    }
  }

  .other-cont{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .other-list{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .value{
        width:68px;
        height:68px;
        background: url("../../../assets/images/service_new/img_10.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:25px;
        color:#ffffff;
        font-family: 'electronicFont';

        .unit{
          font-size:10px;
          font-weight: 500;
          position: relative;
          top:3px;
          left:2px;
        }
      }
      .name{
        width: 60px;
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        font-weight: 500;
        padding-top:4px;
      }
    }
  }

  .rate-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    .rate-item {
      flex: 1;
      position: relative;
    }
    img {
      width: 237px;
      height: 137px;
    }
    .rate {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: absolute;
      top: 5px;
      left: -5px;
      color: #fff;
      .rate-data {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        color: #ffba44;
        .data {
          font-family: "electronicFont";
          font-size: 30px;
        }
        .unit {
          font-size: 12px;
        }
      }
      .desc {
        font-size: 12px;
        width: 58px;
        text-align: center;
      }
    }
  }

  .energy-list {
    display: flex;

    .icon {
      display: block;
      width: 70px;
      height: auto;
    }
    .energy-info {
      padding-left: 2px;

      .desc {
        font-size: 12px;
        color: #ffffff;
        font-weight: bold;
      }
      .num-info {
        width: 100%;
        padding-top: 2px;
        display: flex;
        align-items: center;

        .num {
          font-size: 30px;
          color: #00FFFF;
          font-weight: bold;
          font-family: "electronicFont";
        }
        .unit {
          font-size: 12px;
          color: #00ffff;
          font-weight: 500;
          position: relative;
          top: 4px;
        }
        .mar {
          margin-left: 20px;
        }
      }
    }
  }

  .data-content{
    display: flex;
    justify-content: space-between;
    padding-top:10px;

    .mar{
      margin-bottom: 15px;
    }
    .data-left{
      width: auto;

      .data-item{
        width:auto;
        margin-bottom: 23px;

        .data-fir{
          display: flex;
          align-items: center;

          .icon{
            width: 15px;
            height: 15px;
            margin-right: 6px;
          }
          .name{
            font-size: 14px;
            color:#FFFFFF;
          }
        }
        .data-snd{
          display: flex;
          align-items: center;
          padding-top:2px;

          .num{
            font-size: 32px;
            color:#00FFFF;
            font-family: 'electronicFont';
          }
          .unit{
            font-size:12px;
            color:#00FFFF;
            font-weight: 500;
            position: relative;
            top:5px;
            left:2px;
          }
        }
      }
    }
    .data-right{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 2px;
      align-items: center;

      .name{
        width:75px;
        font-size: 18px;
        color:#FFFFFF;
        font-family: 'fashionZh';
        padding-top:10px;
        text-align: center;
      }
    }
  }






  .content {
    margin-top: 20px;
  }



  .camera-cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .camera-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
      .num-info {
        display: flex;
        justify-content: center;
        align-items: center;

        .num {
          font-size: 30px;
          color: #00FFFF;
          font-weight: bold;
          font-family: "electronicFont";
          padding-left: 4px;
        }
        .num2 {
          font-size: 30px;
          color: #00FFFF;
          font-weight: bold;
          font-family: "electronicFont";
          padding-left: 4px;
        }
        .unit {
          font-size: 12px;
          color: #00ffff;
          font-weight: 500;
          position: relative;
          top: 3px;
        }
      }
      .num-info2{
        position: absolute;
        top: 15px;
        .unit2{
          color: #00ffff;
          font-size: 12px;
        }
      }
      .icon {
        display: block;
        width: 46px;
        height: auto;
      }
      .icon2 {
        display: block;
        width: 101px;
        height: auto;
      }
      .title {
        font-size: 12px;
        color: #ffffff;
        margin-top: 6px;
        font-weight: normal;
      }
    }
  }
  .camera-other {
    position: relative;
    .num-info {
      position: absolute;
      top: 0;
      left: 0;
      width: 67px;
      height: 67px;
      display: flex;
      align-items: baseline;
      justify-content: center;
      color: #fff;
      .num3 {
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        font-family: "electronicFont";
      }
      .unit {
        font-size: 12px;
        color: #ffffff !important;
      }
    }
    .icon2 {
      width: 67px !important;
      height: 67px !important;
    }
    .title {
      width: 67px;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
    }
  }
  .foods-item {
    .icon2 {
      display: block;
      width: 74px !important;
      height: auto;
    }
  }
  .other-item {
    .icon2 {
      display: block;
      width: 67px !important;
      height: auto;
    }
  }
  .order-type {
    .camera-item {
      position: relative;
      .icon2 {
        width: 112px !important;
      }
      .num-info {
        position: absolute;
        left: 0;
        top: 0;
        color: #00ffff;
        .name {
          font-size: 12px;
        }
      }
    }
  }
  .use-energy {
    width: 100%;
    padding: 0 15px;

    .use-energy-fir {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;

      .num {
        font-weight: 900;
        color: #00ffff;
        padding: 0 8px;
      }
    }

    .use-energy-snd {
      width: 100%;
      margin-top: 15px;
      display: flex;
      align-items: center;

      .use-energy-snd-list {
        display: flex;
        align-items: center;

        .icon {
          display: block;
          width: 34px;
          height: 34px;
        }
        .use-energy-snd-info {
          padding-left: 4px;

          .desc {
            font-size: 12px;
            color: #ffffff;
          }
          .num-info {
            display: flex;
            align-items: center;

            .num {
              font-size: 24px;
              color: #00FFFF;
              font-weight: bold;
              font-family: "electronicFont";
            }
            .unit {
              font-size: 12px;
              color: #00ffff;
              font-weight: 500;
              position: relative;
              top: 4px;
              left: 2px;
            }
          }
        }
      }
      .use-energy-snd-list:last-child {
        margin-left: 36px;
      }
    }
  }

  .list-area {
    display: flex;
    width: 90%;
    flex-direction: column;

    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 12px;
      color: #ffffff;
      margin-bottom: 10px;
      .item-1 {
        width: 35%;
      }
      .item-2 {
        flex: 1;
      }
      .item-3 {
        width: 25%;
      }
      .cur {
        color: #ff8c00;
      }
    }
    .list-title {
      color: #00ffff !important;
      padding: 4px 0;
      background: url("../../../assets/images/main/title_line.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 10px !important;
    }
  }

  .canteen-data {
    .data-item {
      margin-bottom: 20px;
      border: none !important;
    }
  }

  .tips{
    width: 12px;
    height: 12px;
    /* margin: 0 0 -4px 10px; */
    position: relative;
    top: -7px;
    left: 1px;
  }

  .case-area {
    background: url("../../../assets/images/main/data_bg6.png") no-repeat;
    background-size: 100% 100%;
    padding: 16px 38px 20px;
    .img-area {
      position: relative;
      img {
        width: 151px;
      }
      span {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        color: #fff;
      }
    }
    .data-item {
      border: none !important;
      img {
        width: 50px;
        margin-top: -10px;
      }
      .desc {
        font-size: 12px;
        color: #ffffff;
      }
    }
  }

  .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text{
    color: #FFFFFF !important;
    font-family: "fashionZh" !important;
    font-size: 20px !important;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
}
</style>