代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>丽水市教育系统食堂采购溯源大数据</title>
<link rel="stylesheet" href="./css/slick.css">
<link href="./css/index.css" media="all" rel="stylesheet">
<link href="./css/aqsy.css" media="all" rel="stylesheet">
<link rel="stylesheet" href="./css/tracesource.css">
<style>
html {
font-size: 62.5% !important;
/* 10÷16=62.5% */
}
@media only screen and (min-width: 481px) {
html {
font-size: 80% !important;
/* 15.04÷16=94% */
}
}
@media only screen and (min-width: 720px) {
html {
font-size: 90% !important;
/* 17.44÷16=109% */
}
}
@media only screen and (min-width: 1920px) {
html {
font-size: 100% !important;
/* 20÷16=125% */
}
w .siper-container {
width: 900px !important;
height: 600px !important;
}
}
/* 4k分辨率下 */
@media only screen and (min-width: 3840px) {
html {
font-size: 300% !important;
/* 20÷16=125% */
}
}
/* 4k分辨率下结束 */
</style>
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<img class="header-bg" src="./images/header-bg.png" />
<div class="header-content">
<div class="left-content header-left">
<div class="time-container">
<img src="./images/header-time.png" />
<div class="time-content">
<p id="time"></p>
<span id="date"></span>
</div>
</div>
<div class="time-btn time-btn-left">
<img src="./images/icon/jiben.png" />基本情况
</div>
</div>
<div class="center-content">
<div class="title">
<span>丽水市教育系统食堂采购溯源大数据</span>
</div>
</div>
<div class="right-content header-right">
<div class="time-btn time-btn-right">
<img src="./images/icon/suyuan.png" />采购溯源
</div>
<div class="user-container">
<img src="./images/header-user.png" class="logo" />
<span class="username">ching126</span>
<div class="exit">
<img src="./images//header-exit.png" />
</div>
</div>
</div>
</div>
</div>
<div class="container" id="container">
<div class="container-mid">
<div class="left-content">
<div id="purchase-summary" class="info" style=' height: calc(calc(calc(100% - 0.6rem) / 2) * 1);'>
<div class="up" style="height: 10%;padding-bottom: 15px;">
<img src="./images/icon/left1.png" alt="">
<p class="title">分区采购汇总</p>
</div>
<div class="down" style="height: 90%;">
<div class="left">
<ul>
<li class="day">
<span class="text">今日</span>
<span class="totalnum">1888</span>
<span>元</span>
<img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="month">
<span class="text">本月</span>
<span class="totalnum">9888</span>
<span>元</span>
<img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="year">
<span class="text">本年</span>
<span class="totalnum">109888</span>
<span>元</span>
<img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
</li>
</ul>
<div class="school">
<img src="./images/kindergarten.png" alt="">
<span class="text">幼儿园：1000所</span>
</div>
</div>
<div class="center">
<ul>
<li class="day">
<span class="text">今日</span>
<span class="totalnum">2888</span>
<span>元</span>
<img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="month">
<span class="text">本月</span>
<span class="totalnum">9888</span>
<span>元</span>
<img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="year">
<span class="text">本年</span>
<span class="totalnum">209888</span>
<span>元</span>
<span></span>
</li>
</ul>
<div class="school">
<img src="./images/school.png" alt="">
<span class="text">小学：1200所</span>
</div>
</div>
<div class="right ">
<ul>
<li class="day">
<span class="text">今日</span>
<span class="totalnum">1888</span>
<span>元</span>
<img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="month">
<span class="text">本月</span>
<span class="totalnum">6888</span>
<span>元</span>
<img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
</li>
<li class="year">
<span class="text">本年</span>
<span class="totalnum">36888</span>
<span>元</span>
<span></span>
</li>
</ul>
<div class="school">
<img src="./images/highschool.png" alt="">
<span class="text">初中：1600所</span>
</div>
</div>
</div>
</div>
<div id="purchase-category" class="info"
style=' height: calc(calc(calc(100% - 0.6rem) / 2) * 1);margin-bottom: 0;'>
<div class="up">
<img src="./images/icon/left2.png" alt="">
<p class="title">采购分类占比</p>
</div>
<div class="down"
style="height: 90%;display: flex;justify-content: space-evenly;align-items: center;">
<div id="month-static"></div>
<div id="year-static"></div>
</div>
</div>
</div>
<div class="center-content" style="margin-bottom: 0">
<div class="info-big" style="margin-bottom: 0">
<div class="up" style="height: 10%;margin-left:20px;">
<img src="./images/icon/center.png" alt="">
<p class="title">区域采购数据</p>
</div>
<div class="down" style="height: 90%;">
<div id="map"></div>
</div>
<div class="map-info">
<div class="minfo">
<h3 class="count">123<span class="unit">元</span></h3>
<p class="type">幼儿园</p>
<p class="unit">58所</p>
</div>
<div class="minfo">
<h3 class="count">123<span class="unit">元</span></h3>
<p class="type">小学</p>
<p class="unit">102所</p>
</div>
<div class="minfo">
<h3 class="count">123<span class="unit">元</span></h3>
<p class="type">初中</p>
<p class="unit">15所</p>
</div>
</div>
<div id='backBtn' class="backbtn">返回</div>
</div>
</div>
<div class="right-content">
<div id='pic' class="info" style="margin-bottom: 0.2rem;">
<div class="up">
<img src="./images/icon/right1.png" alt="">
<p class="title">违规照片</p>
</div>
<div class="down">
<div class="left">
<img src="./images/right/weiguipic.png" alt="">
<span>2021.06.28 12:56</span>
</div>
<div class="right">
<ul>
<li>
<span class="fieldngit ame">学校名称</span><br>
<span class="fieldvalue">丽水市职业高级中学</span>
</li>
<li>
<span class="fieldname">学校名称</span><br>
<span class="fieldvalue">丽水市职业高级中学</span>
</li>
<li>
<span class="fieldname">学校名称</span><br>
<span class="fieldvalue">丽水市职业高级中学</span>
</li>
</ul>
</div>
</div>
</div>
<div class="info" style="margin-bottom: 0.2rem;">
<div class="up">
<img src="./images/icon/right2.png" alt="">
<p class="title">消毒台账统计</p>
</div>
<div class="down">
<div id="xiaodu-pie" class="left"></div>
<div id='xiaodu-bar' class="right"></div>
</div>
</div>
<div class="info" style="margin-bottom: 0;">
<div class="up">
<img src="./images/icon/liuyang-icon.png" alt="">
<p class="title">留样台账</p>
</div>
<div class="down">
<div id="liuyang-pie" class="left"></div>
<div id='liuyang-bar' class="right"></div>
</div>
</div>
</div>
</div>
<div class="container-bottom">
<div class="info bottom-mid" style="height: 78%;">
<div class="jiance" style="display: flex;height: 20%;">
<div class="up" style="width: 60%;">
<img src="./images/icon/bottom1.png" alt="">
<p class="title">检测汇总（<span class='text-style-1'>103</span><span
style="color: red;">/3</span>）
</p>
</div>
<!-- <ul class="ul-txt1 jiance" style="flex:1;display: flex;justify-content: flex-end;">
<li id="jianceBtn1" class="mli0">价格预警</li>
<li id="jianceBtn2" class="mli1">过期预警</li>
</ul> -->
</div>
<div class="warn-table">
<div class="m-tablel2">
<div class="top">
<!-- <span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span> -->
<!-- <span class="s5">过期天数</span> -->
<table>
<tr>
<th>配送公司</th>
<th>检测总批次</th>
<th>不合格批次</th>
</tr>
</table>
</div>
<div class="m-slick2">
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市配送公司1</td>
<td>10次</td>
<td>10次</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="info" style="height: 78%;">
<div class="up" style="height: 10%;">
<img src="./images/icon/bottom2.png" alt="">
<p class="title">分类食材采购量top5</p>
</div>
<ul id='selectFood' class="ul-txt1">
<li class="li0">蔬菜类</li>
<li class="li1">肉蛋类</li>
<li class="li2">冻品类</li>
<li class="li3">水产类</li>
</ul>
<div id="caigouliang-bar" style="height: 60%;"></div>
</div>
<div class="info bottom-big guoqi" style="height: 78%;">
<div class="up" style="display:flex;flex-direction:row;justify-content:space-between;">
<div class="" style="display: flex;align-items: center;flex: 1;">
<img src="./images/icon/bottom3.png" alt="">
<p class="title">过期预警</p>
</div>
<ul id="test1" class="ul-txt1" style="flex: 2;display: flex;justify-content: flex-end;">
<li class="gli0">价格预警</li>
<li class="gli1">过期预警</li>
<!-- <li class="gli2">冻品类</li>
<li class="gli3">水产类</li> -->
</ul>
</div>
<div class="warn-table">
<div class="m-tablel2">
<div class="top">
<!-- <span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span> -->
<!-- <span class="s5">过期天数</span> -->
<table>
<tr>
<th>学校名称</th>
<th>商品名称</th>
<th>预警内容</th>
<th>过期日期</th>
</tr>
</table>
</div>
<div class="m-slick2">
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<table>
<tbody>
<tr>
<td>丽水市文元学校</td>
<td>大米</td>
<td>2021.07.08过期</td>
<td>2021.07.02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="info" style="height: 78%;">
<div class="up">
<img src="./images/icon/bottom4.png" alt="">
<p class="title">餐饮浪费</p>
</div>
<div class="down langfei-static">
<div class="canyin" style="background:url('./images/bg/shitang.png');background-repeat: no-repeat;
background-size: cover;
background-position: center;">
<div class="left">
<span class="canguan-num">1680</span>
<span class="canguan-field">食堂总数(家)</span>
</div>
<div class="right">
<span class="canguan-num">12</span>
<span class="canguan-field">上报数(家)</span>
</div>
</div>
<div class="canyin" style="background:url('./images/bg/shitang2.png');background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-top: 1.25rem;">
<div class="left">
<span class="canguan-num">1680</span>
<span class="canguan-field">采购总数(斤)</span>
</div>
<div class="right">
<span class="canguan-num">12</span>
<span class="canguan-field">废弃数(斤)</span>
</div>
</div>
</div>
</div>
<div class="info" style="height: 78%;">
<div class="up">
<img src="./images/icon/bottom5.png" alt="">
<p class="title">人均废弃量top5</p>
</div>
<div class="down">
<div id="feiqiliang-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/echarts.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script> -->
<script src="./js/time.js"></script>
<script src="./js/tracesource.js"></script>
<!-- 地图js -->
<script src="./js/mapIcon.js"></script>
<script src="./js/map.js" type="module"></script>
<script src="./js/slick.min.js"></script>
<script>
setTimeout(() => {
let height = document.body.clientHeight;
let headerH = $("#header").height();
$("#container").height(height - headerH)
}, 100)
//分区采购汇总图
//采购分类图
//用餐情况统计
var fenleiData1 = [{
value: 334,
name: '肉蛋禽'
},
{
value: 300,
name: '冻品'
},
{
value: 350,
name: '蔬菜'
},
{
value: 150,
name: '调味干货'
},
]
var fenleiColor1 = ['#2fa9ff', '#58ba27', '#fd454e', '#f0c321']
var fenleiData2 = [{
value: 334,
name: '肉蛋禽'
},
{
value: 300,
name: '冻品'
},
{
value: 350,
name: '蔬菜'
},
{
value: 150,
name: '调味干货'
},
]
var fenleiColor2 = ['#2fa9ff', '#58ba27', '#fd454e', '#f0c321']
fenleipercent(echarts, 'month-static', fenleiData1, fenleiColor1, '本月（元）');
fenleipercent(echarts, 'year-static', fenleiData2, fenleiColor2, '本年（元）');
// 3d地图
// map3d(echarts, '3dmap');
//分类食材top5，横向柱状图
var foodCate = ['土豆（斤）', '大白菜（斤）', '鸡肉（斤）', '鸡蛋（斤）', '猪肉（斤）']
var foodNum = [1000, 900, 800, 700, 600];
setTimeout(() => { hengxiangbar2(echarts, 'caigouliang-bar', foodCate, foodNum); }, 100)
/*****************监测汇总，点击切换样式******************/
let clickIndex;
//获取liBtn的索引号,点击切换切换样式
$('.jiance li').click(function (e) {
clickIndex = $('ul.jiance li').index(this);
// if(clickIndex==tempMonitorIndex){
// return;
// }
if (clickIndex == 0) {
$('#jianceBtn1').addClass('on');
$('#jianceBtn2').removeClass('on');
} else {
$('#jianceBtn1').removeClass('on');
$('#jianceBtn2').addClass('on');
}
})
//自动切换样式，移入移出暂停切换
let monitorIndex = 0;
let tempMonitorIndex;
let monitorClassName;
function move() {
if (monitorIndex > 1) {
monitorIndex = 0;
}
if (tempMonitorIndex >= 0) {
monitorClassName = '.mli' + tempMonitorIndex;
$(monitorClassName).removeClass('on');
}
monitorClassName = '.mli' + monitorIndex;
$(monitorClassName).addClass('on');
tempMonitorIndex = monitorIndex;
monitorIndex++
}
let monitorInteval = setInterval(move, 2000);
$('.jiance>ul').mouseenter(function (event) {
// event.stopPropagation(); // 阻止事件冒泡
clearInterval(monitorInteval);
});
$('.jiance>ul').mouseleave(function (event) {
// event.stopPropagation(); // 阻止事件冒泡
clearInterval(monitorInteval);
monitorInteval = setInterval(move, 2000);
});
/*****************分类食材自动切换样式*******************/
let fenleiindexFlag = 0;
let fenleitempIndex; //记录上一次的索引号
let fenleiclassName;
function fenleiMove() {
if (fenleiindexFlag > 3) {
fenleiindexFlag = 0; //重置索引号
}
// console.log(tempIndex);
if (fenleitempIndex >= 0) {
fenleiclassName = ".li" + fenleitempIndex;
$(fenleiclassName).removeClass('on');
// console.log(1);
}
fenleiclassName = ".li" + fenleiindexFlag;
$(fenleiclassName).addClass('on');
// console.log(2);
fenleitempIndex = fenleiindexFlag;
fenleiindexFlag++;
}
let fenleiIterval = setInterval(fenleiMove, 2000);
//控制样式自动
$('#selectFood li').mouseenter(function () {
clearInterval(fenleiIterval);
});
$('#selectFood li').mouseleave(function () {
clearInterval(fenleiIterval);
fenleiIterval = setInterval(fenleiMove, 2000);
});
//分类点击切换样式
let foodSelIndex;
$('#selectFood li').click(function () {
foodSelIndex = $('#selectFood li').index(this);
$(this).addClass('on');
// console.log(foodSelIndex);
// console.log(fenleitempIndex);
if (foodSelIndex != fenleitempIndex) {
$('#selectFood li').eq(fenleitempIndex).removeClass('on');
}
fenleitempIndex = foodSelIndex;
});
//分类食材采购top5横向bar
hengxiangbar(echarts, 'caigouliang-bar', foodCate, foodNum);
/**************过期预警********************/
//过期预警tab点击效果
// var lastIndex;
// $("#test1").click(function (e) {
// //获取点击元素的索引号
// var index = $("#test1 li").index(this);
// if (lastIndex) {//不是第一个
// $("ul#test1").children(lastIndex).removeClass("on");
// }
// lastIndex = index;
// $(e.target).addClass('on');
// });
let guoqiindexFlag = 0;
let guoqitempIndex; //记录上一次的索引号
let guoqiclassName;
function guoqiMove() {
// console.log(333);
if (guoqiindexFlag > 3) {
guoqiindexFlag = 0; //重置索引号
}
// console.log(tempIndex);
if (guoqitempIndex >= 0) {
guoqiclassName = ".gli" + guoqitempIndex;
$(guoqiclassName).removeClass('on');
// console.log(1);
}
guoqiclassName = ".gli" + guoqiindexFlag;
$(guoqiclassName).addClass('on');
// console.log(2);
guoqitempIndex = guoqiindexFlag;
guoqiindexFlag++;
}
let guoqiIterval = setInterval(guoqiMove, 2000);
$('#test1 li').mouseenter(function (event) {
// event.stopPropagation(); // 阻止事件冒泡
clearInterval(guoqiIterval);
// console.log(111);
});
$('#test1 li').mouseleave(function (event) {
// event.stopPropagation(); // 阻止事件冒泡
clearInterval(guoqiIterval);
guoqiIterval = setInterval(guoqiMove, 2000);
// console.log(222);
});
//单击控制样式自动
let guoqiSelIndex;
$('#test1 li').click(function () {
guoqiSelIndex = $('#test1 li').index(this);
$(this).addClass('on');
// console.log(guoqiSelIndex);
// console.log(guoqitempIndex);
if (guoqiSelIndex != guoqitempIndex) {
$('#test1 li').eq(guoqitempIndex).removeClass('on');
}
guoqitempIndex = guoqiSelIndex;
});
//人均废弃量top5
setTimeout(() => { feiqiliang(echarts, 'feiqiliang-bar'); }, 100)
//检查明细
//消毒台账统计
var xiaoduData = [{
value: 900,
name: '已完成'
},
{
value: 780,
name: '未完成'
},
]
var xiaoduColor1 = ['#56b9ff', '#f3cf4d']
xiaoduchart(echarts, 'xiaodu-pie', xiaoduData, xiaoduColor1);
var sanweibardata = ["餐具消毒数（个）", "公共用具消毒（个）"]
sanweibar2(echarts, 'xiaodu-bar');
//刘杨台账
var liuyangData = [{
value: 900,
name: '已完成'
},
{
value: 780,
name: '未完成'
},
]
xiaoduchart(echarts, 'liuyang-pie', liuyangData, xiaoduColor1);
sanweibar3(echarts, 'liuyang-bar');
//过期预警
$(document).ready(function () {
$('.m-slick2').slick({
dots: false,
arrows: false,
infinite: true,
autoplay: true,
vertical: true,
autoplaySpeed: 5000,
fade: false,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4
});
$('.m-slick1').slick({
dots: false,
arrows: false,
infinite: true,
autoplay: true,
vertical: true,
autoplaySpeed: 5000,
fade: false,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4
});
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手